<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;; overflow:auto;"/>
</td>
<td rowspan="2" style="padding-left:25" valign="top">
<a href='#' onclick='buildIt();'>Build opened tree</a> <br/>
<a href='#' onclick='buildIt2();'>Build closed tree</a>
</td>
</tr>
</table>
<script>tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_bluefolders/");
tree.enableDragAndDrop(true);
function buildIt() {
tree.deleteChildItems(0);
tree.insertNewChild(0, 1, "Root 1");
tree.insertNewChild(1, 11, "Child 1-1");
tree.insertNewChild(1, 12, "Child 1-2");
tree.insertNewChild(1, 13, "Child 1-3");
tree.insertNewChild(0, 2, "Root 2");
tree.insertNewChild(2, 21, "Child 2-1");
tree.insertNewChild(2, 22, "Child 2-2");
tree.insertNewChild(2, 23, "Child 2-3");
tree.insertNewChild(0, 3, "Root 3");
tree.insertNewChild(3, 31, "Child 3-1");
tree.insertNewChild(3, 32, "Child 3-2");
tree.insertNewChild(3, 33, "Child 3-3");
}
function buildIt2() {
tree.deleteChildItems(0);
tree.insertNewChild(0, 1, "Root 1");
tree.insertNewChild(0, 2, "Root 2");
tree.insertNewChild(0, 3, "Root 3");
tree.openOnItemAdding(false);
tree.insertNewChild(1, 11, "Child 1-1");
tree.insertNewChild(1, 12, "Child 1-2");
tree.insertNewChild(1, 13, "Child 1-3");
tree.insertNewChild(2, 21, "Child 2-1");
tree.insertNewChild(2, 22, "Child 2-2");
tree.insertNewChild(2, 23, "Child 2-3");
tree.insertNewChild(3, 31, "Child 3-1");
tree.insertNewChild(3, 32, "Child 3-2");
tree.insertNewChild(3, 33, "Child 3-3");
tree.openOnItemAdding(true);
} </script>
<br><br>
<div id="out_zone"></div>