<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/ext/dhtmlxgrid_drag.js"></script>    
<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxTree/codebase/dhtmlxtree.css">
<script  src="../../../dhtmlxTree/codebase/dhtmlxtree.js"></script>
<script  src="../../../dhtmlxTree/codebase/ext/dhtmlxtree_xw.js"></script>
 
 
 
<script>
var mygrid,
tree;
function doOnLoad() {
    mygrid = new dhtmlXGridObject('gridbox');
    tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
    setTimeout(buildTree, 10);
    setTimeout(buildGrid, 11);
}
function buildTree() {
    tree.setImagePath("../../../dhtmlxTree/codebase/imgs/csh_bluebooks/");
    tree.enableDragAndDrop(true);
    tree.setSkin("dhx_skyblue");
    tree.loadXML("../common/tree3.xml");
    tree.setOnClickHandler(getMetaData);
}
function buildGrid() {
    //set grid parameters;
    mygrid.selMultiRows = true;
    mygrid.setImagePath("../../codebase/imgs/");
    mygrid.setHeader("Sales,Book Title,Author,Price");
    mygrid.setInitWidths("50,150,120,80");
    mygrid.setColAlign("right,left,left,right");
    mygrid.setColTypes("dyn,ed,ed,price");
    mygrid.setColSorting("int,str,str,int");
    mygrid.setMultiLine(true);
    mygrid.enableDragAndDrop(true);
    //start grid;
    mygrid.init();
    mygrid.setSkin("dhx_skyblue");
    mygrid.loadXML("../common/grid.xml");
    //redefine tree-to-grid drop element;
    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.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();
    }
}
function getMetaData(id) {
    if (tree.getUserData(id, "c0")) {
        alert("Sales dynamic is: " + tree.getUserData(id, "c0") + "\nPrice is: " + (tree.getUserData(id, "c3") || "na"));
    }
}
function dnd_copyA(mode) {
    mygrid.enableMercyDrag(mode);
    tree.enableMercyDrag(mode);
}</script>    
<input type="checkbox" id="dnd_copy" onclick='dnd_copyA(this.checked)'> Copy elements when drag-n-drop between tree and grid;
<table>
    <tr>
        <td>
            <div id="treeboxbox_tree" style="width:250px; height:260px;background-color:#f5f5f5;border :1px solid Silver;overflow:auto;"/>
        </td>
        <td width="50px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td>
            <div id="gridbox" style="width:400px;height:250px;background-color:white;overflow:hidden"></div>
        </td>
    </tr>
</table>
<br>