Sub-grids

You can use collapsible sub-grid to integrate 2 dhtmlxGrids together.

The stated functionality requires PRO version of the dhtmlxGrid (or DHTMLX Suite) package.

Adding a sub-grid

To create a sub-grid for a row you should create a column of the 'sub_row_grid' type and use it as any other columns to specify the related data. dhtmlxGrid will treat data values specified in that column as URLs to the XML configuration of the sub-grids.

Adding sub-grid to the grid

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setColTypes("sub_row_grid,ed,ed");
...
mygrid.init();
mygrid.load('data.xml', 'xml');

data.xml file

<?xml version="1.0"?>
<rows>
    <row id="row1">
        <cell> sub-grid.xml </cell>
        <cell> Data </cell>
        <cell> Data </cell>
    <row>
    ...
</rows>

sub-grid.xml file

<?xml version="1.0"?>
<rows>
    <head>
        <column width="80" type="ro" align="left"  sort="str">Quarter</column>
        <column width="80" type="dyn" align="right"  sort="str">Sales</column>
        <column width="110" type="price" align="right" sort="str">Price</column>
    </head>
    <row id="1">
        <cell>I</cell>
        <cell>-3500</cell>
        <cell>15.99</cell>
    </row>
    ...
</rows>

Related sample: Grid with subgrid

Sub-grid for a single row

When you specify 'sub_row_grid' columns, it's implied that each row of the grid will contain a sub-grid. In various situations you may need to add sub-grids just to the specific rows, while supplementing other rows with simple text sub-rows.

In this case you should set type 'sub_row_grid' just for the cells related to rows you want to add sub-grids to (no matter what type of a cell the column is).

The type of the cell can be set by 2 ways:

by the method setCellExcellType():

Adding sub-grid to a single row

mygrid = new dhtmlXGridObject('gridbox');
mygrid.setColTypes("ed,ed,ed");
...
mygrid.init();
mygrid.load("data.xml", function() {
        mygrid.setCellExcellType('1',0,"sub_row_grid");
        }
);

or directly in XML configuration

data.xml file

<rows>
    <row id="row1">
        <cell type="sub_row_grid">sub-grid.xml</cell>
        <cell>Data</cell>
        <cell>Data</cell>
    <row>
    ...
</rows>

Getting the sub-grid object

To get the sub-grid instance use the method getSubGrid():

// [i,j] - index of the parent row, index of the 'sub_row' column (zero-based numbering)
grid.cells(i,j).getSubGrid();

Related events

onSubGridCreated - called when the sub-grid object is created, but before data is loaded from the related XML file;
onSubGridLoaded - called when the sub-grid has loaded the XML configuration and parsed its values.