DHTMLX Docs & Samples Explorer

### Initialize from HTML

To do automatic conversion:

- Add dhtmlXTree_start.js file into the page
- Set class attribute of the top div element to dhtmlxTree
- Set some attributes defining tree-specific properties of the top div element
  - setImagePath - sets path to tree's image files
  - id - name of javascript variable referred to the tree object

Initilize from list

Root Child1 Child 1-1 Child2 Bold Italic | Root Child1 Child 1-1 Child2 Bold Italic

Initialize from inline XML structure
It is possible to use standard dhtmlxTree XML structure enclosed in XMP tag inside div element which is a tree container.
For more details about dhtmlxTree XML structure see User Guide

    	<item text="Root" open="1" id="11">
    		<item text="Child1" select="1" open="1" id="12">
    			<item text="Child1-1" id="13"/>
    		</item>
    		<item text="Child2" id="14"/>
    		<item id="15" text="Text"/>
    	</item>

Initialize from HTML using script command
It is possible to convert existing html structure calling an appropriate script command. To test it press the Confirm button.

- Root
  - Child1
    - Child 1-1
  - Child2
  - Bold Italic

Source

    <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_start.js"></script>
    <script>dhtmlx.skin = "dhx_skyblue";</script>

    <div class="h3">Initilize from list</div>
    <table>
        <tr>
            <td>
    <div id="treeboxbox_tree" setImagePath="../../codebase/imgs/csh_bluebooks/" xclass="dhtmlxTree" style="width:250px; height:218px; background-color:#f5f5f5;border :1px solid Silver; ">
        <ul>
            <li>Root
            <ul>
                <li>Child1
                <ul>
                    <li>Child 1-1</li>
                </ul>
                </li>
                <li>Child2</li>
                <li><b>Bold</b> <i>Italic</i></li>
            </ul>
            </li>
        </ul></li>
    </div>
            </td>
            <td>
    <div id="treeboxbox_tree" setImagePath="../../codebase/imgs/csh_bluebooks/" class="dhtmlxTree" style="width:250px; height:218px; background-color:#f5f5f5;border :1px solid Silver;">
        <ul>
            <li>Root
            <ul>
                <li>Child1
                <ul>
                    <li>Child 1-1</li>
                </ul>
                </li>
                <li>Child2</li>
                <li><b>Bold</b> <i>Italic</i></li>
            </ul>
            </li>
        </ul></li>
    </div>
            </td>
        </tr>
    </table>

    <!--- Start --->
    <div class="h3"><strong>Initialize from inline XML structure</strong></div>
    <div class="txt">It is possible to use standard dhtmlxTree XML structure enclosed in <strong>XMP</strong>
    tag inside div element which is a tree container.<br>
    For more details about dhtmlxTree XML structure see <a href="http://www.scbr.com/docs/products/dhtmlxTree/doc/guide.html#xmlload">User Guide</a></div>
    <br>
    <div id="treeboxbox_tree2" setImagePath="../../codebase/imgs/" class="dhtmlxTree" style="width:250px; height:218px; background-color:#f5f5f5;border :1px solid Silver;;">
    <xmp container="true">
    <item text="Root" open="1" id="11">
        <item text="Child1" select="1" open="1" id="12">
            <item text="Child1-1" id="13"/>
        </item>
        <item text="Child2" id="14"/>
        <item id="15" text="Text"/>
    </item>
    </xmp>
    </div>

    <!--- Start --->
    <div class="h3"><strong>Initialize from HTML using script command</strong></div>
    <div class="txt">It is possible to convert existing html structure calling an appropriate script command. To test it press the Confirm button.</div>
    <div id="listBox" setImagePath="../../codebase/imgs/" style="width:250px; height:218px; background-color:#f5f5f5;border :1px solid Silver;">
    <ul>
        <li>Root
        <ul>
            <li>Child1
            <ul>
                <li>Child 1-1</li>
            </ul>
            </li>
            <li>Child2</li>
            <li><b>Bold</b> <i>Italic</i></li>
        </ul>
        </li>
    </ul>
    </div>
    <button onClick="var myTree = dhtmlXTreeFromHTML('listBox');">Convert</button>