DHTMLX Docs & Samples Explorer

Building tree with script

To build a tree with opened or closed parent nodes click on an appropriate action link.

Build opened tree
Build closed tree


THIS PAGE CONTAINS SAMPLE FUNCTIONALITY OF PROFESSIONAL EDITION FOR DEMONSTRATION PURPOSE ONLY.
UNAUTHORIZED USE IS PROHIBITED. PLEASE CONTACT SALES@DHTMLX.COM TO OBTAIN A LEGAL COPY OF PROFESSIONAL EDITION.
Source
<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>