Tree lines are tiny lines that visually “connect” elements of the tree. These lines can be enabled|disabled from script easily:

    <script>
        tree.enableTreeLines(true|false); // true by default
    </script>
 

”+” and ”-” icons indicate whether a parent node is closed or opened. setImageArrays() is used to set these images:

    <script>
        tree.setImageArrays(arrayName,image1,image2,image3,image4,image5);
    </script>
 

The parameters for this method are as follows:

• arrayName - name of array: plus, minus;
• image1 - line crossed image (+);
• image2 - image with top line (г);
• image3 - image with bottom line (L);
• image4 - image without line ( );
• image5 - single root image (-).

There is a simple way of showing/hiding +/- signs of a certain item:

    <script>
        tree.showItemSign(itemId,mode);
    </script>
 

The following parameters should be indicated:

• itemId - id of the item which +/- icon will be shown/hidden;
• mode(true|false) - true stands for showing the icon, false means hiding it.

This method works only for individual items, not for the entire tree.

If the user wants to specify the icons for locked state of tree items, they should be indicated before any of the data loading methods:

    <script>
        ...
        tree.setLockedIcons("lock.gif","lock.gif","lock.gif");
        tree.loadXML("tree.xml")
    </script>
 

The parameters of setLockedIcons() method indicate paths to the icons that will be used for locked nodes:

• m0 - icon for a locked leaf;
• im1 - icon for a closed branch;
• im2 - icon for an opened branch.

It should be noted that the tree will get images for its nodes from the path the user specified in setImagePath() method.

But there are also other ways available for setting custom images for nodes in the tree. The difference between these two methods lies in the way the user adds item to the tree:

• JavaScript way - using arguments of insertNewChild() or insertNewNext() methods:

    <script>
        var im0 = "doc.gif"; // the icon for a leaf node
        var im1 = "opened.gif"; // the icon for an expanded parent node
        var im2 = "closed.gif"; // the icon for a collapsed parent node
 
 
 
        tree.insertNewItem(0,1,"New Node 1",0,im0,im1,im2);
        tree.insertNewNext(1,2,"New Node 2",0,"txt.gif","opened.gif","closed.gif");
    </script>
 

• JavaScript way - using setItemImage() and setItemImage2() methods:

The first method for setting an image for an item should be written this way:

    <script>
        tree.setItemImage(itemId,image1,image2);
    </script>
 

The parameters are as follows:

• itemId - id of the item in question;
• image1 - image for the leaf item or image for the collapsed parent item (if the third parameter is indicated);
• image2 - image for the expanded parent item.

The second setting image method is the following:

    <script>
        tree.setItemImage2(itemId,image1,image2, image3);
    </script>
 

The parameters are as follows:

• itemId - id of the item in question;
• image1 - image for the leaf item;
• image2 - image for the collapsed parent item;
• image3 - image for the expanded parent item.

• XML way - using parameters of <item> tag:

    <?xml version='1.0' encoding='iso-8859-1'>
        <tree id="0">
            <item text="My Computer" id="1" child="1" im0="doc.gif" im1="my_opened.gif" im2="my_closed.gif">
        </tree>
 

See XML Format Template.

Item's image can be got with the help of getItemImage() method:

    <script>
        var image = tree.getItemImage(itemId,imageInd,fullPath);
    </script>
 

In order to get items image, the user should indicate:

• itemId - id of the item which image should be got;
• imageInd - index of the image (0 - leaf image, 1 - closed parent node image, 2 - open parent node image);
• fullPath (true|false) - indicates whether the method returns full path to the image (true), or just name of the image file (false).

Images are enabled in dhtmlxTree by default. To disable images, the user should call the following method:

    <script>
        tree.enableTreeImages(false); // true to enable
    </script>
 

There is a simple way of setting default item's images in dhtmlxTree:

    <script>
        tree.setStdImages(image1,image2,image3);
    </script>
 

This method should be called before XML loading takes place. It is useful when a lot of similar images are going to be used in the tree, it is better to use this method once rather than specify these images every time for every item.

