[Sommaire] [Imprimer]

   1  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   2  
   3  <html>
   4  <head>
   5      <title>DHTML Tree guide and samples</title>
   6  </head>
   7  
   8  <body>
   9  <style>
  10      body {font-size:14px;line-height:18px;}
  11      .{font-family:arial;}
  12      h2 {cursor:pointer;font-size:20px;margin:30px 0px 40px 5px;line-height:10px}
  13      h3 {cursor:pointer;font-weight:normal;color:black;text-decoration:underline;line-height:10px}
  14      h4 {cursor:pointer;font-weight:normal;color:black;text-decoration:underline;line-height:10px}
  15      a h4{
  16          color:blue;
  17          font-weight:bold;
  18      }
  19      .op {cursor:pointer;}
  20      div.block {margin-left:5px;}
  21      xmp {color:green;font-size:12px;margin:0px;font-family:courier;background-color:#e6e6fa;padding:2px}
  22      li {margin-top:2px;}
  23  </style>
  24  <h2><a href="http://www.scbr.com/docs/products/dhtmlxTree/index.shtml" target="_top" title="Visit javascript tree home page">dhtmlXTree</a> Guide and Samples</h2>
  25  <div class="block">
  26  <!---  --->
  27      <a name="mf"><h3 >Main features</h3
  28      ></a><div style="display:show" class="block">
  29          <li>Multibrowser/Multiplatform support </li>
  30          <li>Full controll with JavaScript</li>
  31          <li>Dynamic loading</li>
  32          <li>XML support</li>
  33          <li>Dynamic rendering (Smart XML parsing) for big trees</li>
  34          <li>drag-&-drop (within one tree, between trees, between frames) </li>
  35          <li>checkboxes (two/three states)</li> 
  36          <li>customizable icons (with javascript or xml) </li>
  37          <li>context menu (integration with dhtmlxMenu)</li>
  38          <li>user data for nodes</li>
  39          <li>multi-line tree items</li>
  40          <li>high stability</li>
  41          <li>Macromedia Cold Fusion support</li>
  42          <li>JSP support</li>
  43          <li>ASP.NET support</li>
  44      </div>
  45      
  46      <a name="browsers"><h3 >Supported browsers</h3
  47      ></a><div style="display:show" class="block">
  48          <li>IE 5.x and above</li>
  49          <li>Mac OS X Safari</li>
  50          <li>Mozilla 1.4 and above</li>
  51          <li>FireFox 0.9 and above</li>
  52          <li>Opera (Xml loading depends on browser version)</li>
  53      </div>
  54  
  55      <h3 >Working with dhtmlXTree</h3
  56      ><div style="display:show" class="block">
  57  <!--- Initialize object on page --->
  58          <a name="init"><h4 >Initialize object on page</h4
  59          ></a><div class="block">
  60  <XMP>
  61  <div id="treeBox" style="width:200;height:200"></div>
  62  <script>
  63      tree=new dhtmlXTreeObject(document.getElementById('treeBox'),"100%","100%",0);
  64      tree.setImagePath("gfx/");
  65      tree.enableCheckBoxes(false);
  66      tree.enableDragAndDrop(true);
  67  </script>
  68  </XMP>
  69          Parameters passed to the constructor are:
  70              <li>object to attach tree to (should be loaded before calling constructor)</li>
  71              <li>width of the tree</li>
  72              <li>height of the tree</li>
  73              <li>identifier of level parent to tree root level (superroot)</li><br>
  74          Specify Additional parameters of the tree:
  75              <li>setImagePath(url) - method specifies the path to the folder with tree icons</li>
  76              <li>enableCheckBoxes(mode) - enable/disable checkboxes in tree (checkboxes appear by default)</li>
  77              <li>enableDragAndDrop(mode) - enable/disable drag-n-drop in tree</li>
  78          </div>
  79  <!--- Set Additional init parameters --->    
  80          <a name="handlers"><h4 >Set Event Handlers</h4
  81          ></a><div class="block">
  82  <XMP>
  83  <div id="treeBox" style="width:200;height:200"></div>
  84  <script>
  85      tree=new dhtmlXTreeObject(document.getElementById('treeBox'),"100%","100%",0);
  86      ...
  87      tree.setOnClickHandler(onNodeSelect);//set function object to call on node select
  88      //see other available event handlers in API documentation
  89  	function onNodeSelect(nodeId){
  90          ...
  91      }
  92  </script>
  93  </XMP>    
  94          In most cases functions specified inside event handlers get some values with the arguments. For details about passed arguments please refer to <a href="alpha.html">API documentation</a>.<br>
  95          </div>
  96  <!--- Adding nodes with Script --->
  97          <a name="scriptadd"><h4 >Adding nodes with Script</h4
  98          ></a><div class="block">
  99  <XMP>
 100  <script>
 101      tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
 102      ...
 103      tree.insertNewChild(0,1,"New Node 1",0,0,0,0,"SELECT,CALL,TOP,CHILD,CHECKED");
 104      tree.insertNewNext(1,2,"New Node 2",0,0,0,0,"CHILD,CHECKED");
 105  </script>
 106  </XMP>    
 107          <li>0s passed to the function for arguments 4-7 (function to call on select, images) mean use default values for them</li>
 108          <li>Last argument is a comma delimited string of following possible value (upper case only):</li>
 109              <li type="circle">SELECT - move selection to this node after inserting</li>
 110              <li type="circle">CALL - call function on select</li>
 111              <li type="circle">TOP - add node to the top position </li>
 112              <li type="circle">CHILD - node has children</li>
 113              <li type="circle">CHECKED - checkbox is checked (if exists)</li>
 114          </div>
 115  <!--- Using XML --->
 116          <a name="xmlload"><h4 >Loading data with XML</h4
 117          ></a><div class="block">
 118  <XMP>
 119  <script>
 120      tree=new dhtmlXTreeObject('treeBox',"100%","100%",0);
 121      tree.setXMLAutoLoading("http://127.0.0.1/xml/tree.xml");
 122      tree.loadXML("http://127.0.0.1/xml/tree.xml");//load root level from xml
 123  </script>
 124  </XMP>    
 125          <li>ID of opened node (as id url parameter) will be added to URL specified in  initXMLAutoLoading(url) during the call</li>
 126          <li>No additional ID is added to the url specified in loadXML(url) method during the call</li>
 127          <li>Using loadXML() without parameters you load url specified in initXMLAutoLoading(url) method</li>
 128  <XMP>
 129  XML Syntax:
 130  <?xml version='1.0' encoding='iso-8859-1'?>
 131  <tree id="0">
 132      <item text="My Computer" id="1" child="1" im0="my_cmp.gif" im1="my_cmp.gif" im2="my_cmp.gif" call="true" select="yes">
 133          <userdata name="system">true</userdata>
 134          <item text="Floppy (A:)" id="11" child="0"  im0="flop.gif" im1="flop.gif" im2="flop.gif"/>
 135          <item text="Local Disk (C:)" id="12" child="0"  im0="drv.gif" im1="drv.gif" im2="drv.gif"/>
 136      </item>
 137      <item text="Recycle Bin" id="4" child="0" im0="recyc.gif" im1="recyc.gif" im2="recyc.gif"/>
 138  </tree>
 139  </XMP>    
 140  <br>
 141  In <strong>PHP</strong> script use the following code for page header:<br>
 142  <xmp>
 143  <?php
 144      if ( stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml") ) {
 145            header("Content-type: application/xhtml+xml"); } else {
 146            header("Content-type: text/xml");
 147      }
 148      echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n"); 
 149  ?>
 150  </xmp>
 151  <br>
 152          <strong>&lt;tree&gt;</strong> node is mandatory. It specifies the parent of loading block of data. According to this its id parameter specifies the ID oth that parent. 
 153          To load root level you need to specify the ID you used when created tree object: new myObjTree(boxObject,width,height,<b>0</b>) <br>
 154          
 155          <strong>&lt;item&gt;</strong> can contain subitems (in order to load more than one level at once) or not.<br>
 156          Mandatory parameters for this tag are:<br>
 157              <li>text - label of the node</li>
 158              <li>id - id of the node</li>
 159          Optional parameters for this tag are:<br>
 160              <li>tooltip - tooltip for the node</li>
 161              <li>im0 - image for node without children (tree will get images from the path specified in setImagePath(url) method)</li>
 162              <li>im1 - image for opened node with children</li>
 163              <li>im2 - image for closed node with children</li>
 164              <li>acolor - colour of not selected item</li>
 165              <li>scolor - colour of selected item</li>
 166              <!--- <li>top - </li> --->
 167              <li>select - select node on load (any value)</li>
 168              <li>open - show node opened (any value)</li>
 169              <li>call - call function on select(any value)</li>
 170              <li>checked - check checkbox if exists(any value)</li>
 171              <li>child - spec. if node has children (1) or not (0)</li><br>
 172              <li>imheight - height of the icon</li>
 173              <li>imwidth - width of the icon</li>
 174  <br><br>
 175  To set <strong>userdata</strong> directly within XML use <strong>&lt;userdata&gt;</strong><br>
 176          It has just one parameter: <br>
 177              <li>name</li><br>
 178          and value to specify userdata value            
 179          </div>
 180  <!--- Setting custom icons to nodes --->
 181          <a name="iconscust"><h4 >Setting custom icons to nodes</h4
 182          ></a><div class="block">
 183              There are two ways to set custom icons for the node. And it depends on the way you add items.<br>
 184              <em>Important:</em> tree will get images for the nodes from the path specified in setImagePath(url) method.<br><br>
 185              
 186              Javascript way. Using arguments of insertNewChild(...) or insertNewNext(...) methods:
 187  <XMP>
 188  <script>
 189      var im0 = "doc.gif";//icon to show if node contains no children
 190      var im1 = "opened.gif";//if node contains children and opened
 191      var im2 = "closed.gif";//if node contains children and closed
 192      tree.insertNewItem(0,1,"New Node 1",0,im0,im1,im2);
 193      tree.insertNewNext(1,2,"New Node 2",0,"txt.gif","opened.gif","closed.gif");
 194  </script>
 195  </XMP>    
 196              XML way. Using parameters of &lt;item&gt; tag:
 197  <XMP>
 198  <?xml version='1.0' encoding='iso-8859-1'?>
 199  <tree id="0">
 200      <item text="My Computer" id="1" child="1" im0="doc.gif" im1="my_opened.gif" im2="my_closed.gif">
 201  </tree>
 202  </XMP>    
 203              <li>im0 - image for node without children (tree will get images from the path specified in setImagePath(url) method)</li>
 204              <li>im1 - image for opened node with children</li>
 205              <li>im2 - image for closed node with children</li>
 206          </div>
 207  <!--- Dynamical loading --->        
 208          <a name="dyntree"><h4 >Building dynamic tree</h4
 209          ></a><div class="block">
 210          If your tree should contain large amount of nodes (or you simply do not want to waist time loading hidden nodes), it would be better to load them on demand, not at once. 
 211          For this purpose we made the tree to load levels dynamically using XML.  <br>
 212          See chapter <a href="#xmlload">"Loading data with XML"</a><br>
 213          or for more details <a href="kb/dyn_loading.html">"Dynamical Loading in dhtmlxTree v.1.x"</a> article from our Knowledge Base. 
 214          </div>
 215          
 216          
 217          
 218          <a name="nodesman"><h4 >Manipulating nodes</h4
 219          ></a><div class="block">
 220          A few examples of manipulating node with tree object methods:
 221  <XMP>
 222  <script>
 223      tree=new dhtmlXTreeObject('treeboxbox_tree',"100%","100%",0);
 224      ...
 225      var sID = tree.getSelectedItemId();//get id of selected node
 226      tree.setLabel(sID,"New Label");//change label of selecte node
 227      tree.setItemColor(sID,'blue','red');//set colors for selected node's label (for not selected state and for selected state)
 228      tree.openItem(sID);//expand selected node
 229      tree.closeItem(sID);//close selected node
 230      tree.changeItemId(sID,100);//change id of selected node to 100
 231      alert("This node has children: "+tree.hasChildren(100));//show alert with information if this node has children
 232  </script>
 233  </XMP>    
 234          </div>
 235          
 236  <a name="serialize"><h4 >Serializing Tree</h4></a><div class="block">
 237  Serialization methods allows getting tree in xml representation (xml string). Various levels of serializations define the number of tree parameters reflected in resulting XML:<br>
 238  
 239  <XMP>
 240  <script>
 241      tree.setSerializationLevel(userDataFl,itemDetailsFl);
 242      var myXmlStr = tree.serializeTree();
 243  
 244  </script>
 245  </XMP>    
 246  <li>no parameters - id,open,select,text,child</li>
 247  <li>userDataFl true - userdata</li>
 248  <li>itemDetailsFl true - im0,im1,im2,acolor,scolor,checked,open</li>
 249  </div>
 250      
 251      
 252  <a name="tooltip"><h4 >Tooltips</h4></a><div class="block">
 253  There are three ways to set tooltip for the node:<br>
 254      <li>Use node label ("text" attribute of item node) as tooltip - enableAutoTooltips(mode) - <em>false</em> by default</li>
 255      <li>Use "tooltip" attribute of item node for tooltip (it is used by default if this attribute was specified)</li>
 256      <li>setItemText(itemId,newLabel,<strong>newTooltip</strong>)</li>
 257  </div>
 258  
 259  <a name="move"><h4 >Moving Nodes</h4></a><div class="block">
 260  To move Item programaticaly developer can use the following ways:    <br>
 261  <br>
 262  <strong>To move upp/down/left:</strong>
 263  <XMP>
 264      tree.moveItem(nodeId,mode) 
 265  </XMP>
 266  <i>mode</i> possible values are:<br>
 267  <li>"down" - move node down in list of nodes (do not pay attention on hierarchy)</li>
 268  <li>"up" - move node up in list of nodes</li>
 269  <li>"left" - move node up in hierarchy</li>
 270  <br><br>
 271  
 272  <strong>To move directly into position (within tree)</strong>
 273  <XMP>
 274      tree.moveItem(nodeId,mode,targetId) 
 275  </XMP>
 276  <i>mode</i> possible values are:<br>
 277  <li>"item_child" - place node as child of node specified in third argument</li>
 278  <li>"item_sibling" - place node as sibling of node specified in third argument</li><br>
 279  <i>targetId</i> - id of target node.
 280  <br><br>    
 281  
 282  <strong>To move node into position (to another tree)</strong>
 283  <XMP>
 284      tree.moveItem(nodeId,mode,targetId,targetTree) 
 285  </XMP>
 286  <i>mode</i> possible values as above.<br>
 287  <i>targetId</i> - id of target node (in target tree).<br>
 288  <i>targetTree</i> - target tree object<br><br>
 289  
 290  <strong>Cut/Paste way</strong><br>
 291  Another way is to use doCut(),doPaste(id) - but this works with selected item only. Developer can also delete node in one place and create it in other (also the way ;-)).<br>
 292  To give users the possibility to move items use drag-n-drop functionlity.
 293  </div>
 294  
 295  <a name="counter"><h4 >Items Counter</h4></a><div class="block">
 296  There is a possibility to display item children elements counter with the label of the node. To activate this feature use the following:    
 297  <XMP>
 298  <script>
 299      tree.setChildCalcMode(mode);
 300  </script>
 301  </XMP>    
 302  Possible modes are:<br>
 303      <li>"child"  - all childs on this level</li>
 304      <li>"leafs"  -  all childs without subchilds on this level</li>
 305      <li>"childrec" - all childs</li>
 306      <li>"leafsrec" all childs without subchilds</li>
 307      <li>"disabled" - nothing</li>
 308  <br>
 309  Other related methods:<br>
 310  <strong>_getChildCounterValue(itemId)</strong> - get current counter value<br>
 311  <strong>setChildCalcHTML(before,after)</strong> - html around counter to change default [x]<br>
 312  Use <em>child</em> attribute in xml if you need to set counter value when using dynamical loading.
 313  
 314  </div>
 315  
 316  <a name="smartxml"><h4 >Smart XML Parsing</h4></a><div class="block">
 317  The idea of Smart XML Parsing is simple - the entire tree structute loaded on client side, but only nodes which should be displayed are rendered. This helps to dramaticaly decrease loading time and general performance of large trees. Plus - in the contrary to Dynamical Loading - entrire tree structure is available for most of script methods (for example Search performed agains all nodes - not only rendered). To activate Smart XML Parsing use the following method:
 318  <XMP>
 319  <script>
 320      tree.enableSmartXMLParsing(true);//false to disable
 321  </script>
 322  </XMP>    
 323  Smart XML Parsing do not work if tree loaded fully expanded.
 324  </div>
 325      
 326  <a name="checkbox"><h4 >Checkboxes in tree</h4></a><div class="block">
 327  dhtmlxTree support two or three state checkboxes. Three state checkboxes means: checked/unchecked/some-child-checked (not all).
 328  To enable three state checkboxes use the following method:         
 329  <XMP>
 330  <script>
 331      tree.enableThreeStateCheckboxes(true)//false to disable
 332  </script>
 333  </XMP>    
 334  Using three-state checboxes with smart xml parsing you need to specify third state manually (checked="-1"):
 335  <xmp>
 336      <item checked="-1" ...>
 337          <item checked="1" .../>
 338          <item .../>
 339      </item>
 340  </xmp>
 341  Checkboxes can be disabled - <strong>disableCheckbox(id,state)</strong><br>
 342  Some node can hide checkboxes - <strong>showItemCheckbox(id,state)</strong> (<strong>nocheckbox</strong> xml attribute)
 343  
 344  </div>        
 345  
 346  <a name="dnd"><h4 >Drag-and-drop technics</h4></a><div class="block">
 347  There are three modes of drag-n-drop (set with <strong>setDragBehavior(mode)</strong>):<br>
 348  <li>Drop as child - "child"</li><br>
 349  <li>Drop as sibling - "sibling"</li><br>
 350  <li>Complex mode (both previous are active) - "complex"</li> <br>
 351  Plus two modes of each of them:<br>
 352  <li>1. Common drag-n-drop</li><br>
 353  <li>2. Copy with drag-n-drop - <strong>tree.enableMercyDrag(1/0)</strong></li><br>
 354  All modes can be changed on the fly.<br>
 355  <br>
 356  <h5>Event handlers</h5>
 357  To process drag-n-drop before drop occured use onDrug event handler - <strong>setDragHandler(func)</strong>. If func doesn't return <em>true</em>, drop will be canceled.<br>
 358  After drop occured there is another event - onDrop - handle it using setDropHandler(func).<br>
 359  Both event handlers pass 5 parameters into the func object:<br>
 360  <li>id of node which was dragged</li>
 361  <li>id of target node</li>
 362  <li>id of target-before node (if drop as sibling)</li>
 363  <li>tree object source</li>
 364  <li>tree object target</li>
 365  </div>    
 366  
 367  <a name="dndifr"><h4 >Drag-and-drop between iframes</h4></a><div class="block">
 368  Drag-n-drop between iframes enabled by default. All you need to do additionaly is to insert the following code into the page where no tree exists:<br>
 369  <xmp>
 370  <script src="js/dhtmlXCommon.js"></script>
 371  <script>
 372      new dhtmlDragAndDropObject();
 373  </script>
 374  </xmp>
 375  </div>    
 376  
 377  <a name="guide_perf"><h4 >Increasing Performance</h4></a><div class="block">
 378  Taking into account the general low performance of DHTML we introducrd two ways of increasing performance of large trees:<br>
 379  1. <a href="#dyntree">Dynamical Loading</a><br>
 380  2. <a href="#smartxml">Smart XML Parsing</a><br>
 381  Also be sure your tree was organized well - putting a lot of items on one level of the branch makes tree difficalt for visual perception and decrease performance. 
 382  </div>    
 383  
 384  <a name="context_menu"><h4 >Context Menu</h4></a><div class="block">
 385  There is built in context menu in dhtmlxTree. The content of this menu can be set with XML or script. For changing context menu content depending on tree item developer can implement function for hidding/showing items of the same menu or associate different menues with different items. To enable context menu do the following: 
 386  <XMP>
 387  <script>
 388  //init menu
 389          aMenu=new dhtmlXContextMenuObject('120',0,"Demo menu");
 390          aMenu.menu.setGfxPath("../imgs/");        
 391          aMenu.menu.loadXML("menu/_context.xml");                
 392          aMenu.setContextMenuHandler(onMenuClick);
 393          
 394  //init tree    
 395          tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
 396          ...
 397          tree.enableContextMenu(aMenu); //link context menu to tree
 398  function onMenuClick(id){
 399      alert("Menu item "+id+" was clicked");
 400  }
 401  </script>
 402  </XMP>    
 403  </div>    
 404  
 405  <a name="refresh"><h4 >Refreshing nodes</h4></a><div class="block">
 406  <li>refreshItems(itemIdList,source) to refresh only items from the itemIdList (not their children)</li>
 407  <li>refreshItem(itemId) - to refresh children of item with itemId. In this case auto loading should be activated.</li>
 408  </div>    
 409  
 410  <a name="sort"><h4 >Sorting nodes</h4></a><div class="block">
 411  You can sort nodes in dhtmlxTree Pro (necessary file: dhtmlXTree_sb.js) using follwoing ways:<br>
 412  <strong>Sort by label text (if no custom comparator specified)</strong><br>
 413  <XMP>
 414      tree.sortTree(nodeId,order,all_levels);
 415  </XMP>
 416  <li><em>nodeId</em> - parent of the level to start sorting from (id of superroot for entire tree) </li>
 417  <li><i>order</i> - sort direction: "ASC"/"DES"</li>
 418  <li><em>all_levels</em> - if true, then all sublevels will be processed as well</li>
 419  <br><br>
 420  <strong>Custom defined sorting</strong><br>
 421  <XMP>
 422      //define your comparator (in our case it compares second words in label)
 423  	function mySortFunc(idA,idB){
 424          a=(tree.getItemText(idA)).split(" ")[1]||"";
 425          b=(tree.getItemText(idB)).split(" ")[1]||"";
 426          return ((a>b)?1:-1);
 427      }
 428      tree = new ...
 429      //attach your comparator to the tree
 430      tree.setCustomSortFunction(mySortFunc);
 431  </XMP>
 432  Comparator function gets 2 nodes IDs. Use your tree object there and these IDs to return a comparison result.
 433  <br>
 434  If custome comparator was specified, then tree.sortTree(...) method uses it for sorting.
 435  
 436  </div>    
 437  
 438  <a name="search"><h4 >Search functionlity</h4></a><div class="block">
 439  Search functionality of dhtmlxTree allows moving focus on node with label fitting searchString mask.<br> 
 440  Has support for Smart XML Parsing.<br><br>
 441  Script syntax:
 442  <XMP>
 443      tree.findItem(searchString); //find item next to current selection
 444      tree.findItem(searchString,1,1)//find item previous to current selection
 445      tree.findItem(searchString,0,1)//search from top
 446  </XMP>
 447  Example of usage is included in Professional Edition package – samples/treeExPro2.html.
 448  </div>    
 449  
 450  
 451  <a name="multiline"><h4 >Multiline tree items</h4></a><div class="block">
 452  ...allows displaying tree items in multiline mode. For now it is recommended to turn tree lines off for better appearance. To enable multiline feature you need to do the following: 
 453  <XMP>
 454      tree.enableTreeLines(false);
 455      tree.enableMultiLineItems(true);
 456  </XMP>
 457  Example of usage is included in professional edition package – samples/treeExPro6.html.
 458  </div>    
 459  
 460  <a name="g_icons"><h4 >Icons in Tree</h4></a><div class="block">
 461  <h4>Set Icons</h4>
 462  There is a way to set icons for the node explicetly using script (<strong>setItemImage,setItemImage2</strong>) or xml (<strong>im0,im1,im2</strong> attributes of item node):<br>
 463  <li>im0 - item without children</li>
 464  <li>im1 - closed item with children</li>
 465  <li>im2 - opened item with children</li>
 466  <h4>Set Icon Size</h4>
 467  There is a way to set icon size for the whole tree or each node using script or xml:<br>
 468  
 469  XML syntax for icon size per each item (optional):
 470  <xmp><item ... imheight="Xpx" imwidth="Xpx"></item></xmp>
 471  
 472  Script syntax:
 473  <XMP>
 474      tree.setIconSize(w,h);//set global icon size
 475      tree.setIconSize(w,h,itemId)//set icon size for particular item
 476  </XMP>    
 477  </div>    
 478  
 479      </div>
 480      
 481  <a name="error"><h4 >Error handling in dhtmlxTree</h4></a><div class="block">
 482  Some exceptions in dhtmlxTree can be captured and processed.
 483  
 484  <xmp>
 485  function myErrorHandler(type, desc, erData){
 486      alert(erData[0].status)
 487  }
 488  dhtmlxError.catchError("ALL",myErrorHandler);
 489  </xmp>
 490  <strong>Supported Error Types are:</strong><br>
 491  <li>"All"</li>
 492  <li>"LoadXML"</li>
 493  <br><br>
 494  <strong>Handler gets the following params:</strong><br>
 495  <li>type - string (mentioned above)</li>
 496  <li>desc - error description (hardcoded in code)</li>
 497  <li>erData - error related array objects(see below).</li>
 498  <br>
 499  <table width="100%" border="0" style="font-size:12px;" cellspacing="0">
 500      <tr style="font-weight:bold;">
 501          <td width="100">Type</td>
 502          <td>Object(s)</td>
 503      </tr>
 504      <tr>
 505          <td>LoadXML</td>
 506          <td>[0] - response object</td>
 507      </tr>
 508  </table>
 509      
 510  </div>    
 511  </div>
 512      
 513      <a name="cftag"><h3 >Cold Fusion Tag for dhtmlXTree</h3
 514      ></a><div class="block">
 515  <XMP>
 516  <cf_dhtmlXTree
 517      name="tree"
 518      width="250"
 519      height="250"
 520      JSPath="../"
 521      CSSPath="../"
 522      iconspath="gfx/"
 523      xmldoc="tree.xml"
 524      checkboxes="false"
 525      dragndrop="true"
 526      style="background-color:whitesmoke;border:1px solid blue;"
 527      onSelect="onNodeSelect"
 528      onDrop="onDropNode">
 529          ...configuration xml...
 530      </cf_dhtmlXTree>
 531  </XMP>
 532      <li>name - [optional] name of the tree js object to use in javascript,  if skiped, then name autogenerated</li>
 533      <li>width - [optional] width of the tree (definitely it sets the with of the tree box, leaving the with of the tree itself by 100%)</li>
 534      <li>height - [optional] height of the tree</li>
 535      <li>JSPath - [optional] absolute or relative path to directory which contains tree js files, "js" directory by default</li>
 536      <li>CSSPath - [optional] absolute or relative path to directory which contains tree css files, "css" directory by default</li>
 537      <li>iconspath - [optional] absolute or relative path to directory which contains tree icon files, "img" directory by default</li>
 538      <li>xmldoc - [mandatory for xml loading] url of the xml file used to load levels dynamically</li>
 539      <li>checkboxes - [optional] show checkboxes (none, twoState, threeState)</li>
 540      <li>dragndrop - [optional] activate drag-&-drop (true,false)</li>
 541      <li>style - [optional] style for the tree box</li>
 542      <li>onSelect - [optional] javascript function to call on node selection</li>
 543      <li>oncheck - [optional] javascript function to call on node (un)checking</li>
 544      <li>onDrop - [optional] javascript function to call on node drop</li>
 545      <li>im1 - [optional] default image used for child nodes</li>
 546      <li>im2 - [optional] default image used for opened branches</li>
 547      <li>im3 - [optional] default image used for closed branches</li>            
 548      <br>
 549      For description of optional configuration xml - see chapter <em>"Loading data with XML"</em>
 550      <br><br>
 551  Minimal possible tag syntax with on-page xml:
 552  <XMP>
 553  <cf_dhtmlXTree> 
 554      <item text="Top node" id="t1" >
 555          <item text="Child node 1" id="c1" ></item>
 556          <item text="Child node 2" id="c2" ></item>
 557      </item>
 558  </cf_dhtmlXTree>    
 559  </XMP>
 560  Minimal possible tag syntax with server-side xml:
 561  <XMP>
 562  <cf_dhtmlXTree     xmldoc="tree.xml">
 563  </cf_dhtmlXTree>
 564  </XMP>
 565  With images specified:
 566  <XMP>
 567  <cf_dhtmlXTree  
 568      im1="book.gif" 
 569      im2="books_open.gif" 
 570      im3="books_close.gif">
 571      <item text="Mystery " id="mystery"  open="yes" >
 572          <item text="Lawrence Block" id="lb" >
 573              <item text="All the Flowers Are Dying" id="lb_1" />
 574              <item text="The Burglar on the Prowl" id="lb_2" />
 575              <item text="The Plot Thickens" id="lb_3" />
 576              <item text="Grifters Game" id="lb_4" />
 577              <item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
 578          </item>
 579          <item text="Robert Crais" id="rc" >
 580              <item text="The Forgotten Man" id="rc_1" />
 581              <item text="Stalking the Angel" id="rc_2" />
 582              <item text="Free Fall" id="rc_3" />
 583              <item text="Sunset Express" id="rc_4" />
 584              <item text="Hostage" id="rc_5" />
 585          </item>
 586          <item text="Ian Rankin" id="ir" ></item>
 587          <item text="James Patterson" id="jp" ></item>
 588          <item text="Nancy Atherton" id="na" ></item>
 589      </item>
 590  </cf_dhtmlXTree>
 591  </XMP>
 592  With Events Handlers,Checkboxes and Drag-n-drop:
 593  <XMP>
 594  <cf_dhtmlXTree   
 595      dragndrop="true"  
 596      checkboxes="twoState" 
 597      onSelect="onClick" 
 598      onCheck="onCheck" 
 599      onDrop="onDrag">
 600          <item text="Mystery " id="mystery"  open="yes" >
 601              <item text="Lawrence Block" id="lb" >
 602                  <item text="All the Flowers Are Dying" id="lb_1" />
 603                  <item text="The Burglar on the Prowl" id="lb_2" />
 604                  <item text="The Plot Thickens" id="lb_3" />
 605                  <item text="Grifters Game" id="lb_4" />
 606                  <item text="The Burglar Who Thought He Was Bogart" id="lb_5" />
 607              </item>
 608              <item text="Robert Crais" id="rc" >
 609                  <item text="The Forgotten Man" id="rc_1" />
 610                  <item text="Stalking the Angel" id="rc_2" />
 611                  <item text="Free Fall" id="rc_3" />
 612                  <item text="Sunset Express" id="rc_4" />
 613                  <item text="Hostage" id="rc_5" />
 614              </item>
 615              <item text="Ian Rankin" id="ir" ></item>
 616              <item text="James Patterson" id="jp" ></item>
 617              <item text="Nancy Atherton" id="na" ></item>
 618          </item>
 619  </cf_dhtmlXTree>
 620  </XMP>
 621      </div>
 622  
 623  
 624  </div>
 625  </body>
 626  </html>