JqGrid - Multiple subgrid at the same level

Question

Can anyone point to multiple subgrid at the same level demo or example . I have already looked at http://www.trirand.net/demoaspnet.aspx. I'm looking for something in javascript.

Answer 1

The demo from the trirand.net shows just the following

It's very easy to create the subgrids like on above picture. You should just understand how the technique Subgrid as Grid works.

If the user click on "Expand" ("+") icon jqGrid create empty new row below of the expanding. The row (<tr>) will get the class "ui-subgrid". Inside of the row jqGrid create two <td> elements one td.subgrid-cell and another td.subgrid-data with the main subgrid information. jqGrid assign colspan so that the <td> will be extended till the last column of the grid. Inside of the td.subgrid-data jqGrid create empty div.tablediv. The empty div get unique id attribute which will be constructed from the id of the grid id, the character "_" and id of expanding row.

The next step is the mostly important. jqGrid call subGridRowExpanded callback. The first parameter of the callback is the id of empty <div> (the div.tablediv) where "subgrid" content should be placed. Instead of <table> element one can place any other HTML fragmant . See the old demo from the answer. So to create "multiple subgrid at the same level" one need just place two <table> element with some unique ids and use jqGrid to create grids on place of the tables.