DHTMLX Docs & Samples Explorer

onSubGridCreated/onSubGridLoaded Events

Required library edition: This method requires Professional Edition of the DHTMLX library

onSubGridCreated event occurs when the creation of a sub-grid was initiated; onSubGridLoaded event occurs after data from the sub-grid is loaded and parsed.

These events pass the following parameters:

  • sub_grid_obj - sub-grid object;
  • rId - id of the related row;
  • rInd - index of the related row.
        grid.attachEvent("onSubGridCreated", function(sub_grid_obj,rId,rInd){});
        grid.attachEvent("onSubGridLoaded", function(sub_grid_obj,rId,rInd){});
 

The 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);
            subgrid.selectCell(someid,0);
         })
 

The events can be used to completely change the way the sub-grid is loaded. For example, 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 a sub-grid can be loaded from an 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
         })