The nested subcriteria of the jqgrid subgrid of the 4th level always returns the first rowid of the subseries

Question

jqGrid v4.3.2
ie9
win7enterprise

I use the following code to generate subgrids:

http://www.trirand.com/blog/jqgrid/jqgrid.html → More → Grid as SubGrid

I do it and I have

Sub Level 1 OK

subcrisis of the 2nd level OK
subcrisis of the third level OK
4th level subgrid. It loads an OK subgate for each row of the 3rd Lvl sg, but it only displays the data of the first identifier of the third level row sg

When I check the developer tools, I see that the request always sends the identifier of the first row of the third sub-critique, I know how to add custom parameters using postData that I already tried, and also this answer from Oleg To postData for subgrid in jqgrid does not work? (this one does not work in my case, data is not added to the request)

I tried to return the rowdid from the following events, but with no luck, it still returns the identifier of the first row of the third subcrist, and thus, for each row in the third sub-series, the child subgram always returns the same.

subGridRowExpanded //always returns first row id of the third grid onSelectRow //doesn't fire if we click the + icon for expanding the subgrid beforeSelectRow //doesn't fire at all 

Another strange behavior is that if I click on any line on a third-level subgrad, it will select only the first line.

No, using treegrid is not an option, sorry.

I'm going to associate the click event on the plus sign (first cell) of each row of the 3rd level subgrad and run expandSubGridRow, but the question remains, how can I get the rowid of the row that I clicked on the third level subgrad?

With best wishes and thanks, any help is greatly appreciated.

 jQuery("#listsg11").jqGrid({ url:'server.php?q=1', datatype: "xml", height: 190, colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'], colModel:[ {name:'id',index:'id', width:55}, {name:'invdate',index:'invdate', width:90}, {name:'name',index:'name', width:100}, {name:'amount',index:'amount', width:80, align:"right"}, {name:'tax',index:'tax', width:80, align:"right"}, {name:'total',index:'total', width:80,align:"right"}, {name:'note',index:'note', width:150, sortable:false} ], rowNum:8, rowList:[8,10,20,30], sortname: 'id', viewrecords: true, sortorder: "desc", multiselect: false, subGrid: true, caption: "Grid as Subgrid", subGridRowExpanded: function(subgrid_id, row_id) { var subgrid_table_id; subgrid_table_id = subgrid_id+"_t"; $("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>"); jQuery("#"+subgrid_table_id).jqGrid({ url:"subgrid.php?q=2&id="+row_id, datatype: "xml", colNames: ['No','Item','Qty','Unit','Line Total'], colModel: [ {name:"num",index:"num",width:80,key:true}, {name:"item",index:"item",width:130}, {name:"qty",index:"qty",width:70,align:"right"}, {name:"unit",index:"unit",width:70,align:"right"}, {name:"total",index:"total",width:70,align:"right",sortable:false} ], subGrid: true, caption: "Grid as Subgrid", subGridRowExpanded: function(subgrid_id2, row_id2) { var subgrid_table_id2; subgrid_table_id2 = subgrid_id2+"_t"; $("#"+subgrid_id2).html("<table id='"+subgrid_table_id2+"' class='scroll'></table>"); jQuery("#"+subgrid_table_id2).jqGrid({ url:"subgrid.php?q=3&id="+row_id2, datatype: "xml", colNames: ['No','Item','Qty','Unit','Line Total'], colModel: [ {name:"num",index:"num",width:80,key:true}, {name:"item",index:"item",width:130}, {name:"qty",index:"qty",width:70,align:"right"}, {name:"unit",index:"unit",width:70,align:"right"}, {name:"total",index:"total",width:70,align:"right",sortable:false} ], subGrid: true, caption: "Grid as Subgrid", subGridRowExpanded: function(subgrid_id3, row_id3) { var subgrid_table_id3; subgrid_table_id3 = subgrid_id3+"_t"; $("#"+subgrid_id3).html("<table id='"+subgrid_table_id3+"' class='scroll'></table></div>"); jQuery("#"+subgrid_table_id3).jqGrid({ url:"subgrid.php?q=4&id="+row_id3, datatype: "xml", colNames: ['No','Item','Qty','Unit','Line Total'], colModel: [ {name:"num",index:"num",width:80,key:true}, {name:"item",index:"item",width:130}, {name:"qty",index:"qty",width:70,align:"right"}, {name:"unit",index:"unit",width:70,align:"right"}, {name:"total",index:"total",width:70,align:"right",sortable:false} ] }); } }); } }); } }); 

Answer 1

I still assume that you have some id conflicts between * data in * all ** subgrids displayed on the page. For example, if you are inserting at some level into some of the open grids, data having “1” as rowid, no other data in any subnet should be inserted with the same subnet.

To understand: you use key:true for the "num" column at all subgrid levels. The corresponding value will be used not only in the "num" column inside the grid cell (inside <td>here</td> ). It will also be used as the id attribute value of a grid line or subnet ( <tr> ). HTML does not allow duplicate id on the page. Thus, you insert elements with duplicate id, you can have some strange effects that can be different in different web browsers. For example, you try to select one row and it will select another. You can also have a lot more problems than selecting strings. Thus, you must fill in the grids so that the identifiers are unique throughout the page .

To make sure that the problem with duplicate id does not exist, you can use the idPrefix option. At level 0 you can use

 idPrefix: "m" 

(from the main one), for example. To subtitle on the next level you can use

 idPrefix: "s" + row_id + "_" 

for the next level subgraph

 idPrefix: "s" + row_id + "_" + row_id2 + "_" 

and

 idPrefix: "s" + row_id + "_" + row_id2 + "_" + row_id3 + "_" 

The jQuery("#"+subgrid_table_id3) definition jQuery("#"+subgrid_table_id3) is inside the subGridRowExpanded subgrid of all previous levels. This way you can access row_id and row_id2 defined in the outer area.

I hope that after the changes you don’t have any strange problems like the problems you described.

here is a sample of duplicates