DHTMLX Docs & Samples Explorer

Tree linked to grid







Source
<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="../../../dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script  src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>    
<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue.css">
<script  src="../../../dhtmlxForm/codebase/dhtmlxform.js"></script>    
<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxTree/codebase/dhtmlxtree.css">
<script  src="../../../dhtmlxTree/codebase/dhtmlxtree.js"></script>
 
<script type="text/javascript" src="../../codebase/datastore.js"></script>
 
 
<div id="gridbox" style="width:600px; height:270px; background-color:white;"></div>
<br><hr><br>
<div id="treebox" style="width:270px; height:270px; background-color:white;"></div>
<br><hr><br>
 
<script>
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../../../../../codebase/imgs/");
mygrid.setSkin("dhx_skyblue");
mygrid.setHeader("Count,Name");
mygrid.setColumnIds("Maintainer,Version");
mygrid.init();
mygrid.load("../common/data/grid.xml");
tree = new dhtmlXTreeObject("treebox", "100%", "100%", 0);
tree.setImagePath("../../../dhtmlxTree/codebase/imgs/csh_bluebooks/");
tree.dataFeed("../common/data/tree.php");
tree.bind(mygrid, function(data, filter) {
    filter.name = data.Version;
});
</script>