Subgrid as Grid

This is not a ready for you method, but rather a solution using some of the available methods and events. In this alternative to a subGrid, we use the subGrid functions of the main grid to create not a subGrid, but another grid, with all of the power and capacity of the main grid but appearing, as before, under the “parent” record with the same ability to reveal and hide it.

 Grid as Subgrid


In order to use this module you should mark the Subgrid when you download the grid. For more information refer to Download.
For Developers - this is the grid.subgrid.js in the src directory.


We use two events described in options array: subGridRowExpanded and subGridRowColapsed [note the unconventional spelling]

When these events are defined the population of the data in the subgrid is not executed. This way we can use the subGridUrl to get our custom data and put it into the expanded row. Having this it is easy to construct another grid which will act as subgrid.

Here is this technique. We again use our example.

<script type="text/javascript">
    datatype: 'xml',
    mtype: 'GET',
    colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
    colModel :[ 
      {name:'invid', index:'invid', width:55}, 
      {name:'invdate', index:'invdate', width:90}, 
      {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} 
    pager: '#pager',
    sortname: 'invid',
    sortorder: 'desc',
    viewrecords: true,
    caption: 'My first grid',
    subGrid: true,
    subGridRowExpanded: function(subgrid_id, row_id) {
    // we pass two parameters
    // subgrid_id is a id of the div tag created within a table
    // the row_id is the id of the row
    // If we want to pass additional parameters to the url we can use
    // the method getRowData(row_id) - which returns associative array in type name-value
    // here we can easy construct the following
       var subgrid_table_id;
       subgrid_table_id = subgrid_id+"_t";
       jQuery("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
          datatype: "xml",
          colNames: ['No','Item','Qty','Unit','Total'],
          colModel: [
          height: '100%',
          sortname: 'num',
          sortorder: "asc"

Note that subGridRowColapsed is not defined. This is true because when the row is collapsed the contents of the div tag are removed.


Alexander Stoinov, 2010/03/11 09:20

I am trying to use grid as subgrid with client-side data, not using xml or json and removing the data from the subgrid on collapse is a problem. Is there any workaround? One other thing that i saw is when you expand a row and see the subgrid, if you try to delete the row you expanded the grid brokes. I'm not sure this happens everywhere or is a problem only with my script.

Nick C, 2010/08/23 19:14

I'm using jqGrid 3.6.2. I have the Subgrid as Grid working fine, except I think I may have found a bug (or invalid use-case).

When I have the subgrid expanded as in the example above and try to use the getCol method on the parent grid to get all the amounts (or any column that doesn't appear in the subgrid), a JS error is produced:

$t.rows[i].cells[pos] is undefined

Is this fixed in an updated version?

Toni Anzlovar, 2011/11/02 21:59

I noticed that IDs of table rows are just integers running from 1 to n. When you make a table inside a table HTML becomes invalid, because a document cannot have multiple IDs exactly the same. Also inline editing will not work, because you are referencing an id if the document, not self. Multiple equal IDs lead to unpredictable results.

You could leave a comment if you were logged in.

QR Code
QR Code wiki:subgrid_as_grid (generated for current page)