How to hide jqGrid footer row when no records present

I am using footer row to display Total of Amount column. If 0 records are found, I display message: "There are no records. If you would like to add one, click the "+" button below." However the footer row is still shown with empty cells.

I tried method clearGridData as

grid.jqGrid("clearGridData", true).trigger("reloadGrid"); 

However that doesn't work. Shall I instead use

$(".ui-jqgrid-ftable").css('visibility', 'hidden'); 

OR you have any better recommendation?

Regards,

Abhilash

Answers


It seems to me that it would be better to hide the div with the footer instead of the table (which have the class ui-jqgrid-ftable). The div have the class ui-jqgrid-sdiv. Usage of $(".ui-jqgrid-ftable") seems to me not good in case of usage more as one grids on the page.

I think that you can place hiding/showing the footer inside of loadComplete callback. You can test for the number of returned recorded and show the footer only if there are more as null records. The corresponding code could be about the following:

loadComplete: function () {
    var $this = $(this),
        $footer = $this.closest(".ui-jqgrid-bdiv").next(".ui-jqgrid-sdiv"),
        records = parseInt($this.jqGrid("getGridParam", "records"), 10);

    if (records >= 0) {
        $footer.show();
    } else {
        $footer.hide();
    }
}

You can get minimal performance advantage if you would use $(this.grid.sDiv) instead of $this.closest(".ui-jqgrid-bdiv").next(".ui-jqgrid-sdiv"). The grid is internal property assigned to DOM of the grid. The grid property will be initialized during creating of the jqGrid and it will be used internally. It looks like

So you can change the above code to

loadComplete: function () {
    var $footer = $(this.grid.sDiv),
        records = parseInt($(this).jqGrid("getGridParam", "records"), 10);

    if (records >= 0) {
        $footer.show();
    } else {
        $footer.hide();
    }
}

Need Your Help

From with position: absolute - now I want to add a menu at the top

css

I use a windows program to generate a form. It's WYSIWG, design in the windows program, view in the browser, so I am using style=position: absolute; left=X; top=Y;" for every element on the form.

Query on local database file without sqlite

c# database sqlite

Is there any way to connect a database file in .net4 without using SQLite external dll?