dhtmlxtree:initialization_of_dhtmlxtree [Skin test wiki]

- Initialization of dhtmlxTree

Index

dhtmlxtree

Initialization of dhtmlxTree

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 method setImagePath():

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

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

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 on page which is placed in the <body> tag:

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

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

    <script>
        var tree = new dhtmlXTreeObject("treeBox","100%","100%",0);
    </script>

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

This type of initialization includes two sub-types:

Initialization from an HTML list;
Initialization from inline XML.

The user can create the tree based on an HTML list or inline XML. In both casesб the list or XML should be placed into the DIV element that will be act as a container for the tree. XML should also be included into XMP tag. It should be noted that any of 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 - presupposes 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 from user's side:

Add dhtmlxtree_start.js file into the page;
Choose 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 a JS variable referenced 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 into the page;
Choose 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 referenced 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 initialization of 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

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

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

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 using loadXML() without parameters, the system will load the URL specified in setXMLAutoLoading() method.

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

    <script>
        var xmlSate = tree.getXMLState(); // returns true if XML is being loaded at the moment
    </script>

See here for XML Syntax Template.

Data Loading from JSON

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

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

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

See here for JSON Format Template.

Data Loading from CSV

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

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

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

See here for CSV Format Template.

Data Loading from JS Array

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

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

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

See here for JS Array Format Template.

Data Transfer Mode

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

    <script>
        tree.setDataMode(mode);
    </script>

The following mode variants are available:

JSON - sets JSON data transfer mode;
XML - sets XML data transfer mode;
CSV - sets CSV data transfer mode.