<h3 onclick="openFull(this)">Cold Fusion Tag for dhtmlXTree</h3> This chapter also included into main documentation for dhtmlXTree. <XMP> <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> </XMP> <li>name - [optional] name of the tree js object to use in javascript, if skiped, then name autogenerated</li> <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> <li>height - [optional] height of the tree</li> <li>JSPath - [optional] absolute or relative path to directory which contains tree js files, "js" directory by default</li> <li>CSSPath - [optional] absolute or relative path to directory which contains tree css files, "css" directory by default</li> <li>iconspath - [optional] absolute or relative path to directory which contains tree icon files, "img" directory by default</li> <li>xmldoc - [mandatory for xml loading] url of the xml file used to load levels dynamically</li> <li>checkboxes - [optional] show checkboxes (none, twoState, threeState)</li> <li>dragndrop - [optional] activate drag-&-drop (true,false)</li> <li>style - [optional] style for the tree box</li> <li>onSelect - [optional] javascript function to call on node selection</li> <li>oncheck - [optional] javascript function to call on node (un)checking</li> <li>onDrop - [optional] javascript function to call on node drop</li> <li>im1 - [optional] default image used for child nodes</li> <li>im2 - [optional] default image used for opened branches</li> <li>im3 - [optional] default image used for closed branches</li> <br> For description of optional configuration xml - see chapter <em>"Loading data with XML"</em> <br><br> Minimal possible tag syntax with on-page xml: <XMP> <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> </XMP> Minimal possible tag syntax with server-side xml: <XMP> <cf_dhtmlXTree xmldoc="tree.xml"> </cf_dhtmlXTree> </XMP> With images specified: <XMP> <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> </XMP> With Events Handlers,Checkboxes and Drag-n-drop: <XMP> <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> </XMP> </div>