The parameters that the user should specify are the following:

• image1 - image for a leaf node;
• image2 - image for a closed parent node;
• image3 - image for an opened parent node.

dhtmlxTree is a highly customizable component. You can use different icon sets for trees simply by changing image path:

    <script>
        tree.setImagePath("[full path to this folder]/codebase/images/"); // the default icons set
            // or
        tree.setImagePath("[full path to this folder]/codebase/images/csh_scbrblue/");
            // or
        tree.setImagePath("[full path to this folder]/codebase/images/csh_yellowbooks/");
            // or
        ...
    </script>
 

Setting icon's size is quite simple with setIconSize() method. The default size of tree icons is 18×18 px.

    <script>
        tree.setIconSize(newWidth,newHeight,itemId);
    </script>
 

The parameters the user should specify are:

• newWidth - new width for the icon;
• newHeight- new height for the icon;
• itemId - the item new sizes will be applied to (optional parameter).

If the last parameter is not indicated, new sizes will be applied to all icons in the tree.

There is a simple method used to make all images in the tree clickable:

    <script>
        tree.enableActiveImages(true|fasle); // enabled by default
    </script>
 

There is a method that is responsible for allowing the user to drag items not only by text, but also by their images. This functionality is enabled by default

    <script>
        tree.enableImageDrag(true|false);
    </script>
 

There is a special method to change the way of images rendering in IE. It also helps to solve the problem of images caching in IE:

    <script>
        tree.enableIEImageFix(true|false); // disabled by default
    </script>
 

dhtmlxTree support bot LTR and RTL text directions. LTR is set by default in the tree. The user can set the text direction to RTL like this:

    <script>
        tree.enableRTL(true); // false to disable
    </script>
 

To set text direction to LTR again, use false in the above mentioned method.

By default tree nodes' labels can contain only one text line. However, in some situations it can be useful to make them multiline. There is a special method for this in dhtmlxTree. It is recommended to turn tree lines off for better appearance:

    <script>
        tree.enableTreeLines(false); 
        tree.enableMultiLineItems(true|false|width);
    </script>
 

This method should be called before loading tree data takes place. The parameter of this method can be one of these options:

• true - the multiline is enabled;
• false - the multiline is disabled;
• width - the multiline is enabled and set in pixels (for example, “50px”).

There is the possibility to enable|disable text signs [+] and [-] instead of corresponding icons. This can be done in the following way:

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

Setting this method to true equals enabling text signs for the tree, while false means disabling them.

There is also the possibility to create a plain one-level tree. The steps the user should take for this are quite simple:

• Add the following style in the html file where the tree will be created:

    <style>
         #treeboxbox_tree.standartTreeImage img{
             width:0px;
         }
    </style>
 

• Create a div element on page and write the following script lines:

    <div id="treeboxbox_tree" style="width:200;height:200"></div>
    <script>
        tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
        tree.setImagePath("[full path to this folder]/imgs/");
        tree.enableTreeImages("false"); // disable tree images
        tree.enableTreeLines("false"); // disable tree lines
        tree.loadXML(file);
    </script>
 

The user can set loading text for a tree item. This text will appear on item loading instead of its original text, and will be replaced by the original text when loading is done:

    <script>
        tree.enableLoadingItem(text);
    </script>
 

The default loading text set in dhtmlxTree is “Loading…”.

The user may use escaped HTML in text attribute of item tag to include some HTML into node's label, or he can use nested <itemtext> tag with CDATA for the same:

    <?xml version="1.0">
        <tree id="0">
          <item id="1" text="&amp;lt; img src='some.gif' &amp;gt;" /> // using escaped HTML in text attribute
        </tree>
        <tree id="0">
          <item id="1">
             <itemtext><![CDATA <img src='some.gif'> ]]></itemtext> // using nested <itemtext> tag with CDATA
          </item>
        </tree>
 

The user can set individual style for any item in the tree in the following way:

    <script>
        tree.setItemStyle(itemId,style_string);
    </script>
 

The parameters here are responsible for:

• itemId - id of the item;
• style_string - valid CSS string.