the first sub grid overflow the second sub row

Suite and Optimus Suite 5
#1

hello ,all
i have a requirement in my work , create a sub gird with open the first row,
when header is more than one line (2 row or 3 row)
When open the first sub grid , sub gird is too height , then sub grid hide the second sub row.
somebody can help me?

[code]drawGrid: function(rowsData) {
// this.hideLoadingMsg();
var self = this;
var viewType = this.viewType;
var $body = this.tableEl;
if(!rowsData){
rowsData = tableMockData[viewType];
}
var treeData = rowsData;
if (this.grid) {
this.grid.clearConfigCookie();
this.grid.clearAll();
this.grid.destructor();
this.grid = null;
$body.empty();
}
var mygrid = this.grid = new dhtmlXGridObject();

        mygrid.imgURL = dhtmlxLoader.getImgURL();
		mygrid.attachToObject($body.get(0));
        mygrid.setHeader(",strategyName");
        mygrid.setNoHeader(true);
        mygrid.setColTypes("sub_row_grid,ro");
        mygrid.setColAlign("left");
        var width = (viewType == 'snapshot')?18*100:16*100;
        mygrid.setInitWidths("30,"+width);
        mygrid.enableAutoHeight(true);
        mygrid.enableAutoWidth(true);
        mygrid.init();
        mygrid.setSkin("mr");
       
        mygrid.attachEvent("onSubGridCreated", function(subgrid, id, index, data) {
        	var config = self.getSubGridConfig();
			var cfgAttr = dhtmlxLoader.buildConfigArray(config);
			subgrid.setHeader(cfgAttr.name.join(","), null, cfgAttr.style);
			subgrid.setInitWidths(cfgAttr.width.join(","));
			subgrid.setColTypes(cfgAttr.type.join(","));
			subgrid.setColAlign(cfgAttr.align.join(","));
			subgrid.enableResizing(cfgAttr.resize.join(","));
			
            subgrid.enableAutoHeight(true);
            subgrid.enableAutoWidth(true);
            subgrid.init();
            GlobalizationUtil.setGridDateFormat(subgrid, "%Y-%m-%d");
			GlobalizationUtil.setGridNumberFormat(subgrid, cfgAttr.number, true);
            subgrid.callEvent("onGridReconstructed", []);
            subgrid.parse(data, "json");
            
            return false; // block default behavior
        });
        mygrid.attachEvent("onSubRowOpen", function(id, state) {
            var row = mygrid.getRowById(id);
            if (state) {
                row.className = "opened-row";
            } else {
                row.className = "closed-row";
            }
        });
        mygrid.parse(treeData, "json");
        this.openGridFirstItem();
    },
    openGridFirstItem: function() {
        var grid = this.grid;
        var firstRowId = grid.getRowId(0);
        var subRowColIndex = 0;
        var subRowCell = grid.cellById(firstRowId, subRowColIndex);
        if (subRowCell && subRowCell.open) {
            var value = subRowCell.getValue();
            if(value !== ""){
                subRowCell.open();
            }
        }
    },[/code]


#2

Add after subgrid.parse

setTimeout(function(){ subgrid.callEvent("onGridReconstructed", []); },1);

#3

thank you for you reply,it is good way to solve it.
but it seem have other issue ,the container height is not adjust to the new height.
i have solve it as the follow code , it may operate the DOM, If there are other better way to solve it?
var height = mygrid.objBox.clientHeight;
mygrid.entBox.style.height = height+‘px’;
mygrid.setSizes();

setTimeout(function(){ subgrid.callEvent("onGridReconstructed", []); var height = mygrid.objBox.clientHeight; mygrid.entBox.style.height = height+'px'; mygrid.setSizes(); },1);



#4

Please, try to call:

setTimeout(function(){ subgrid.callEvent("onGridReconstructed", []); mygrid.setSizes(); },1);

#5

thank you
only use setSizes() is enough

setTimeout(function(){ subgrid.callEvent("onGridReconstructed", []); mygrid.setSizes(); },1);