2 and more grid like columns in grid

Is there possibility to create 2 and more grid like columns in grid?

If yes, logically I cannot understand how to do it.

docs.dhtmlx.com/grid__columns_ty … likecolumn

I cannot even link 1 subgrid.

function loadObjInfo (eType,eId) {

 var cls_id = grid1.cells(grid1.getSelectedId(),2).getValue();
 
 subgrid = tabMatObjViz.attachGrid();
 subgrid.setImagePath("./skins/skyblue/imgs/");
 subgrid.setHeader("Name,UID,Total count");
 subgrid.setInitWidths("100,100,100")
 subgrid.enableAutoHeight(true);
 subgrid.setColTypes("ro,ro,ro");
 subgrid.init();
 subgrid.loadXML("gridobjinfo.php?str_id=" + eId + "&operation=1");
 
 
 gridObjInfo = tabMatObjInfo.attachGrid();
 gridObjInfo.setImagePath("./skins/skyblue/imgs/");
 gridObjInfo.setHeader("id,Наименование,Значение,Указатель,Значение указателя,Носитель,str_id,cls_id");
 gridObjInfo.setInitWidths("30,*,*,*,*,*,*,*");
 gridObjInfo.setColTypes("ro,ro,ro,ro,ro,grid,ro,ro");
 gridObjInfo.enableMathEditing(true);
 gridObjInfo.enableMathSerialization(true);
 gridObjInfo.setSkin("dhx_skyblue");
 gridObjInfo.enableDragAndDrop(true);
 gridObjInfo.setSubGrid(subgrid,5,0);
 
 gridObjInfo.init();
 
 gridObjInfo.loadXML("gridobjinfo.php?str_id=" + eId + "&operation=1");
 var dp_gridObjInfo = new dataProcessor("gridobjinfo.php?str_id=" + eId + "&operation=2"); 
 dp_gridObjInfo.init(gridObjInfo);   

}

Please help

Please, refer to the setSubGrid() method documentation:
docs.dhtmlx.com/api__dhtmlxgrid_setsubgrid.html

mygrid.setSubGrid(subgrid,sInd,tInd);
sInd - index of the column in your main grid with the “subgrid”

so you may use something like this:

sub = new dhtmlXGridObject('gridbox_sub1'); ... sub.load(url,function(){ sub2 = new dhtmlXGridObject('gridbox_sub2'); ... sub.load(url2,function(){ mygrid = new dhtmlXGridObject('gridbox'); ... mygrid.setColTypes("grid,grid,ed,ed"); mygrid.setSubGrid(sub,0,0); mygrid.setSubGrid(sub2,1,0); ... }) })

Refering to your code:

subgrid = tabMatObjViz.attachGrid(); //please, try to attache your subgrid to an external container, that can be hidden

subgrid.loadXML(“gridobjinfo.php?str_id=” + eId + “&operation=1”);
gridObjInfo = tabMatObjInfo.attachGrid();
// please, try to init your main grid only when the subgrid is already loaded

It works!

But I have another problem. My parent grid is attached to dhtmlx tab that attached to dhtmlx window. And I attached subgrid to div outside of dhtmlx window. Due to this subgrid appears far from parent grid. What is the way to appear subgrid normally?

I tried to attach div to tab that attached to window:

tabMatObjInfo.attachHTMLString(’

’);

and then:

subgrid = new dhtmlXGridObject(‘subgr’);

The result is:

Uncaught TypeError: Cannot read property ‘data’ of null

I have decided:

tabMatObjInfo.attachHTMLString(’

’);

then

subgrid = new dhtmlXGridObject(‘gridbox_sub’);

gridObjInfo = new dhtmlXGridObject(‘gridbox’);

it works

the problem still exists that subgrid appears too far from cell

I did it

the way:

$div = $(’

’).appendTo(‘body’);
$div.attr(‘id’, test’);

#test {

z-index:9999;
width:300px;
height:150px;
background-color:white;

}

thank you