<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">
<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_pgn_bricks.css">
<script  src="../../../dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script  src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_srnd.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script  src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_pgn.js"></script>
<script  src="../../codebase/dhtmlxtreegrid.js"></script>
 
<script>
var mygrid;
function doOnLoad() {
    mygrid = new dhtmlXGridObject('gridbox');
    mygrid.imgURL = "../../../dhtmlxGrid/codebase/imgs/icons_books/";
    mygrid.setHeader("Column A,Column B,Column C");
    mygrid.setInitWidths("*,100,80");
    mygrid.setColAlign("left,left,left");
    mygrid.setColTypes("tree,ed,txt");
    mygrid.setColSorting("str,str,str");
    mygrid.enablePaging(true, 10, 5, "recinfoArea");
    mygrid.setPagingSkin("bricks");
    mygrid.init();
    mygrid.setSkin("dhx_skyblue");
    mygrid.loadXML("php/tree_grid.php");
}</script>
 
<table width="500" cellpadding="0" cellspacing="0">
    <tr>
        <td>
            <div id="gridbox" width="100%" height="200px" style="background-color:white;overflow:hidden"></div>
        </td>
    </tr>
    <tr>
        <td id="recinfoArea"></td>
    </tr>
</table>