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.
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.
demo.zip (125 KB)
Hmm, its also not working for me as expected in Internet Explorer.
What I’ve done is changing your sample to (only changed part)
<script>
var layoutMn = new dhtmlXLayoutObject("parentId", "3T");
var grd_s = layoutMn.cells("b").attachGrid();
grd_s.setImagePath("codebase/imgs/")
grd_s.loadXML("common/grid.xml?etc="+new Date().getTime());
var layoutSubMnB = new dhtmlXLayoutObject(layoutMn.cells("a"), "2U");
var grd_r = layoutSubMnB.cells("a").attachGrid();
grd_r.setImagePath("codebase/imgs/")
grd_r.loadXML("common/grid.xml?etc="+new Date().getTime());
layoutMn.cells("a").setWidth(250);
</script>
that is, attaching to div instead of body an using different Layout patterns.
The result:
no grid with IE9 in IE9 mode. However, it works in IE7 compatibility mode.
With newest dhtmlx 3.0, the situation flips.
It works then with IE9, but doesn’t anymore with IE7 settings (compatibility option of IE).
Unfortunatelly, i need to support both.
Any idea or hint
We have tested dhtmlxLayout/samples/04_components/02_grid.html from the latest Suite package in IE9 and IE7. It works in both.
It the problem is not solved, you may attach the complete demo