<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxTree/codebase/dhtmlxtree.css">
<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="../../../dhtmlxTree/codebase/dhtmlxtree.js"></script>
<script  src="../../codebase/excells/dhtmlxgrid_excell_tree.js"></script>
    <style>
        .containerTableStyle { overflow : auto; position:relative; top:0; font-size : 12px;
            border : 1px solid #333;
            background: #FFF;
        }
    </style>
 
 
<div id="gridbox" style="width: 600px; height: 270px; background-color:white;"></div>
<div id="treeboxbox_tree" style="width:300px;height:200px"></div>
<script>
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
tree.setImagePath("../../../dhtmlxTree/codebase/imgs/csh_bluebooks/");
tree.setSkin("dhx_skyblue");
tree.loadXML("../common/tree.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,stree,price,ch,co,ra,ro");
    mygrid.setSubTree(tree, 2, 0);
    mygrid.init();
    mygrid.setSkin("dhx_skyblue");
    mygrid.loadXML("../common/linked_grid.xml");
});</script>