jquery - jqGrid resolve the grid pager ID dynamically?

Question

I have 3 simple questions.

1. I have some code that tells me if a jqGrid object is present in the page:

   //Check if there is a jqGrid on the page and if present, reloads its data ;)
   var jqGrid = $('div.ui-jqgrid-bdiv table');
   if (jqGrid.length) {
       //time to reload
       $(jqGrid).trigger('reloadGrid');
   }
   

   I would like to find the pager ID element if there is one. Is there any way to do this?

2. Suppose I have a custom class in my jqGrid table:

   <table id="myGrid" runat="server" class="customclass"></table>
   <div id="myGrid_pager" runat="server"></div>
   

   How do I check the presence of customclass inside my jqGrid dynamically?

EDIT:

With Oleg help I have been able to code a reconfigPermissions() function that show/hide default Add, Edit and Delete buttons. Here is the function:

function reconfigPermissions(gridID) {
    var enableRegistry = CanModifyRegistry();
    var ops = ['#add_' + gridID, '#edit_' + gridID, '#del_' + gridID];
    $.each(ops, function (ix, value) {
        var $td = $(value);
        if (enableRegistry === true) {
            $td.show();
        } else {
            $td.hide();
        }
    });
}

This function get called when the user select another range of dates in a combo box defined elsewhere in the page. The problem is the following: if, when the grid is initially loaded, the user has rights to the default period (selected in the combo box) everything works. You can switch the date range in the combo and the buttons appear and disappear correctly. Unfortunately if the user has no rights on the default period initially selected (so the first creation of the grid has {add: false, edit: false, del: false}) even switching to a period where the user has rights does not add the buttons at all.

This is the code binded to the combo box change event handler

$.ajax({
    url: GetBaseWSUrl() + 'MyWebService.asmx/ChangeCurrentPeriod',
    type: "post",
    dataType: "json",
    async: false,
    data: JSON.stringify({ periodID: $(this).val() }),
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        //Check if there is a jqGrid on the page and if present, reloads its data
        var jqGrids = $('div.ui-jqgrid-bdiv table');
        jqGrids.each(function (ix, jqGrid) {
            var gridID = $.jgrid.jqID(jqGrid.id)
            reconfigPermissions(gridID);
            jqGrid.trigger('reloadGrid');
        });
    }
});

Any suggestion?

Answer 1

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:

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