Start Building Professional
Web Apps Today

Grid with subGrid - problem with scrollbars - sample included

Problem:

Horizontal scroll bar appears when not needed (grid sizes should be recalculated)

Steps to reproduce:

Basing on sample file:
pro_subgrids.html

change div parameters to:

<div id="gridbox" width="100%" height="250px" style="background-color:white;"></div>

change grid script to:

mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("A,B,ed,Price,In Store,Shipping,Bestseller,Date of Publication");
    mygrid.setInitWidths("50,150,100,80,80,80,80,200")
    mygrid.enableAutoWidth(true);
    mygrid.setColAlign("right,left,left,right,center,left,center,center")
    mygrid.setColTypes("sub_row,edtxt,ed,price,ch,co,ra,ro");
    mygrid.init();
    mygrid.setSkin("modern");
    mygrid.loadXML("sgrid.xml");

After loading the page (IE 7) try to expand last row "Alice in Wonderland" unwanted horizontal bar will appear;

My suggested solution:

In file dhtmlx_excell_sub_row.js:
dhtmlXGridObject.prototype._correctMonolite=function(mode){

(...)

this.setSizes();
}

NOTICE that adding:

mygrid.loadXML("sgrid.xml",function(){
        mygrid.setSizes();
    });

OR THIS:

mygrid.attachEvent("onSubGridLoaded",function(){
     mygrid.setSizes();    
})    


WILL NOT fix the problem because this event occures before data render in grid

This is expected behaviour. Expended sub grid cannot increase width of the parent grid. You can try dhtmlxTreeGrid which has better parent-child functionality. Please see more information here http://www.dhtmlx.com/docs/products/dhtmlxTreeGrid/index.shtml

Im not understanding this way of thinking, the horizontal bar that shows up is completely unnecessary and broke view of whole grid.
Why not fix this in standard?
Did I miss something?

The top level grid renders independently from content in sub-elements. The sizes of top level grid defined by widths of columns ( provided during init ) and will not size to anything other without direct js command. 

>>  mygrid.enableAutoWidth(true);
This settings means that width of the grid will be equal to the sum of column's width, it will not force any other auto-size behavior. 

When you are using sub-grids created in default way ( without customization ) - they will have scrollbars disabled - so no any additional horizontal scrollbar will appear

This problem is not related to enableAutoWidth, if you set with to sum of cell widths then this problem occurs even when disabled auto width.

Sample file attached

Problem with not auto-adjusted width , in case of enableAutoWidth used - confirmed, for now it can be workarounded without code modification as

mygrid.enableAutoWidth(true);
mygrid.attachEvent("onSubRowOpen",function(){ //dhtmlxgrid 2.1+
     mygrid.setSizes();      
})    


>>even when disabled auto width.
With disabled auto-width the current behavior is expected one, after expanding row - height of grid data increased, so vertical scroll occurs, and to show it without grid size changes - horizontal scroll occurs as well. 

Provided solution works, and I agree with this conclusion.