Grid-like column

Hello,

I have a Layout with the attached Grid

<style>
html, body {
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
  }
</style>
<script>
var myLayout, myGrid, subGrid;
//LAYOUT OBJECT
myLayout = new dhtmlXLayoutObject({
	parent: document.body,
	pattern: "1C",
	cells: [{id: "a", text: "dhtmlxGrid"}]
});
</script>

I would like to set a ‘Grid-like column’ in my Grid Object, but I don’t have an idea how to initialize the grid to be an editor for a cell (in this case is ‘subGrid’ Object)

<script>
//GRID OBJECT
subGrid = //  ??????????? (this my problem)
subGrid.setImagePath("../../../codebase/imgs/");
subGrid.setHeader("Name,UID,Total count");
subGrid.setInitWidths("100,120,80");
subGrid.enableAutoHeight(true);
subGrid.setColTypes("ro,ro,ro");
subGrid.init();
subGrid.load("../../dhtmlxGrid/common/authors.xml",function(){
	myGrid = myLayout.cells("a").attachGrid();
	myGrid.setImagePath("../../../codebase/imgs/");
	myGrid.setHeader("Sales, Book Title, Author,Price,In Store,Shipping,Bestseller,Date of Publication");
	myGrid.setInitWidths("70,150,100,80,80,80,80,100");
	myGrid.setColAlign("right,left,left,right,center,left,center,center");
	myGrid.setColTypes("dyn,ed,grid,price,ch,co,ra,ro");
	myGrid.setSubGrid(subGrid,2,0);
	myGrid.enableAutoWidth(true);
	myGrid.enableAutoHeight(true);
	myGrid.init();
	myGrid.load("../../dhtmlxGrid/common/grid_authors.xml");
});		
</script>

Any suggestions ?

You need to create a specific div container for your subgrid.
It won’t be displayed on your page until the edit of your grid won’t be open.
It is not available to place your subgrid in a layout cell or something similar.

Hi, Sematik

As your suggestion,

<style>
html, body {
   width: 100%;
   height: 100%;
   margin: 0px;
   padding: 0px;
   overflow: hidden;
  }
</style>
<script>
var myLayout, myGrid, subGrid;
//LAYOUT OBJECT
myLayout = new dhtmlXLayoutObject({
   parent: document.body,
   pattern: "1C",
   cells: [{id: "a", text: "dhtmlxGrid"}]
});
//CONTAINER OF SUBGRID
var div = document.createElement("div");
div.id = "gridbox_sub";
div.style.width = "300px";
div.style.height = "150px";
document.body.appendChild(div);

//GRID OBJECT
subGrid = new dhtmlXGridObject('gridbox_sub');
subGrid.setImagePath("../../../codebase/imgs/");
subGrid.setHeader("Name,UID,Total count");
subGrid.setInitWidths("100,120,80");
subGrid.enableAutoHeight(true);
subGrid.setColTypes("ro,ro,ro");
subGrid.init();
subGrid.load("../../dhtmlxGrid/common/authors.xml",function(){
   myGrid = myLayout.cells("a").attachGrid();
   myGrid.setImagePath("../../../codebase/imgs/");
   myGrid.setHeader("Sales, Book Title, Author,Price,In Store,Shipping,Bestseller,Date of Publication");
   myGrid.setInitWidths("70,150,100,80,80,80,80,100");
   myGrid.setColAlign("right,left,left,right,center,left,center,center");
   myGrid.setColTypes("dyn,ed,grid,price,ch,co,ra,ro");
   myGrid.setSubGrid(subGrid,2,0);
   myGrid.enableAutoWidth(true);
   myGrid.enableAutoHeight(true);
   myGrid.init();
   myGrid.load("../../dhtmlxGrid/common/grid_authors.xml");
});    
</script>

Then, It works

Many thank’s