expand|collaps

F.A.Q.

Licensing

  • May I use dhtmlxTree Standard Edition in my commercial projects for free?
  • No. To use any edition in commercial project you need to purchase a Commercial or Enterprise License.
  • How much does the professional version cost? Is it included with the commercial license?
  • You'll get Professional Edition when you purchase Commercial ($99) or Enterprise ($399) License.
  • What is the difference between Commercial and Enterprise Licenses?
  • There are two main differences:
  • According to Enterprise license you may use dhtmlxTree in any number of your projects, whereas Commercial License allows using dhtmlxTree in one project per license
  • Supporting period (as well as period of free upgrade) is 1 month for Commercial and 1 year for Enterprise License.
  • How can I get Professional Edition of dhtmlxTree?
  • To get Professional Edition of dhtmlxTree you need to purchase Commercial or Enterprise License. Right after that you'll get Professional Edition together with additional sample files by email.
  • Are the "pro" features available in the file downloaded from the site for evaluation, or do we have to buy a different file to try it out?
  • You can download only Standard Edition from the site. If you want to evaluate Professional Edition please write us - info@scbr.com
  • Will I get commented not obfuscated sources together with Professional Edition?
  • Yes.
  • Is there some special documentation available with Professional Edition?
  • No. There is only one variant of documentation. All methods specific for Professional Edition marked in documentation with red colored text "Professional" or "Commercial".
  • May I modify dhtmlxTree and use modified files in my project?
  • Yes you may. At the same time according to the License Scand LLC remains the owner of all modifications in the code.
  • How to buy dhtmlxTree License?
  • Please send email to info@scbr.com and you'll get necessary instructions right away.
  • May I distribute dhtmlxTree as a part of my application? What License do I need for this? Should I buy additional License for each copy of my application?
  • You may distribute dhtmlxTree as a part of you application if this application is not competitor to dhtmlxTree. You can use either Commercial or Enterprise License. Only one license necessary for one application - irregardless to number of copies sold.
  • My licensing question regards including your dhtmlxtree code in a commercial product which will be redistributed and run on clients' machines. I'm curious whether this would require a license on each client machine, or whether my company would simply need to license the code once for inclusion in the code base.
  • Only once.
  • Can we modify dhtmlxTree code and/or change some functionalities in order to match our requirements.
  • Modifications to the software are allowed, and you may distribute it as a part of your application, but distribution of the modified software as a standalone component or as a part of concurrent software is forbidden.

    Performance. Dynamical Loading

  • How can I load xml dynamically, so that the loading gets done more quickly?
  • As you know dhtmlXTree supports dynamical loading for such purposes. Dynamical loading means loading data on request. To make tree do this use method tree.setXMLAutoLoading(url)
    In this case your xml should contain only necessary nodes. For example initial xml should contain only nodes of top level. To let the tree know that some node has children, use child="1". Like this: <tree id="0"> <item text="Surveillance" id="a1" im0="book.gif" child="1"/> ... <item text="Low income countries" id="a333" im0="book_titel.gif" child="0"/> </tree> When user trying to open node which has children, tree looks for data on client side first - if no data found, then it goes to server using URL specified in method mentioned above with ID of node added to it, like: http://127.0.0.1/myTree/tree.cfm?id=a1, where "a1" is ID of the node which should be opened. Using this ID you can create another xml, which contains only child nodes of opening node. Like this: <tree id="a1"> <item text="Bilateral surveillance" id="a2" /> ... </tree> As dynamical loading needs to process incoming url parameters and generate xml file content based on it to work really useful, it would be good to use some server side programming language like ASP, ColdFusion, JSP, PHP or any other for this.
  • Is there any solution for increasing tree performance when it contains hundreds or thousands of nodes?
  • There are two ways:
  • Dynamical loading. In this case tree contains only nodes which were already opened and it doesn't really matters how much nodes are in the datasource .
  • Advanced XML Processing (available in Professional edition). In this case the whole xml documents loaded on client side, but only nodes which are visible are created in tree. This increases performance and decreases loading time.
  • What happens is that the nodes get drawn as siblings of the root and not as children of the expanded node.
  • The reason is in xml file. It always contains the same ID of parent element: <tree id="every-time-id-of-super-root-level">, but it should be <tree id="id-of-node-that-was-expanded">
  • Dynamical Loading always loads the whole tree and adds it to existing one.
  • XML file for initial loading should contain ONLY top level of the tree, xml that loads children should contain ONLY necessary nodes - so in most cases it generated with some server side routine using incoming "id" of parent node (node that was opened) which is passed to the file while calling it.
  • I've created simple xml containig 10 000 nodes and ... after 30second IE almost breaks down with a warning
  • As performance is a weak place of DHTML, we implemented two ways of processing big trees. First is dynamical loading - xml loaded from server by parts (on request). This feature available in all editions. Second is "advanced xml processing" - xml loaded at once, but processed by parts on request. This feature available in pro edition only.

    Drag-n-drop, Nodes ordering

  • Is there any way to rearrange the nodes without reloading the tree?
  • You can rearrange nodes with script (moveItem method) or using drag-n-drop (drop-as-sibling type)
  • Can we use different drag-n-drop types for different nodes? For example we need drop-as-sibling for files and drop-as-child for folders.
  • You can switch the drop mode on-the-fly. Using onDrag or onDrop event handlers you can manage the active mode based on some specificity of node which is dragged or dropped. To identify the type of the node you can use userData property of the node, which can be set with xml or with javascript: setUserData(itemId,name,value). Any time you can get the value of any block of user data of any node using getUserData(id,name)
  • Can I drag and drop either the node's id or value into the html text input field?
  • Yes, this is possible. Any page control can be set as "landing zone". Here is an example: <div id="treeboxbox_tree" style="width:200;height:200"></div> <input type="text" width="120px" id="sInput"> <script> tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0); tree.setImagePath("../imgs/"); //user defined drag and drop control with event handlers inside function s_control(){ //action occures on drag this._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){ targetHtmlObject.style.backgroundColor=""; targetHtmlObject.value=sourceHtmlObject.parentObject.label; } //action occures on drag moved in landing zone this._dragIn=function(htmlObject,shtmlObject){ htmlObject.style.backgroundColor="#fffacd"; return htmlObject; } //action occures on drag moved out landing zone this._dragOut=function(htmlObject){ htmlObject.style.backgroundColor=""; return this; } } //set input control as "landing zone" tree.dragger.addDragLanding(document.getElementById('sInput'), new s_control); </script>

    API, Initialization

  • It seems that your tree does not make a distinction between "files" and "folders". If I drag a "file" onto another "file", it becomes a "folder".
  • Generally the tree can only output data, it knows nothing about files or folders - you need to supply it with additional data and manage its behavior with script to get functionality you need.
    First you need to specify what nodes are files and what are folders using UserData (invisible data blocks that you can assign to any node). In your xml file use syntax like this: <tree id="0"> <item text="My Folder" id="my_folder" child="1" ...> <userdata name="folder">1</userdata> <item text="My File" id="my_file" child="0" ...> <userdata name="folder">0</userdata> </item> </item> ... </tree> In script you can manipulate this data using script methods: tree.getUserData(nodeId,key), for example: function doOnSomeEvent(id){ If(yourTree.getUserData(id,"folder")=='0') alert("This was file") else alert("This was folder") } This way you can cancel drop event for files: tree.setDragFunction(doOnDrop); function doOnDrop(nodeId,parentId){ if(tree.getUserData(parentId,"folder")=="0") return false; } For more details about eventHandlers see "Set Event Handlers" chapter of Tree documentation.
  • How to collapse all nodes in the tree.
  • To collapse all root nodes (nodes of first level) in the tree you need to close them all one by one: function closeAllRoots(){ var rootsAr = tree.getSubItems(0).split(",") for(var i=0;i<rootsAr.length;i++){ tree.closeAllItems(rootsAr[i]) } } where "0" is ID of Super Root level.
  • Is there a way to get a modified tree back to xml?
  • Yes, you can use serializeTree() method for this. It returns xml string.
  • How can I have different nodes call different functions when clicked?
  • You can use userData to keep function name for each node. In onclick event handler get this name and evaluate it.
  • How to create nodes in tree and save them to db at the same time?
  • 1. user clicks button "add new item" (or whatever you have for this)
    2. create node in the tree with some unique identifier, like "newnodeid" and label like "New" or something. (Do not forget to call open node method before this if you use dynamical loading, inserting node as child and parent node was never opened before)
    3. move selection to the node with calling onclick function (last parameter should be true)
    4. determine that node id is "newnodeid" and load the form for creating new item.
    5. when form was submitted and data was saved on server return the page with added javascript block which should rename selected node according to entered name or whatever you need as a node label, set new node id - according to created record id (or whatever you have as node ids).
    6. Delete and update should be done very likely.
    7. Do not forget the main principle - update the tree after database was updated.
  • Can we limit the "maximum depth" of the tree to disallow child-dropping beyond a certain number of sub-nodes?
  • You can get the level of the node in onDrop event handler and cancel drop if it exceeds maximum allowed.
  • Can we use HTML as a node label?
  • Yes.
  • Serialization of the modified trees - how does that work?
  • Using serializeTree() method you can get back tree structure as xml string. In version 1.1 it serializes node text, icons, state, order, selection. Version 1.2 will support serialization of userData, checkboxes.

    Other Questions

  • Is there any support for cookies?
  • Yes, Professional Edition has the ability to save tree state into cookies and restore it. There are two types of this functionality:
  • save the whole tree (not good for large trees as cookies has size limit)
  • save only opened/closed/selected state.
  • Is there any ability to use context menu (right-click menu) with dhtmlxTree
  • Context menu implemented into dhtmlxTree v.1.1 Professional Edition - the content of the menu can be defined with xml or javascript and can be managed with javascript.
  • What is Super Root in the dhtmlxTree?
  • When you create tree from constructor function, there is 4th parameter which represents the ID of Super Root element. Usually it is "0". Super Root is invisible level of the tree - the parent element for elements of first visible level ("root level").
  • Is it possible to use multiple-lines for a dhtmlxTree node?
  • Yes, there is such possibility in Professional Edition. The only limitation for current version - tree should not have dotted lines which visually link nodes (they should be turned off using enableTreeLines(false)) - otherwise appearance will be damaged.
  • I use various dhtmlX components on one page - tree, toolbar, menu. All of them have dhtmlxCommon.js file. Is it the same for all of them?
  • Yes, it is the same and you can get it either from tree package or from menu, toolbar - any dhtmlX component. If you have different versions of this file - would be better to use most recent.