DHTMLX Docs & Samples Explorer

Index
dhtmlxgrid

### Sub-Grid

dhtmlxgrid_excell_sub_row.js required

As any content can be loaded as a value of the sub-row, one of possible use-cases is to load a sub-grid as a sub-row. While it can be achieved with the usage of a sub_row only, the component also provides a special type of excell - sub_row_grid that allows to simplify such task.

In case of sub_row_grid usage, the value of the cell is treated as a URL to the configuration XML of the sub-grid:

            grid.setColTypes("sub_row_grid,ed,ed");

Later in XML the user will have the following code:

        <rows>
        <row id="some">
            <cell>my_grid.xml</cell><cell>Data </cell><cell>Data </cell>
        <row>
        </rows>

And in my_data.html there will be the following lines:

        <rows>
            <head>
                ... configuration of grid here ...
            </head>
            ... data of grid here ...
        </rows>

After clicking ”+” image, the component will fetch configuration XML and build the sub-grid based on it:

As the sub-grid has different configuration, it can have a different set of columns and its style can differ from that of the main grid. The sub-grid object can be accessed in the following way:

            grid.cells(i,j).getSubGrid();

### Related Events

onSubGridCreated - executed when sub-grid opened first time, and related object created ( before data loaded in subgrid ), blockable:

- subgrid object;
- row id;
- row index;
- content of the related cell.

onSubGridLoaded - executed when data loaded in subgrid:

- subgrid object;
- row id;
- row index;
- content of the related cell.

### Sub grid events and sub grid customizing

There are two events in the component that allow you to customize the sub grid:

a) onSubGridCreated It is called when the sub grid object is created (triggered by sub_row opening), but before data is loaded from the related XML file. It provides the following values:

- sub grid object;
- row id;
- cell index;
- sub_row_grid cell value.

b) onSubGridLoaded This event is called when the sub grid has loaded the configuration XML and parsed its values. It provides the following values:

- sub grid object;
- row id;
- cell index;
- sub_row_grid cell value.

Events can be used to change the grid behavior:

      grid.attachEvent("onSubGridCreated",function(subgrid){
          subgrid.enableMultiselect(true);
          subgrid.enableEditEvents(false,false,false);
          return true; // mandatory!
      })

Add|preselect some data after configuration was loaded:

      grid.attachEvent("onSubGridLoaded",function(subgrid){
          subgrid.addRow(someid,value);
          subgid.selectCell(someid,0);
      })

Events can be used to fully change the way the sub grid is loaded. E.g. the sub grid can be built manually:

      grid.attachEvent("onSubGridCreated",function(subgrid){
          subgrid.setHeader("A,B,C");
          subgrid.setColTypes("ro,ro,ro");
          subgrid.setInitWidths("100,100,100")
          subgrid.init();
          return false;  // block default behavior
      })

Or the sub grid can be loaded from XML string:

      grid.attachEvent("onSubGridCreated",function(subgrid,id,ind,data){
          subgrid.loadXMLString(data); // use the current data as configuration xml
          return false; // prevent default behavior
      })