XML syntax template is the following:

      <?xml version='1.0' encoding='iso-8859-1'?>
          <tree id="0"> 
              <item text="My Computer" id="1" child="1" im0="my_cmp.gif" im1="my_cmp.gif" im2="my_cmp.gif" call="true" select="yes"> 
                  <userdata name="system">true</userdata> 
                  <item text="Floppy (A:)" id="11" child="0" im0="flop.gif" im1="flop.gif" im2="flop.gif"/> 
                  <item text="Local Disk (C:)" id="12" child="0" im0="drv.gif" im1="drv.gif" im2="drv.gif"/> 
              </item> 
              <item text="Recycle Bin" id="4" child="0" im0="recyc.gif" im1="recyc.gif" im2="recyc.gif"/>
      </tree>
 

The tags used are the following:

• <tree> tag is mandatory. It specifies the parent of loading block of data. According to this, its id parameter specifies the ID of that parent. To load root level the user needs to specify the ID used for creation of the tree object: new myObjTree(boxObject,width,height,0);
• <item> tag can contain sub-items (in order to load more than one level at once) or not. It also can contain <itemtext> tag that can be used to add some HTML to item label (attribute text should be skipped then):

      <item id="123">
          <itemtext><![CDATA[<font color="red">Label</font>]]></itemtext>
      </item>
 

Attributes for <item> tag are the following:

• Mandatory attributes:
  • text - label of the node;
  • id - id of the node;
• Optional attributes:
  • tooltip - tooltip of the node;
  • im0 - image for a node without child items (tree will get images from the path specified in setImagePath() method);
  • im1 - image for an expanded node with child items;
  • im2 - image for a collapsed node with child items;
  • aCol - colour of an item that is not selected;
  • sCol - colour of a selected item;
  • select - select a node on load (any value);
  • style - text style of a node;
  • open - show a node opened (any value);
  • call - call function on select(any value);
  • checked - check checkbox if exists (in case of 3-state checkboxes values can be 1 - checked or -1 - unsure);
  • nocheckbox - instruct component, to not render checkbox for related item, optional
  • child - specifies whether a node has child items (1) or not (0);
  • imheight - height of the icon;
  • imwidth - width of the icon;
  • topoffset - offset of the item from the node above;
  • radio - if not empty, child items of this node will have radio buttons.

To set userdata directly within XML, the user should apply <userdata> tag that has only one attribute - name, and value to specify userdata value.

In PHP script the following code should be used for the page header:

      <?php
             header("Content-type: text/xml");
             echo('<?xml version="1.0" encoding="iso-8859-1" ?>');
 

XML format template for the tree containing links:

      <tree..>
               <item ...>
                      <userdata name="myurl">http://www.google.com</userdata>
                      <item ...>
                              <userdata name="myurl">http://groups.google.com</userdata>
                      </item>
 
                </item>
 
 

The structure of JSON template is like the one of XML, where tags are transformed to objects, and attributes to properties.

      {id:0,
          item:[
              {id:1,text:"first"},
              {id:2, text:"middle",child:"1",im0:"book.gif",
                  item:[
                      {id:"21", text:"child"}
                  ]},
              {id:3,text:"last"}
          ]
      }
 

A tree item is represented with three values - id, parent_id, text.

For example:

      1,0,node 1
      2,1,node 1.1
      3,2,node 1.1.1
      4,0,node 2
 

Tree item is represented with three values as sub-arrays of the top array - id, parent_id, text.

For example:

      var treeArray = new Array(
      ["1","0","node 1"],
      ["2","1","node 1.1"],
      ["3","2","node 1.1.1"],
      ["4","0","node 2"]
      )
 

This section is devoted to a ready-made ColdFusion solution for the tree that, as it is believed by some users, simplifies usage of dhtmlxTree. For example:

      <cf_dhtmlXTree
          name="tree"
          width="250"
          height="250"
          JSPath="../" CSSPath="../"
          iconspath="gfx/"
          xmldoc="tree.xml"
          checkboxes="false"
          dragndrop="true"
          style="background-color:whitesmoke;border:1px solid blue;"
          onSelect="onNodeSelect"
          onDrop="onDropNode">
                   ...configuration xml...
      </cf_dhtmlXTree>
 

