In this example, one tab contains source data for the pivot while another one displays the pivot view.
Tabs can be turned on with any grid, pivot grid, tree grid etc by defining tabModel.tabs in the main grid.
In this example data grid is the main grid.
//initially define 2 tabs.
tabs: [{
name: 'data',
noClose: true,
gridOptions: {
//we define it in tab.gridOptions because we don't want it in other grids.
render: function () {
this.one('lazyProgress', function () {
//activate pivot grid after availability of data in main grid.
this.Tab().activate(1);
})
}
}
},
{
name: 'pivot',
noClose: true,
gridOptions: gridOptionsForPivotGrid
}]
Grid initialization options except colModel and dataModel defined for main grid are deep cloned and used by grids in other tabs.
Which means that some parts of the main grid i.e., toolbar definition are used across multiple tabs. Any option which we don't
want to be copied over to other tabs can be defined in tab.gridOptions of main tab.
Any grid initialization options defined in tab.gridOptions of other tabs are combined with grid initialization options of main tab
and then used to initialize the other tabs.