<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_ed.js"></script>
<script src="../../../dhtmlxDataProcessor/codebase/dhtmlxdataprocessor.js" type="text/javascript"></script>
 
 
<table>
    <tr>
        <td>
            <a href="#" onclick="tree.insertNewChild(tree.getSelectedItemId()||0,(new Date()).valueOf(),'New item')">Add node as child of selected (or top)</a> <br/>
            <a href="#" onclick="tree.insertNewNext(tree.getSelectedItemId(),(new Date()).valueOf(),'New item')">Add node next to selected</a> <br/>
            <a href="#" onclick="tree.deleteItem(tree.getSelectedItemId());">Delete selected row</a><br/>
        </td>
        <td></td>
    </tr>
    <tr>
        <td>
            <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
        </td>
        <td rowspan="2" style="padding-left:25" valign="top">
        <div id="logarea" style="background-color:lightgrey;height:218px;width:400px;overflow:auto; padding:3px;"></div>
        </td>
    </tr>
    <tr>
        <td>
            Single click on selected item to edit it.<br>
            Move items between levels using drag-n-drop 
        </td>
    </tr>
</table>
 
<script>
function doLog(str) {
    var log = document.getElementById("logarea");
    log.innerHTML = log.innerHTML + str + "</br>";
    log.scrollTop = log.scrollHeight;
}
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
 
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_winstyle/");
tree.enableDragAndDrop(true);
tree.enableItemEditor(true);
tree.loadXML("php/get.php");
//init dataprocessor and assign verification function;
myDataProcessor = new dataProcessor("php/update.php");
//add after-update event handler;
myDataProcessor.attachEvent("onAfterUpdate", function(nodeId, cType, newId) {
    doLog("Item was " + cType + "ed. Item id is " + newId);
});
myDataProcessor.init(tree);</script>