The parameters that should be indicated are as follows:

• name - [optional] name of the tree JS object to use in JavaScript; if omitted, then name will be generated automatically;
• width - [optional] width of the tree (it sets the with of the tree box, leaving the width of the tree itself by 100%);
• height - [optional] height of the tree;
• JSPath - [optional] absolute or relative path to the directory containing tree JS files; “js” directory by default;
• CSSPath - [optional] absolute or relative path to the directory containing tree CSS files; “css” directory by default;
• iconspath - [optional] absolute or relative path to the directory containing tree icon files; “img” directory by default;
• xmldoc - [mandatory for xml loading] URL of the XML file used to load levels dynamically;
• checkboxes - [optional] show checkboxes (none, twoState, threeState);
• dragndrop - [optional] activate drag-&amp;-drop (true,false);
• style - [optional] style for the tree box;
• onSelect - [optional] JavaScript function to be called on node selection;
• oncheck - [optional] JavaScript function to be called on node (un)checking;
• onDrop - [optional] JavaScript function to be called on node drop;
• im1 - [optional] default image used for child nodes;
• im2 - [optional] default image used for expanded branches;
• im3 - [optional] default image used for collapsed branches.

Please, refer to Data Loading from XML section.

Minimal possible tag syntax with on-page XML is the following:

      <cf_dhtmlXTree>
          <item text="Top node" id="t1" >
              <item text="Child node 1" id="c1" ></item>
              <item text="Child node 2" id="c2" ></item>
          </item>
      /cf_dhtmlXTree>
 

Minimal possible tag syntax with server-side XML is as follows:

      <cf_dhtmlXTree xmldoc="tree.xml">
      </cf_dhtmlXTree>
 

Here is the example of ColdFusion tag for the tree with images specified:

      <cf_dhtmlXTree
          im1="book.gif"
          im2="books_open.gif"
          im3="books_close.gif">
          <item text="Mystery " id="mystery" open="yes" >
              <item text="Lawrence Block" id="lb" >
                      <item text="All the Flowers Are Dying" id="lb_1" />
                      <item text="The Burglar on the Prowl" id="lb_2" />
                      <item text="The Plot Thickens" id="lb_3" />
                      <item text="Grifters Game" id="lb_4" />
                      <item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
              </item>
              <item text="Robert Crais" id="rc" >
                      <item text="The Forgotten Man" id="rc_1" />
                      <item text="Stalking the Angel" id="rc_2" />
                      <item text="Free Fall" id="rc_3" />
                      <item text="Sunset Express" id="rc_4" />
                      <item text="Hostage" id="rc_5" />
               </item>
              <item text="Ian Rankin" id="ir" ></item>
              <item text="James Patterson" id="jp" ></item>
              <item text="Nancy Atherton" id="na" ></item>
          </item>
      </cf_dhtmlXTree>
 

The following code snippet shows creation of the tree with Events Handlers, Checkboxes, and Drag-n-drop functionality:

      <cf_dhtmlXTree
          dragndrop="true"
          checkboxes="twoState"
          onSelect="onClick"
          onCheck="onCheck"
          onDrop="onDrag">
              <item text="Mystery " id="mystery" open="yes" >
                  <item text="Lawrence Block" id="lb" >
                              <item text="All the Flowers Are Dying" id="lb_1" />
                              <item text="The Burglar on the Prowl" id="lb_2" />
                              <item text="The Plot Thickens" id="lb_3" />
                              <item text="Grifters Game" id="lb_4" />
                              <item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
                  </item>
                  <item text="Robert Crais" id="rc" >
                              <item text="The Forgotten Man" id="rc_1" />
                              <item text="Stalking the Angel" id="rc_2" />
                              <item text="Free Fall" id="rc_3" />
                              <item text="Sunset Express" id="rc_4" />
                              <item text="Hostage" id="rc_5" />
                  </item>
                  <item text="Ian Rankin" id="ir" ></item>
                  <item text="James Patterson" id="jp" ><item>
                  <item text="Nancy Atherton" id="na" ></item>
              </item>
      </cf_dhtmlXTree>