<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxtree.js"></script>
 
 
<table>
    <tr>
        <td>
            <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver; "/>
        </td>
        <td rowspan="2" style="padding-left:25" valign="top">
            <div id="logarea" style="background-color:lightgrey;height:218px;width:400px; padding:3px; overflow:auto;"></div>
        </td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    </tr>
</table>
    <li>Selected node ID will be passed to function specified as argument for setDefaultAction(funcObj)</li>
    <li>Dropped node ID and new parent node ID  will be passed to function specified as argument for setDragFunction(funcObj)</li>
    <li>node ID will be passed to the function specified as argument for setOpenAction(aFunc)</li>
    <li>node ID will be passed to the function specified as argument for setDblClickAction(aFunc)</li>
<script>
function doLog(str) {
    var log = document.getElementById("logarea");
    log.innerHTML = log.innerHTML + str + "<br/>";
    log.scrollTop = log.scrollHeight;
}
function tonclick(id) {
    doLog("Item " + tree.getItemText(id) + " was selected");
};
function tondblclick(id) {
    doLog("Item " + tree.getItemText(id) + " was doubleclicked");
};
function tondrag(id, id2) {
    return confirm("Do you want to move node " + tree.getItemText(id) + " to item " + tree.getItemText(id2) + "?");
};
function tonopen(id, mode) {
    return confirm("Do you want to " + (mode > 0 ? "close": "open") + " node " + tree.getItemText(id) + "?");
};
function toncheck(id, state) {
    doLog("Item " + tree.getItemText(id) + " was " + ((state) ? "checked": "unchecked"));
};
 
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
 
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree.enableCheckBoxes(1);
tree.enableDragAndDrop(1);
tree.attachEvent("onOpenEnd", function(nodeId, event) {
    doLog("An id of open item is " + nodeId);
});
tree.setOnClickHandler(tonclick);
tree.setOnCheckHandler(toncheck);
tree.setOnDblClickHandler(tondblclick);
 
tree.loadXML("../common/tree3.xml", function() {
    tree.setOnOpenHandler(tonopen);
    tree.setDragHandler(tondrag);
});</script>