DHTMLX Docs & Samples Explorer

Grid linked to grid

You can use one grid as editor for another grid. Just try to edit column with authors.

Source
<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxgrid.js"></script>
<script  src="../../codebase/dhtmlxgridcell.js"></script>    
<script  src="../../codebase/excells/dhtmlxgrid_excell_grid.js"></script>
<script>
dhtmlx.skin = "dhx_skyblue";
</script> <div id="gridbox" style="width:600px; height:270px; background-color:white;"></div> <div id="gridbox_sub" style="width:300px; height:150px; background-color:white;"></div> <script>
subgrid = new dhtmlXGridObject('gridbox_sub');
subgrid.setImagePath("../../codebase/imgs/");
subgrid.setHeader("Name,UID,Total count");
subgrid.setInitWidths("100,100,100");
subgrid.enableAutoHeight(true);
subgrid.setColTypes("ro,ro,ro");
subgrid.init();
subgrid.loadXML("../common/authors.xml", function() {
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Sales, Book Title, Author,Price,In Store,Shipping,Bestseller,Date of Publication");
    mygrid.setInitWidths("50,150,100,80,80,80,80,200");
    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.init();
    mygrid.loadXML("../common/grid_authors.xml");
});
</script>