Problem Statement

Ext JS grid does not have a direct plugin or component to have grid inside a grid.  This functionality will be needed when we want to show the parent and child entity data at a time.     For example : We want to show the order line items for an order under each order in an order grid. We can achieve this requirement with the help of Row Expander grid plugin, but still the grid functionality like mouseover, click, column sort, etc would not work.
In this article we will understand  the root cause for the issues and learn how to address it.

Getting Started

First get below things in place

• Ext JS application with Ext JS 5.0 or later

Add Child Grid to Parent Grid Row with the help of RowExpander Plugin as explained below:

• Add RowExpander Plugin to parent grid
• Add expandbody event handler for the parent grid
• In expandbody create a child grid instance and render it to the expanded row

With this code you will able to develop a grid as shown below:

You can find a new plugin RowExpanderGrid extended from RowExpander plugin, which can help you add child grid to the row, more easily. It is part of the shared article code.

Now you will notice that on mouseover or click events there are lots of console errors and grid does not behave as it should. Let us see what is causing this issue.

First let us understand how the Grid inside a Grid is rendered using RowExpander plugin. The child Grid is rendered as the child of Grid Row.

Below is the HTML element structure of NestedGrid.

Because of this structure when mouse events fire on the child grid elements are handled by parent gridview followed by child gridview.

Ext.view.Table is the class responsible for rendering the grid view.processItemEvent is the mouse event handler for the GridView item events., Iitems here are Column Headers , Rows and cells   Now, when a mouse events fire  on child grid (i.e when the user performs any action with mouse like hovering on the child grid row element,clicking on the child grid row etc..), the processItemEvent handler of the parent grid view  is executed first followed by child gridview This handler finds the respective record from the target element and carry out the necessary operations. But, as we know, the element belongs to child grid and scope of function is parent grid. Due to this mismatch the columns and grid records are not found and it throws errors., So, the child grid processItemEvent handler is not being executed.

Let us see how to solve the issue

As discussed, the parent grid processItemEvent handler is being called., Instead, child grid processItemEvent  should be called. Our solution should avoid execution of processItemEvent handler of the parent grid. And by doing that, automatically, the child grid processItemEvent handler will be executed.

Following are the solution steps:

1. Override Ext.view.Table class -, add a function which will figure out if the event target belongs to the same grid view or not and return the boolean value true indicating the event target belongs to the this gridview and  false indicating  event target does not belong to this gridview, as shown below
   
   checkTheContextIsParentGridView: function(e){ var target = Ext.get(e.target); var parentGridView = target.up('.x-grid-view'); if (this.getId() != parentGridView.getId()) { return false; } else { return true; } }

   1 2 3 4 5 6 7 8 9 10

   checkTheContextIsParentGridView: function(e){            var target = Ext.get(e.target);            var parentGridView = target.up('.x-grid-view');              if (this.getId() != parentGridView.getId()) {                   return false;            } else {                   return true;            }     }

2. Override processItemEvent function of Ext.view.Table Class – call the new function, that we implemented in the previous step, by passing the EventObject, call parent function if event target belong same gridview else discard the execution, as shown below.
   
   processItemEvent: function(record, row, rowIndex, e) {        if (e.target && !this.checkTheContextIsParentGridView(e)) {            return false;        } else {            return this.callParent([record, row, rowIndex, e]);        }    }

   1 2 3 4 5 6 7 8 9

   processItemEvent: function(record, row, rowIndex, e) {          if (e.target && !this.checkTheContextIsParentGridView(e)) {            return false;        } else {            return this.callParent([record, row, rowIndex, e]);        }      }

   
   With this enhancement you will be able to perform all the operation on child grid, including the roweditor for the child grid as shown below:

You may try the code on Sencha Fiddle and let me know how did it go!

Summary

In this article we learned how to solve the issues when we add a grid inside a grid using rowexpander plugin.

References

Ext JS Docs

Ext JS Grid RowExpander plugin doc