dhtmlxgrid:sub-grids [Skin test wiki]

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