Nested grids using rowexpander

As we all know Extjs is one of the powerful javascript UI frameworks which helps to achieve complex UI functionalities in an easy way. One such complex UI functionality is to show a grid within another grid i.e. having nested grids.

There could be various ways to show nested grids, but using rowexpander it is lot more easy to show nested grids. So today we will see how to show nested grids using rowexpander.

Firstly we will see how to add the rowexpander plugin to a grid. To add the rowexpander to a grid you have to follow two simple steps. 

Step 1 :  You have to add the rowexpander component into the parent grid plugins. So in your parent grid, you have to just add a plugins config and specify the rowexpander over there.

plugins : new Ext.grid.RowExpander(
{
   tpl: new Ext.XTemplate('<div style="overflow:auto;" class="detailData">', '', '</div>')
})

Step 2 : In order to collapse and show the nested grid a column needs to specified which holds the collapse/expand icons for rowexpander. For this you have to add the same rowexpander component into the parent grid columns.

Now that we have added rowexpander component into the parent grid, we will take a look at how to render nested/child grid with rowexpander.

If you have noticed within the rowexpander template a div is specified with the detailData class. This div acts as a place holder for the nested grid. To add the nested grid into this div we listen the 'expand' event of the row expander and render our nested grid into the detailData div body.

expand : function(ex, record, body, rowIndex) {

    if(Ext.DomQuery.select("div.x-panel-bwrap", body).length == 0) {

        var innerRowDiv = Ext.DomQuery.select("div.detailData", body)[0];

        //Prepare nested grid config over here and render it to innerRowDiv variable.

    }

}

Lets gather all the above pieces into an example.For our example we will define both parent and child grid as the Extjs EditorGridPanel.

Here we define the rowexpander component and define the the nested grid to be shown using rowexpander.

Now we define the parent grid and add the rowexpander plugin into it and into its columns.

Try the above example to get the nested grids using Extjs and you will realize how easy it is to show nested grids using rowexpander.

Note : wherever necessary use your custom variables/components like store etc. Also you can use normal Extjs grid for any parent and/or nested grid. If you are using rowexapnder from ux then replace Ext.grid.Rowexpander with Ext.ux.grid.RowExpander