View Full Version : Selecting a row in Inner Grid selects a row having same row-index in outer-grid also

5 Aug 2013, 2:42 AM

I'd managed to add a grid inside a tree grid through the following approach:

Inside Tree-Grid Sub-class:

columns: [{
xtype: 'actioncolumn',
items: [
iconCls: 'img',
handler: function(view, rowidx, colidx, item, evt, record) {
if (record.getDepth() < 2) {
} else {

showgrid: function(rowidx) {
var node = this.view.getNode(rowidx);
var domElement = this.view.getNode(node),
rowEl = Ext.DomHelper.insertAfter(domElement, '<tr><td colspan="2"></td></tr>', true);
var colEl = rowEl.down('td');
Ext.create('Ext.grid.Panel', {
renderTo: colEl,
store: 'Attributes',

I notice that clicking on a row in any of the inner grid selects the same row in inner grid and also (an unexpected behaviour) selects a row in the outer tree-grid (parent). The row selected in the outer grid is that with the same index as the row selected in the inner grid.

For example,

If the inner grid is shown in 5th row, and I select second row in inner grid, the action caused second row in inner grid and second row in outer grid to be selected.

Is there any way to address this issue?

I know that embedding components in grids may not be fully supported by ExtJS, but we had to accomplish this as per the requirements.

Also, one would expect either the row containing the inner-grid or no row to be selected (in the outer-grid) when I click on the components contained inside grid-rows, instead of resulting in some other unrelated row getting selected in outer-grid.


Gary Schlosberg
7 Aug 2013, 3:31 PM
Yes, you are correct that nesting grids is not supported out of the box. Not sure if this (https://github.com/mitchellsimoens/Ux.grid.plugin.AssociationRowExpander) link would be useful to you, but it contains an example that provides a nested grid when you expand a grid node: https://github.com/mitchellsimoens/Ux.grid.plugin.AssociationRowExpander.