Does JqGrid dynamically resolve grid paging id?

Question

I have 3 simple questions.

• I have some code that tells me if there is a jqGrid object on 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 any. Is there any way to do this?

• Suppose I have my own class in my jqGrid table:

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

  How to check the dynamic presence of the custom class inside my jqGrid?

EDIT:

With Oleg, I was able to program the reconfigPermissions() function, which shows / hides the add, edit and delete buttons by default. 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 is called when the user selects a different date range in the combo box defined elsewhere on the page. The problem is this: 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 combos and the buttons will appear and disappear correctly. Unfortunately, if the user does not have rights to the initially selected default period (therefore, the first grid creation has {add: false, edit: false, del: false} ), even if switching to the period when the user has rights does not add a button at all .

This is the code associated with the 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 jqGrids existing on the page in many ways. For example, you can use $('table.ui-jqgrid-btable') instead of $('div.ui-jqgrid-bdiv table') . In addition, you should not forget that it can be more like one jqGrid on the page as a whole. I recommend you write your code so that it works with many jqGrids per page, even if you use only one jqGrid per page.

If you somehow find the table jqGrid element, you can get the DOM element from the first grid found with jqGrids[0] . jqGrid uses some DOM extensions. It adds additional grid and p properties. Each jqGrid method will check to see if the grid is initialized, confirming that the grid property exists. The p property gives you all jqGrid parameters inclusive of p.pager . You can create up to two pagers on the grid: one at the top edge of the grid and the other at the bottom (see this for more information). So the code you need may look 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 check if the table element has some customclass class, you can use jQuery.hasClass .

UPDATED . In a comment, you asked me how to hide or show buttons on the navigation bar dynamically. I have prepared demos that demonstrate this:

If you check the buttons located above the grid, the corresponding button from the navigation panel will be hidden. Uncheck the box by showing the corresponding button.

The code simply calls $('#add_list').hide() or $('#add_list').show() to hide / show the Add button. In the example, the last part id = "add_list" is the identifier of the <table> element used to create the grid. Other standard buttons have identifiers starting with the following prefixes: 'edit_' , 'view_' , 'del_' , 'search_' , 'refresh_' . The more common code that works if the grid identifier has special characters is as follows:

 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 custom navigator buttons added by navButtonAdd I use the 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(); } });