resize layout

Im using dhtmlxlayout 3.5. I try to resize my layout to the size of the attached grid like this.

grid = dhtmlxlayout.cells(“a”).attachGrid();

//load data to grid

dhtmlxlayout.cells(“a”).setHeight(grid.ent.offsetHeight);

This somehow doesnt work. However, if i manually set height for each parent node of the grid then it works.

var parent = $(‘.objbox’).parent();
while (parent) {
parent.height(iGrid.entBox.offsetHeight + 30);
if (parent.attr(“id”) == “div_container”)
break;
parent = parent.parent();
}

Is there any better way to do this?

oh i also edit dhtmlxlayout.js as below:

if (sep != null) {
	        // allow resizing
	        var set = this._findDockCellsHor(sep[0]);
	        var anyExpT = set[0];
	        var anyExpB = set[1];
	        if (anyExpT == null || anyExpB == null) return;
	        var sumSize = parseInt(this.polyObj[anyExpT[0]].style.height) + parseInt(this.polyObj[anyExpB[0]].style.height);
	        if (height < this._minHeight) { height = this._minHeight; }
	        else if (height > sumSize - this._minHeight) { height = sumSize - this._minHeight; }
	        var height2 = sumSize - height;
	        //
	        var height1 = parseInt(this.polyObj[anyExpT[0]].style.height);
	        height2 = parseInt(this.polyObj[anyExpB[0]].style.height);
	        for (var q = 0; q < anyExpT.length; q++) {
	            this._setH(this.polyObj[anyExpT[q]], (sep[1] == "top" ? height : height1));
	            this.polyObj[anyExpT[q]].updateNestedObjects();
	        }
	        for (var q = 0; q < anyExpB.length; q++) {
	            this._setH(this.polyObj[anyExpB[q]], (sep[1] == "bottom" ? height : height2));
	            this.polyObj[anyExpB[q]].updateNestedObjects();
	        }

what i really dont understand is this line:

if (height > sumSize - this._minHeight) { height = sumSize - this._minHeight; }

because height is greater than the sumSize and height is the target one that we want to set for the cell, why do you reset target height to its sumSize which indeed is incorrect one.

We need more information about the structure of your grid. If it small and at it doesn’t vary of rows, it can be done rather simply. If you grid is enough big, there are a lot of the rows with quantity varies, it can be some problems. Some manipulations with grid in a cell and fixed height can cause some problems with resize.
Please, provide us an example of your grid structure.

Hi Darya,

Below is my grid initialization. My grid cotains a subgrid inside each row. My grid has around 200 rows and 5-10 sub row for each main row

           grid.setImagePath("dhtmlx/dhtmlxgrid/imgs/"); 
            grid.setSkin("dhx_skyblue");
            grid.setHeader("&nbsp;,&nbsp;,A, B,C,D, E,F,G");
            grid.setColTypes("sub_row_grid,ro,ro,ro,ro,ro,ro,ro,ro");
            grid.setColSorting("str,str,str,str,str,str,str");
            grid.setColAlign("center,center,left,left,left,right,right,center");
            grid.enableAutoWidth(true);
            //grid.enableAutoHeigth(true); <= if i enable this, i wont see the overflow part, and there is no scrollbar 

            grid.attachEvent("onSubGridCreated", function (subgrid, id, index) {
                subgrid.setHeader("&nbsp;,AA,BB,CC,DD,EE,FF");
                subgrid.setColTypes("ro,ro,ro,ro,ro,ro,ro");
                subgrid.setColSorting("str,str,,,sortFloat,sortFloat,,,,,,,,,,,,,,,,,");
                subgrid.enableAutoHeight(true);
                subgrid.enableAutoWidth(true);
                 subgrid.init();
                // block default behavior
                return false;
            })
         
            grid.init();

There is no ready desigion for layout.

Hi

common logic should be:

  1. - attach layout here
  2. doc.getById(“layout”).style.height = x - set parent height
  3. layout.setSizes() - ajust layout to parent
  4. depending on layout pattern and autosize - maybe layout.cells(id).setHeight needed
  5. something like