Documentation

Initializing Tree

dhtmlxTree can be initialized on page using one of the following initialization schemes:

  • Object-based initialization;
  • Initialization from HTML.

Complete the following steps for any type of dhtmlxTree's initialization:

  • Download the dhtmlxTree package from the server and place it in a folder;
  • Create an HTML file;
  • Place the full paths to dhtmlxTree's CSS and JS files into the header of the created HTML file.
<head>  
  <link rel="stylesheet" type="text/css" href="[full path to this file]/dhtmlxtree.css">
  <script src="[full path to this file]/dhtmlxcommon.js"></script>
  <script src="[full path to this file]/dhtmlxtree.js"></script>   
</head>

Setting Image Path

Full path to tree's images can be set in dhtmlxTree with the help of the method setImagePath():

tree.setImagePath("[full path to this category]/codebase/imgs/");

The above mentioned method should be used after creation of new dhtmlXTreeObject, but before any of data loading methods.

The following predefined icon sets are available in Tree:

default
scbrblue
yellowbooks
bluefolders
books
vista
winstyle
bluebooks

Object-Based Initialization

The user needs to create an HTML container where dhtmlxTree will be placed later. In this example the container is a <div> element placed in the <body> tag:

<div id="treeBox" style="width:200;height:200"></div>

The next step is the creation of a new dhtmlXTreeObject and placing it after the <div> element (container) that we've just created:

var tree = new dhtmlXTreeObject("treeBox","100%","100%",0);

The parameters passed to the constructor are the following:

  • Object to attach the tree to (should be loaded before the constructor is called);
  • Width of the tree;
  • Height of the tree;
  • Identifier of the tree root level (super root).

Initialization from HTML

In case of HTML initialization, drag-n-drop functionality doesn't work in Tree.

This type of initialization includes two sub-types:

  • Initialization from an HTML list;
  • Initialization from inline XML.

The user can create a tree based either on an HTML list or an inline XML. In both cases the list or XML should be placed into the DIV element that will act as a container for the tree. XML should also be included into XMP tag. It should be noted that any tree methods starting with "set" or "enable" can be used as attributes of this DIV element to set/enable different tree properties.

Conversion

The following two types of conversion (of HTML data into the tree) are available:

  • Automatic conversion - implies setting dhtmlxTree class for the top div element;
  • Script conversion - calling dhtmlXTreeFromHTML() command with id of the div element to convert as the first argument.

Initialization from an HTML list

This type of initialization presupposes the following actions on user's part:

  • Add dhtmlxtree_start.js file into the page;
  • Choose the type of conversion to use;
  • Set some attributes defining tree-specific properties of the top div element:
    • setImagePath - sets the path to tree's image files;
    • id - name of a JS variable that refers to the tree object;
  • Use simple HTML list tags.
<head>
    ...
    <script src="[full path to this file]/dhtmlxtree_start.js"></script>
</head>
 
 
<div class="dhtmlxTree" // for automatic conversion
    id="treeboxbox_tree"
    setImagePath="[full path to this category]/imgs/"
    style="width:250px; height:218px;overflow:auto;">
    <ul>
        <li>Root
            <ul>
                <li>Child1
                    <ul>
                        <li>Child 1-1</li>
                    </ul>
                <li>Child2</li>
                <li><b>Bold</b> <i>Italic</i></li>
            </ul>
        </li>
    </ul>
</div>
<script>
    var myTree = dhtmlXTreeFromHTML("treeboxbox_tree"); // for script conversion
</script>

Initialization from Inline XML

Initialization of this kind allows the user to apply standard dhtmlxTree's XML structure enclosed into XMP tag inside the div element (the tree container). The sequence of actions is as follows:

  • Add dhtmlxtree_start.js file on the page;
  • Choose the type of conversion to use;
  • Set some attributes defining tree-specific properties of the top div element:
    • setImagePath - sets path to tree's image files;
    • id - name of JS variable which refers to tree object;
  • Apply XML structure in <xmp> tag.
<div id="treeboxbox_tree"
    setImagePath="[full path to this category]/imgs/"
    class="dhtmlxTree"> // for automatic conversion 
<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>

Data Loading

The next step of initializing dhtmlxTree component is Data Loading. The user can choose one of the following data loading possibilities:

  • XML;
  • JSON;
  • CSV;
  • JS array.

Data Loading from XML

The loadXML() and loadXMLString() methods load menu data from XML:

tree.loadXML(file, function); // loading from a file
tree.loadXMLString(xmlString, function); // loading from an XML string

These methods have the following parameters:

  • file/xmlString - full path to the XML file/string containing tree data;
  • function (optional parameter) - function that will be called when data is loaded (if specified).

It should be noted that when loadXML() is used without parameters, the system will load the URL specified in setXMLAutoLoading() method.

The getXMLState() method should be used to get the current state of XML loading:

var xmlState = tree.getXMLState(); // returns true if XML is being loaded at the moment

You can see XML Syntax Template here.

Data Loading from JSON

To load the tree from JSON, the user needs to have a JSON object or file and load it using the following methods:

tree.loadJSONObject(json_object, function); // loading from a script object
tree.loadJSON(file, function); // loading from a file

Both methods have the following parameters:

  • json_object/file - object or file containing tree data;
  • function (optional parameter) - function that will be called when data is loaded (if specified).

You can see JSON Format Template here.

Data Loading from CSV

This type of loading tree data implies that the user has CSV represented as a string or a file. There are two methods that can be used in this case:

tree.loadCSV(file, function); // loading from a file
tree.loadCSVString(csvstring, function); // loading from a string

Both methods have the following parameters:

  • file/csvstring - file or string containing tree data;
  • function (optional parameter) - function that will be called when data is loaded (if specified).

You can see CSV Format Template here.

Data Loading from JS Array

The tree can be loaded from a JS Array. The array presented as an object or as a file should be specified in the following methods:

tree.loadJSArrayFile(file, function); // loading from a file
tree.loadJSArray(array, function); // loading from an array object

Both methods have the following parameters:

  • file/array - file or array object containing tree data;
  • function (optional parameter) - function that will be called when data is loaded (if specified).

You can see JS Array Format Template here.

Data Transfer Mode

The user can set default data transfer mode in the following way:

tree.setDataMode(mode);

The following mode variants are available:

  • JSON - sets JSON data transfer mode;
  • XML - sets XML data transfer mode;
  • CSV - sets CSV data transfer mode.
Back to top