Start Building Professional
Web Apps Today

Nested Layouts

I have a layout that in which I have nested another layout. I wrote a new layout as the base layout and am using 3J as the nested layout in cell b of the base layout. The custom layout I wrote is a derivative of 5H, but only has two columns, with column "a" having 1 row and column "b" having 3 rows. The custom layout seems to work just fine and I have tested this problem on 5H and have the same issue.

Here is the initialization code:

layoutMn = new dhtmlXLayoutObject(document.body, "4L", "dhx_black");
layoutSubMnB = new dhtmlXLayoutObject(layoutMn.cells("b"), "3J");

The problem I am encountering is I am not able to attach a grid, set sizes, etc. on the nested grid, although I have successfully attached a fairly complex accordion and several other grids to other cells in the parent layout. Here is an example of the code:


//grd_r = new dhtmlXGridObject("grid_r_container"); (this works fine when used without layout, or attaching as object in parent layout cell with div)

However, adding a child layout in cell B of parent layout and attaching a grid to cell a of the child -- this does not work.
grd_r = layoutSubMnB.cells("a").attachGrid();


Any help or guidance would be greatly appreciated.

All works fine on our side. Here is a demo.

I looked at your file and this does seem pretty straightforward.  However, once I attach a nested layout I am not able to attach the grid.  Below is the code.  I can attach a grid to the parent layout, but not the nested layout. 

<script type="text/javascript" src="Grid/codebase/dhtmlxcommon.js"></script>

<script type="text/javascript" src="Layout/codebase/dhtmlxlayout.js"></script>

<script type="text/javascript" src="Grid/codebase/dhtmlxgrid.js"></script>

<script type="text/javascript" src="Grid/codebase/dhtmlxgridcell.js"></script>

<script type="text/javascript" src="Tabbar/codebase/dhtmlxtabbar.js"></script>

<script type="text/javascript" src="Window/codebase/dhtmlxwindows.js"></script>

<script type="text/javascript" src="Window/codebase/ext/dhtmlxwindows_wmn.js"></script>

<script type="text/javascript" src="Menu/codebase/dhtmlxmenu.js"></script>

<script type="text/javascript" src="Accordian/codebase/dhtmlxaccordion.js"></script>

 

<link rel="Stylesheet" type="text/css" href="Layout/codebase/skins/dhtmlxlayout_dhx_black.css" />

<link rel="Stylesheet" type="text/css" href="Layout/codebase/dhtmlxlayout.css" />

<link rel="Stylesheet" type="text/css" href="Window/codebase/dhtmlxwindows.css" />

<link rel="Stylesheet" type="text/css" href="Menu/codebase/skins/dhtmlxmenu_dhx_black.css"/>

<link rel="Stylesheet" type="text/css" href= "Accordian/codebase/skins/dhtmlxaccordion_dhx_black.css"/>

<link rel="Stylesheet" type="text/css" href="Grid/codebase/dhtmlxgrid.css" />

<link rel="Stylesheet" type="text/css" href= "styles/dhtmlxgrid_custom_pgn_bricks.css"/>

<link rel="Stylesheet" type="text/css" href="Tabbar/codebase/dhtmlxtabbar.css"/>

var layoutMn = new dhtmlXLayoutObject(document.body, "4L", "dhx_black"); //4L is custom, same as provided 4C

grd_s = layoutMn.cells("c").attachGrid();

grd_s.setImagePath("./Grid/codebase/imgs/");

grd_s.setHeader("img:[./images/showDetail_1.gif],img:[./images/compareResults_1.gif],Scenario,#cspan,End Time,Demand,#cspan,Capacity,#cspan,Processor Qty,#cspan,#cspan,Core Qty,#cspan,#cspan,Utilize Avg,Present Value Cost,#cspan,#cspan,#cspan,#cspan");

grd_s.attachHeader("#rspan,#rspan,ID,Name,#rspan,Start,End,Start,End,Start,End,Max,Start,End,Max,#rspan,Proc,Lic,MF,Total,TPY");

grd_s.setInitWidths("40,40,37,*,50,40,40,45,45,35,35,50,35,35,50,47,61,61,61,61,61");

grd_s.setColTypes("ra,ra,ro,txt,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro,ro");

grd_s.setColAlign("center,center,center,left,center,right,right,right,right,right,right,right,right,right,right,center,right,right,right,right,right");

grd_s.setSkin("ravello");

grd_s.setColSorting("int,int,int,str,int,na,na,na,na,na,na,int,na,na,int,na,int,int,int,int,int");

//grd_s.enablePaging(true, 4, 10, "grid_s_pagingArea", true);

//grd_s.setPagingSkin("bricks");

grd_s.attachEvent("onCheckbox", doOnRadioButtonChange);

grd_s.init();

var layoutSubMnB = new dhtmlXLayoutObject(layoutMn.cells("b"), "3J");

var grd_r = layoutSubMnB.cells("a").attachGrid();

grd_r.setImagePath("./Grid/codebase/imgs/");

grd_r.setHeader("ID,Action,Server Qty,Server Signature,#cspan,#cspan");

grd_r.attachHeader("#rspan,#rspan,#rspan,Capacity,Processor,Core");

grd_r.setInitWidthsP("10,*,15,22,14,14");

grd_r.setColTypes("ro,ro,ro,ro,ro,ro");

grd_r.setColAlign("center,left,right,right,right,right");

grd_r.setSkin("ravello");

grd_r.init();

layoutMn.cells("a").setWidth(250);

It still works fine on our side.
Here is a demo with grid and nested layout and grid in nested layout + screenshot.