<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");
myDataProcessor = new dataProcessor("php/update.php");
myDataProcessor.attachEvent("onAfterUpdate", function(nodeId, cType, newId) {
doLog("Item was " + cType + "ed. Item id is " + newId);
});
myDataProcessor.init(tree);
</script>