jquery - jqgrid nested subgrid 4th level subgrid always returns first rowid of the subgrid

Question

jqGrid v4.3.2
ie9
win7enterprise

I'm using the following code to generate subgrids:

http://www.trirand.com/blog/jqgrid/jqgrid.html - > Advanced -> Grid as SubGrid

I do this and i have

1st level subgrid OK
  2nd level subgrid OK
    3rd level subgrid OK
      4th level subgrid It loads the subgrid OK for every row of the 3rd Lvl sg, but it shows data only of the first row id of the 3rd Lvl sg

When I check the developer tools I see that the request always sends the id of the first row of the third subgrid, I know how to append custom parameters with postData which I have already tried and also this answer from Oleg K postData for subgrid in jqgrid not working? (this one doesn't work in my case, data is not added to the request)

I've tried to return the rowdid from the following events but no luck, it stills returns the first row id of the third subgrid and thus, for every row on the third subgrid the children subgrid 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 behaviour is that if i click any row on the third level subgrid it only selects the first row.

No, using treegrid is not an option, sorry.

I'm thinking of binding a click event on the plus icon (first cell) of each row of the 3rd level subgrid and fire a expandSubGridRow, but the question remains, how do I get the rowid of the row I clicked of the third level subgrid?

Best regards and thanks in advance, any help is much 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 suppose that you have some id conflicts between *data in *all** subgrids displayed on the page. For example if you inserts on some level in some from opened grids the data having "1" as the rowid no other data in any subgrid should be inserted with the same subgrid.

For understanding: You use key:true for the "num" column on all level of subgrids. The corresponding value will be not just used in "num" column inside of grid cell (inside of <td>here</td>). It will be also used as the value of id attributes of the row of the grid or subgrid (<tr>). HTML don't permit id duplicates on the page. So it you do insert elements with id duplicates you can have some strange effects which could be different in different web browsers. For example you will try to select one row and it will be selected another one. You can also have much more hard problems as selection of rows. So you should fill the grids so than ids will be unique on the whole page.

To be sure that the problem with id duplicates is not exists you can use idPrefix option. On the level 0 you can use

idPrefix: "m"

(from main) for example. For the subgrid on the next level you can use

idPrefix: "s" + row_id + "_"

for the next level subgrid

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

and

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

The definition of jQuery("#"+subgrid_table_id3) is inside of subGridRowExpanded of subgrids of all previous levels. So you can access row_id and row_id2 defined on the outer scope.

I hope, that after the changes you will don't have any strange problems like the problems which you described.

here is sample of DUPLICATES