Sub-Grid in a DataGrid

The described feature is available in the Webix DataGrid Pro edition.

Besides simple subrows you can also render subviews in a datagrid. Below you can see the details on how to insert a sub-grid into DataGrid.

Sub-Grid in a DataGrid

To add a subview into DataGrid, use the subview property. In the case of datagrid, you should specify a DataGrid configuration with all the necessary parameters as value of this property.

In the columns configuration of the DataGrid you should specify the template property with the value like {common.subrow()} #title#, where:

{common.subrow()} - renders ”+” and ”-” icons to open/close subviews
#title# - defines the data that should be rendered in the columns next to the icon

Subgrid with static data

webix.grid({
    // subgrid configuration
  subview:{
    view:"datatable",
    columns:[
      { id:"Outlet", sort:"string", fillspace:true },
      { id:"January" },
      { id:"February" },
      { id:"March" }
    ],
    data:[
      { Outlet:"North", January:100, February:230, March:180 },
      { Outlet:"West", January:70, February:120, March:160 },
    ],
     },
    // datagrid configuration
  columns:[
    { id:"title",  header:"Title", sort:"string",
      template:"{common.subrow()} #title#", width:220 },
    { id:"year",  header:"Year",   width:100, sort:"int"},
    { id:"votes",  header:"Votes", width:100,  sort:"int"}
  ],
  data:[
    { id:1, title:"The Shawshank Redemption", year:1994, votes:678790 },
    // more data items
  ]
});

Related sample: Sub-Grid in a DataGrid

It is also possible to specify a subview as a function, with two parameters:

obj - an item object for which a subview will be rendered
target - an HTML element where a subview will be rendered

For example:

webix.grid({
    // subgrid configuration
  subview: function(obj, target) {
    return webix.grid({
      ...configuration
    }, target);
  },
    // datagrid configuration
  columns:[
    // columns configs
  ],
  data:[
    // data items
  ]
});

Loading Data into a Subview

To populate a subview with data, you can either:

specify a static dataset in the datagrid configuration (as shown above);
use the load or parse methods to populate the subgrid with “item-related” data.

Using inline data

To load inline data into the sub-grid when a subview is created, use the onSubViewCreate event with two parameters:

view - the created subview;
item - the item for which a subgrid is created.

In the event handler apply the parse method and pass the data item property with sub-grid’s data into it:

webix.grid({
  subview:{
      view:"datatable",
        columns:[
           { id:"Outlet", sort:"string", fillspace:true },
           { id:"January" },
           { id:"February" },
           { id:"March" }
        ],
    },
  on:{
      onSubViewCreate:function(view, item){
          view.parse(item.outlets);
        }
  },
  columns:[
        // master datagridcolumns
  ],
  data:[
    { id:1, title:"The Shawshank Redemption", year:1994, votes:678790, outlets:[
      { Outlet:"North", January:100, February:230, March:180 },
      { Outlet:"West", January:70, February:120, March:160 },
    ]},
    // more data items
  ]
});

Loading data from an external source

To load data from an external source, use the load method that takes the path to the necessary file or script that will return data for a subgrid.

webix.grid({
  subview:{
    view:"datatable",
    columns:[
      // subgrid columns
    ],
  },
  on:{
    onSubViewCreate:function(view, item){
      view.load("../../../15_datatable/16_dyn_loading/data/data_dyn.php?for="
      + item.id);
    }
  },
  columns:[
      // master datagrid columns
  ],
  data:[
    { id:1, title:"The Shawshank Redemption", year:1994, votes:678790 },
  ]
})