jqGrid resolve the grid pager ID dynamically?

You can find the jqGrids existing on the page in many ways. For example you can use $('table.ui-jqgrid-btable') instead of $('div.ui-jqgrid-bdiv table'). Moreover you should not forget that it can be more as one jqGrid on the page in general. I recommend you to write your code so that it will work with many jqGrids of the page even if you currently use only one jqGrid per page.

If you find in any way the table element of jqGrid you can get the DOM element of the first found grid with jqGrids[0]. jqGrid use some extenders of the DOM. It add additional properties grid and p. In every jqGrid method will be checked whether the grid is initialized by verifying that grid property exist. The p property gives you all jqGrid parameters inclusive p.pager. You can create up to two pager on on grid: one on top edge of the grid and another on the bottom (see this for more information). So the code which you need could looks like

var jqGrids = $('table.ui-jqgrid-btable');
if (jqGrid.length > 0) {
    jqGrid.each(function(i) {
        if (this.grid) {
            // one more test for the jqGrid
            // jqGrid[i] is a jqGrid
            if (this.p.toppager) {
                // this.id + '_toppager' is the id of the top pager
            }
            if (this.p.pager) {
                // this.p.pager is the id of the bottom pager
            }
        }
    });
}

To test whether the table element has some customclass class you can use jQuery.hasClass.

UPDATED: In the comment you asked me how to hide or to show the buttons in the navigator bar dynamically. I prepared the demo which demonstrate this:

enter image description here

If one checks the buttons which are placed above the grid the corresponding button from the navigator bar will be hide. Unchecking will show the corresponding button back.

The code just call $('#add_list').hide() or $('#add_list').show() to hide/show the “Add” button. In the example the last part of the id=”add_list” is the id of the <table> element used to create the grid. Other standard buttons have the ids starting with the following prefixes: 'edit_', 'view_', 'del_', 'search_', 'refresh_'. More common code which works if the id of the grid has special characters looks as following:

var grid = $("#list"),
    gid = $.jgrid.jqID(grid[0].id);

$('#cbAdd').change(function () {
    var $td = $('#add_' + gid);
    if ($(this).is(':checked')) {
        $td.hide();
    } else {
        $td.show();
    }
});

To find the custom navigator buttons added by navButtonAdd I use title attribute:

$('#cbChooseColumns').change(function () {
    var $td = $(grid[0].p.pager + '_left ' + 'td[title="choose columns"]');
    if ($(this).is(':checked')) {
        $td.hide();
    } else {
        $td.show();
    }
});

Leave a Comment