dhtmlxgrid:sub-grids [DHX documentation]

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.

When you are loading data in subgrid through the 'onSubGridCreated' event, you need to call the 'onGridReconstructed' event after the loading, to force correct sizing of the master grid.

grid.attachEvent("onSubGridCreated",function(subgrid){
  ...
  subgrid.load(data, function(){
           subgrid.callEvent("onGridReconstructed",[]);
           ...
  });
})

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
  })