detailView sizing/resize issues

[melane]

Hi,


I am using the detailview for the datagrid, and I observed that if I call expandRow programmatically, the detail view does not take all the width available (seems like only 75 %). However, if I expand the row manually by clicking on the expand button, then the details view uses the full width.

You can check this behaviour here : http://jsfiddle.net/melane/SjMQy/
When you run it, the first row is expanded programatically and does not use all the space. Try to collapse and expand the row manually and the size is good.

I also observed that the resizing of the main datagrid does not impact the subgrid (detail view). How can we trigger the resize of this subgrid so that it always use the full width available, using parent grid dimensions.

Thanks,

Melanie

[stworthy]

Please try the updated example http://jsfiddle.net/SjMQy/7/

[melane]

Thanks, this seems to be working. I can not figure out.
So basically, when you build the grid with the detail view you added the following to make this work:

detailFormatter:function(index,row){ 
        return '<div class="ddv" id="ddv-' + index + '" style="padding:5px 0"></div>'; 
    }, 
    onResize:function(){
$('.ddv').datagrid('resize');
},

[melane]

Hi,

Actually, I have a problem with your solution, it works fine with Chrome, but somehow it is not working with IE 8..
Also it gives me an error in both browsers (not sure it is important or not):
SCRIPT5007: Unable to get property 'options' of undefined or null reference
jquery.easyui.min.js, line 6839 character 1
Do you know what is this error, and also why the resize works on Chrome but not on IE? Unfortunately the ends users are using IE..

Thanks,

Melanie

[melane]

Ok,

I figure out the problem, somehow the $(.ddv).datagrid('resize') is not working because there are some div in the page with this class and which are not datagrid object, as they are not expanded (I am guessing this is the issue, after checking the breakpoints in IE).
As a workaround, I keep an array of expanded rows, so that in the datagrid resize, I explicitly retrieve the id of the expanded datagrid and call resize on them, so it looks like this:
 for(var i=0;i<expandedRows.length;i++){
                   var subgrid = '#ddv-'+expandedRows;
                   $(subgrid).datagrid('resize');
   }

And now it works and I do not see the error msg.
It would be nice if we could have a method 'getExpandedRows'  in a future version of the datagrid.

Thanks

Melanie