jqGrid subGrid stops opening after scroll

Question

I have a grid (version 4.1.1) using a subGrid. I'm using loadonce: true and scroll: 1. When the grid first loads, I can open subGrids with no problem, until I scroll the main grid down to the point where it loads more data. After that, no subgrid will open or close. If I click on the plus icon, I see the "Loading...", but nothing happens. I can't even close the subGrids that were previously opened.

Here is my grid definition:

$("#grid_sites").jqGrid({
url:'getgridxmlsites.php',
      postData: {detailid: function() {return $('#hdnDetailId').val(); }},
datatype: 'xml',
height: 260,
width: 832,
shrinkToFit: false,
caption:'',
colNames :['studydetailid', 'Site', 'Name', 'Status', 'Location'],
colModel :[
   {name:'detailid',     index:'detailid', width:0, hidden: true },
   {name:'sitenumber',   index:'sitenumber',    width:60,   align:'right'},
   {name:'name',         index:'name',      width:230},
   {name:'status',       index:'status',        width:110,  align:'center'},
         {name:'location',       index:'location',  width:74}
       ],
 pager:'pager_sites',
 scroll: 1,
 viewrecords:true,
 sortable:true,
 sortname: 'sitenumber',
 autowidth: true,
 pgbuttons: false,
 loadonce: true,
//      gridview: true, // Cannot be used when using subGrid.
 onSelectRow: function(id){ gridRowSelect(id) },
 subGrid: true,
 subGridUrl: 'getgridxmldatabysite.php',
 subgridtype: 'xml',
 subGridModel: [{
        name: ['Owner', 'Phone', 'Status'],
        width: [120, 100, 100],
        align: ['left', 'left', 'left'],
        params: ['detailid']
    }],
  subGridOptions: { reloadOnExpand : false }
});

I hope you can help.

Answer 1

Typical the "Loading..." means an error in the processing of the server response. I recommend you to use jquery.jqGrid.src.js instead of jquery.jqGrid.min.js and to start your page in the debugger. For example you can use Developer Tools of Internet Explorer. Do do this you should press F12 to start Developer Tools, then choose "Script" and click on "Start debugging" button. Either the page will be stopped on error or you will be see some additional information in the "Colsole" on the right pane.

I personally not use scroll: 1 option because of complexity of the data processing and different known bugs or problems. It seems to me that you use incompatible combination of parameters. I would recommended you to remove either loadonce: true or scroll: 1 parameter.

Answer 2

I am experiencing a similar problem. It looks like the addSubGrid function in jqgrid is adding a click event to toggle the subgrid to every row in the table (not just the ones that were just loaded).

This was causing the new rows to behave fine but the first set to rapidly expand and then collapse (two click handlers). When another set of data got loaded the first set of rows worked fine (although they'd expand, collapse, and expand again) but the second set no longer worked.

I got kind of lost in the combination of addJSON and addSubGrid when trying to figure out if I was missing some of the row metadata in the JSON. For now I just modified the line:

$(ts.rows[i].cells[pos]).bind('click', function(e) {

to:

$(ts.rows[i].cells[pos]).unbind('click');
$(ts.rows[i].cells[pos]).bind('click', function(e) {

and everything seems to work as expected. This is for version 4.2.0 of jqGrid. I'm still not sure if this is a bug, a configuration problem, or a data problem but at least I'm working again.

Answer 3

In your configuration, you do not set rowNum. So I believe jqgrid will use the default rowNum which is 20. This causes the scrolling issue due to the click binding issue mentioned by Robert Simmons.

Another way to fix this issue without having to change the jqgrid code is to set the rowNum to -1. This will just get all rows, which should be fine because you are using local data. This fix may not work in previous versions to 4.6.0 however. (See How to show all rows in the jqGrid? for more info on setting rowNum to -1). In versions prior to 4.6.0 I think the main solution was to just set rowNum to a large number.