<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_sb.js"></script>
<table>
<tr>
<td>
<div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div><br>
<div id="treeboxbox_tree2" 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">
<a href="#" onClick="tree.sortTree(tree.getSelectedItemId(),'ASC',1);">Reorder selected branch (ASC)</a><br>
<a href="#" onClick="tree.sortTree(tree.getSelectedItemId(),'DES',1);">Reorder selected branch (DES)</a><br>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
<script>function treeDrop(id, target, target_before, tree_source, tree_dest) {
tree_dest.sortTree(target, 'ASC', 0);
}
tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree.enableSmartXMLParsing(true);
tree.enableCheckBoxes(true);
tree.enableDragAndDrop(true);
tree.enableThreeStateCheckboxes(true);
tree.loadXML("../common/tree3_14_selection_sorting_navigation.xml");
tree.setDropHandler(treeDrop);
tree2 = new dhtmlXTreeObject("treeboxbox_tree2", "100%", "100%", 0);
tree2.setSkin('dhx_skyblue');
tree2.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree2.enableSmartXMLParsing(true);
tree2.enableCheckBoxes(true);
tree2.enableDragAndDrop(true);
tree2.enableThreeStateCheckboxes(true);
tree2.loadXML("../common/tree3_14_selection_sorting_navigation.xml");
tree2.setDropHandler(treeDrop);
</script>