How to initialize and use tabs in jQuery grid:

Tabs can be turned on for any grid, pivot grid, tree grid etc by defining tabModel.tabs in the main grid. Main grid controls other tabs i.e, creates, removes and updates grids in other tabs and also maintains the Tabs UI. Main grid remains in memory even if the tab corresponding to main grid is closed.

tabModel option and Tab() object are the main tools in the hands of a programmer to manipulate tabs.

Grid initialization options for different tabs

Grid initialization options except colModel and dataModel defined for main grid are deep cloned and used by grids in other tabs. Which means that other options of the main grid i.e., toolbar definition, tabModel, etc 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 individual grids.

In this example, one tab contains source data for the pivot while another one displays the pivot view.

//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
    }
]

Update options after initialization

for individual tabs

• Callbacks and events: Options for individual grids can be updated in their respective callbacks by getting reference to grid instance from this variable e.g.,

  this.option( key, val);

• Outside: Options can be updated from outside the workbook by getting instance of main grid, then get Tab instance, then get reference to tab of interest, get grid instance from tab and then call option method on it e.g.,

  var gridMain = $(".selector");
  var Tab = gridMain.Tab();
  var grid = Tab.grid(2);
  if( grid ){
      grid.option( key, val);        
  }
  

collectively for all tabs

Options can be collectively updated for all tab grids by Tab API

gridMain.Tab( 'option', key, value );