Initializae from HTML

Sample: dhtmlxTree

Initializae from HTML

dhtmlxTree main page

To do automatic initialization:

dhtmlXTree_start.js should be included into page
top DIV element should have class attribuyte set to dhtmlxTree
some attributes of top DIV element will define tree specific properties
- setImagePath - set path to images used by tree
- id - name of javascript variable referenced to tree object

Initilize from list

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

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

 
    <div 
        class="dhtmlxTree" 
        id="treeboxbox_tree" 
        setImagePath="../imgs/" 
        style="width:250px; height:218px;overflow:auto;">
        
        <ul>
            <li>Root</li>
            <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>

Initialize from inline XML structure

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

 
    <div id="treeboxbox_tree2" setImagePath="../imgs/" class="dhtmlxTree" >
    <xmp>
        <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>

Initialize from HTML using script command

It is possible to convert existing html structure with script command

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

 
    //1st parameter is id of DIV element to initialize tree from.
    var myTree = dhtmlXTreeFromHTML('listBox');