How to hide jqGrid footer row when no records present

Question

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

Answer 1

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();
    }
}