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:
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:
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:
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:
<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>
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:
The second setting image method is the following:
<script> tree.setItemImage2(itemId,image1,image2, image3); </script>
The parameters are as follows:
<?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:
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:
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:
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:
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:
<style> #treeboxbox_tree.standartTreeImage img{ width:0px; } </style>
<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 (this tag is supported only in PRO edition):
<?xml version="1.0"> <tree id="0"> <item id="1" text="&lt; img src='some.gif' &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: