dhtmlxTree can be initialized on page using one of the following initialization schemes:
Complete the following steps for any type of dhtmlxTree's initialization:
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:
dhtmlxtree.js/.css files are part of dhtmlx.js/.css, so there is no need to include them separately.
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:
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:
In case of HTML initialization, drag-n-drop functionality doesn't work in Tree.
This type of initialization includes two sub-types:
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.
The following two types of conversion (of HTML data into the tree) are available:
This type of initialization presupposes the following actions on user's part:
<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 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:
<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>
The next step of initializing dhtmlxTree component is Data Loading. The user can choose one of the following data loading possibilities:
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:
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:
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.
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:
You can see JSON Format Template here.
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:
You can see CSV Format Template here.
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:
You can see JS Array Format Template here.
The user can set default data transfer mode in the following way:
The following mode variants are available: