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.

In order to use dhtmlxTree as a separate component, you need to include its source files on the page. There are two of them:

<head>
    <link rel="stylesheet" type="text/css" href="codebase/dhtmlxtree.css">
    <script src="codebase/dhtmlxtree.js"></script>
</head>

If you use dhtmlxTree as a part of "dhtmlxSuite" package, you need to have 2 files included:

<link rel="stylesheet" type="text/css" href="../codebase/dhtmlx.css">
<script src="../codebase/dhtmlx.js" type="text/javascript"></script>

dhtmlxtree.js/.css files are part of dhtmlx.js/.css, so there is no need to include them separately.

Setting Image Path

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

tree.setImagesPath("[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:

Related sample: Changing iconsets

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).

Related sample: Object constructor

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:

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.

<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>

Related sample: Initialize from HTML

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:

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>

Related sample: Initialization from xml

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

To load menu data from XML file use the load method as in:

myTree.load(xmlFile,afterCall,"xml"); // loading from a file

The passed parameters are the following:

url - (string) url to the XML file
call - (function) after loading callback function, optional, can be omitted
type - (string) type of data

Related sample: Initialization from xml

To load menu data from an XML string, use the method parse as follows:

myTree.parse(xmlString,"xml"); // loading from an XML string

The method takes the following parameters:

data - (string|object) the data to load
type - (string) data type

To enable dynamic loading from XML make use of the 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.

Related sample: Autoloading from XML

Data Loading from JSON

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

load - to load data from a file

myTree.load(jsonFile,afterCall,"json");

url - (string) url to the JSON file
call - (function) after loading callback function, optional, can be omitted
type - (string) type of data, XML by default

parse - to load data from a JSON object

myTree.parse(jsonObject,"json");

data - (string|object) the data to load
type - (string) data type

You can see JSON Format Template here.

Related sample: Autoloading from JSON

Data Loading from CSV

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

load - to load data from a file

myTree.load(csvFile,afterCall,"csv");

url - (string) url to the CSV file
call - (function) after loading callback function, optional, can be omitted
type - (string) type of data, XML by default

parse - to load data from a CSV string

myTree.parse(csvString,"csv");

data - (string|object) the data to load
type - (string) data type

You can see CSV Format Template here.

Related sample: Loading from CSV

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:

load - to load data from a file

myTree.load(jsarrayFile, afterCall,"jsarray");

url - (string) url to the JSArray file
call - (function) after loading callback function, optional, can be omitted
type - (string) type of data, XML by default

parse - to load data from a JSArray

myTree.parse(JSArray, "jsarray");

data - (string|object) the data to load
type - (string) data type

You can see JS Array Format Template here.

Related sample: Loading from JSArray

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.