Problem with RowExpander.js

[vikaskapoor]

Hi I am using RowExpander.js in my grid.
But it is not working.
I am getting body is undefined
Refer the snapshot...

While debugging i found that in RowExpander.js, in expandRow method, body is coming as undefined.


expandRow : function(row){
if(typeof row == 'number'){
row = this.grid.view.getRow(row);
}
var record = this.grid.store.getAt(row.rowIndex);
var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);
if(this.beforeExpand(record, body, row.rowIndex)){
this.state[record.id] = true;
Ext.fly(row).replaceClass('x-grid3-row-collapsed', 'x-grid3-row-expanded');
this.fireEvent('expand', this, record, body, row.rowIndex);
}
},but on doing refresh on the page it is working fine and now the body comes as [object HTMLDivElement]

[ice5nake]

I am having the same problem. Did you ever figure out a solution? I noticed this problem seems to occur when another grid is loaded into the DOM before the one using the row expander.

I also noticed that when the code fails it's because the x-grid3-row-body is never rendered.

Row Expander does not seem to be responsible for rendering this div. The enableRowBody config of Ext.grid.GridView appears to be responsible for rendering this div.

This should at least be a place to start.

[ice5nake]

The only way I could fix this behaviour was to set enableRowBody to true for any grid that could be loaded into the DOM before the one were I actually used it.

Not ideal but I have it working.

[vshingal]

I searched a lot on the forums and could not find a solution to this. Finally I found a solution on the APEX development sight.

You need to change Line 206:


var body = Ext.DomQuery.selectNode('tr:nth(2) div.x-grid3-row-body', row);

to


var body = Ext.DomQuery.selectNode('tr:nth-child(2) div.x-grid3-row-body', row);

After this it should work fine for you.

Thanks