<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxtree.js"></script>
<script  src="../../codebase/ext/dhtmlxtree_xw.js"></script>
<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/dhtmlxgrid.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
<script  src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_drag.js"></script>
 
 
   
<script>
var mygrid,
tree;
function doOnLoad() {
    mygrid = new dhtmlXGridObject('gridbox');
    tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
    tree.setSkin('dhx_skyblue');
    setTimeout("buildTree()", 10);
    setTimeout("buildGrid()", 11);
}
function buildTree() {
    tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
    tree.enableDragAndDrop(true);
    tree.loadXML("../common/tree3.xml");
    tree.setSerializationLevel(true, true);
}
function buildGrid() {
    //set grid parameters;
    mygrid.selMultiRows = true;
    mygrid.setImagePath("../../../dhtmlxGrid/codebase/imgs/");
    var flds = "Sales,Book Title,Author,Price";
    mygrid.setHeader(flds);
    mygrid.setInitWidths("50,150,120,*");
    mygrid.setColAlign("right,left,left,right");
    mygrid.setColTypes("dyn,ed,ed,price");
    mygrid.setColSorting("int,str,str,int");
    mygrid.enableDragAndDrop(true);
    //start grid;
    mygrid.init();
    mygrid.setSkin("dhx_skyblue");
    mygrid.loadXML("../common/grid.xml");
    mygrid.treeToGridElement = function(treeObj, treeNodeId, gridRowId) {
        return [0, treeObj.getItemText(treeNodeId)];
    }
    //redefine grid-to-tree drop element;
    mygrid.gridToTreeElement = function(treeObj, treeNodeId, gridRowId) {
        return this.cells(gridRowId, 1).getValue() + "/" + this.cells(gridRowId, 2).getValue();
    }
    mygrid.attachEvent("onGridReconstructed", function() {
        this.setSizes()
        });
    mygrid.rowToDragElement = function(id) {
        if (this.cells(id, 2).getValue() != "");
        return this.cells(id, 2).getValue() + "/" + this.cells(id, 1).getValue();
        return this.cells(id, 1).getValue();
    }
}</script>
<table>
    <tr>
        <td valign="top">
            <div id="treeboxbox_tree" style="width:260px; height:250px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"/>
        </td>
        <td valign="top">&nbsp;&nbsp;&nbsp;&nbsp;
        </td>
        <td valign="top">
            <div id="gridbox" width="400px" height="260px" style="background-color:white;overflow:hidden"></div>
        </td>
    </tr>
</table>