[Sommaire] [Imprimer]

   1  <div style="position:absolute;left:80%;background-color:white;right:20;width:150;">
   2  <a onclick="expandAll(true)" href="javascript:void(0)">expand</a>|<a onclick="expandAll(false)" href="javascript:void(0)">collaps</a>
   3  </div>
   4  <script>
   5              
   6  			function openFull(el){
   7                  el.nextSibling.style.display=='none'?el.nextSibling.style.display='block':el.nextSibling.style.display='none'
   8              }
   9  			function expandAll(fl){
  10                  var elAr = document.getElementsByTagName("DIV");
  11                  for(var i=1;i<elAr.length;i++){
  12                      if(elAr[i].style.display=='none' || elAr[i].block_fl){
  13                          elAr[i].block_fl = true;
  14                          if(fl)
  15                              elAr[i].style.display = "";
  16                          else
  17                              elAr[i].style.display = "none";
  18                      }
  19                  }
  20              }
  21              
  22          </script>
  23  <style>
  24              .{font-family:arial;}
  25              h2 {cursor:pointer;font-size:16px;margin-left:10px;line-height:10px}
  26              h3 {cursor:pointer;font-weight:normal;color:gray;text-decoration:underline;line-height:10px}
  27              div.block {margin-left:30px;}
  28              xmp{color:green;background-color:lightgrey;padding:3px;}
  29          </style>
  30  <h2 onclick="openFull(this)">F.A.Q.</h2>
  31  <div onclick="openFull(this)" style="display:block" class="block">
  32  <a name="kb_faq_lic"></a><h3>Licensing</h3></a>
  33  </div>
  34  <div style="display:;margin-left:5px;margin-top:2px;">
  35  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
  36  <li>May I use dhtmlxTree Standard Edition in my commercial projects for free?</li>
  37  </div>
  38  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">No. To use any edition in commercial project you need to purchase a Commercial or Enterprise License.</div>
  39  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
  40  <li>How much does the professional version cost? Is it included with the commercial license?</li>
  41  </div>
  42  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">You'll get Professional Edition when you purchase Commercial ($99) or Enterprise ($399) License.</div>
  43  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
  44  <li>What is the difference between Commercial and Enterprise Licenses?</li>
  45  </div>
  46  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">There are two main differences: 
  47  <li>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</li>
  48  <li>Supporting period (as well as period of free upgrade) is 1 month for Commercial and 1 year for Enterprise License.</li></div>
  49  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
  50  <li>How can I get Professional Edition of dhtmlxTree?</li>
  51  </div>
  52  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">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.</div>
  53  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
  54  <li>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?</li>
  55  </div>
  56  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">You can download only Standard Edition from the site. If you want to evaluate Professional Edition please write us - info@scbr.com</div>
  57  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
  58  <li>Will I get commented not obfuscated sources together with Professional Edition?</li>
  59  </div>
  60  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Yes.</div>
  61  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
  62  <li>Is there some special documentation available with Professional Edition?</li>
  63  </div>
  64  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">No. There is only one variant of documentation. All methods specific for Professional Edition marked in documentation with red colored text "Professional" or "Commercial". </div>
  65  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
  66  <li>May I modify dhtmlxTree and use modified files in my project?</li>
  67  </div>
  68  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Yes you may. At the same time according to the License Scand LLC remains the owner of all modifications in the code.</div>
  69  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
  70  <li>How to buy dhtmlxTree License?</li>
  71  </div>
  72  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Please send email to info@scbr.com and you'll get necessary instructions right away.</div>
  73  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
  74  <li>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?</li>
  75  </div>
  76  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">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.</div>
  77  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
  78  <li>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.</li>
  79  </div>
  80  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Only once.</div>
  81  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
  82  <li>Can we modify dhtmlxTree code and/or change some functionalities in order to match our requirements.</li>
  83  </div>
  84  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">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. </div>
  85  </div>
  86  <div onclick="openFull(this)" style="display:block" class="block">
  87  <a name="kb_faq_perf" id="kb_faq_perf"><h3>Performance. Dynamical Loading</h3></a>
  88  </div>
  89  <div style="display:;margin-left:5px;margin-top:2px;">
  90  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
  91  <li>How can I load xml dynamically, so that the loading gets done more quickly?</li>
  92  </div>
  93  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">
  94  As you know dhtmlXTree supports dynamical loading for such purposes. Dynamical loading means loading data on request. To make tree do this use method <em>tree.setXMLAutoLoading(url)</em><br>
  95  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:
  96      <xmp>
  97      <tree id="0">
  98          <item  text="Surveillance" id="a1" im0="book.gif"  child="1"/>
  99          ...
 100          <item text="Low income countries" id="a333" im0="book_titel.gif"  child="0"/>
 101      </tree>    
 102      </xmp>
 103  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:
 104      <xmp>
 105      <tree id="a1">
 106          <item text="Bilateral surveillance" id="a2"  />
 107          ...
 108      </tree>
 109      </xmp>
 110      
 111  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. 
 112  </div>
 113  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 114  <li>Is there any solution for increasing tree performance when it contains hundreds or thousands of nodes?</li>
 115  </div>
 116  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">There are two ways:<br>
 117  <li>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 .</li>
 118  <li>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.</li></div>
 119  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 120  <li>What happens is that the nodes get drawn as siblings of the root and not as children of the expanded node.</li>
 121  </div>
 122  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">The reason is in xml file. It always contains the same ID of parent element: <xmp><tree id="every-time-id-of-super-root-level"></xmp>, but it should be <xmp><tree id="id-of-node-that-was-expanded"></xmp></div>
 123  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 124  <li>Dynamical Loading always loads the whole tree and adds it to existing one.</li>
 125  </div>
 126  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">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.</div>
 127  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 128  <li>I've created simple xml containig 10 000 nodes and ... after 30second IE almost breaks down with a warning</li>
 129  </div>
 130  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">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.</div>
 131  </div>
 132  <div onclick="openFull(this)" style="display:block" class="block">
 133  <a name="kb_faq_dnd" id="kb_faq_dnd"><h3>Drag-n-drop, Nodes ordering</h3></a>
 134  </div>
 135  <div style="display:;margin-left:5px;margin-top:2px;">
 136  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 137  <li>Is there any way to rearrange the nodes without reloading the tree?</li>
 138  </div>
 139  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">You can rearrange nodes with script (moveItem method) or using drag-n-drop (drop-as-sibling type)</div>
 140  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 141  <li>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.</li>
 142  </div>
 143  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">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)</div>
 144  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 145  <li>Can I drag and drop either the node's id or value into the html text input field?</li>
 146  </div>
 147  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Yes, this is possible. Any page control can be set as "landing zone". Here is an example:
 148  <xmp>
 149      <div id="treeboxbox_tree" style="width:200;height:200"></div>
 150      <input type="text" width="120px" id="sInput">
 151      <script>
 152          tree=new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
 153          tree.setImagePath("../imgs/");
 154          //user defined drag and drop control with event handlers inside
 155  		function s_control(){
 156              //action occures on drag
 157              this._drag=function(sourceHtmlObject,dhtmlObject,targetHtmlObject){
 158                  targetHtmlObject.style.backgroundColor="";
 159                  targetHtmlObject.value=sourceHtmlObject.parentObject.label;
 160              }
 161      
 162              //action occures on drag moved in landing zone
 163              this._dragIn=function(htmlObject,shtmlObject){
 164                  htmlObject.style.backgroundColor="#fffacd";
 165                  return htmlObject;
 166              }
 167      
 168              //action occures on drag moved out landing zone
 169              this._dragOut=function(htmlObject){ 
 170                  htmlObject.style.backgroundColor="";
 171                  return this;
 172              }
 173          }
 174      //set input control as "landing zone"
 175      tree.dragger.addDragLanding(document.getElementById('sInput'), new s_control);    
 176      </script>
 177  </xmp>
 178  </div>
 179  </div>
 180  <div onclick="openFull(this)" style="display:block" class="block">
 181  <a name="kb_faq_api" id="kb_faq_api"><h3>API, Initialization</h3></a>
 182  </div>
 183  <div style="display:;margin-left:5px;margin-top:2px;">
 184  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 185  <li>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".</li>
 186  </div>
 187  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">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.<br>
 188  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:
 189  <xmp>
 190      <tree id="0">
 191          <item text="My Folder" id="my_folder" child="1" ...>
 192              <userdata name="folder">1</userdata>
 193              <item text="My File" id="my_file" child="0"  ...>
 194                  <userdata name="folder">0</userdata>
 195              </item>
 196          </item>
 197      ...
 198      </tree>
 199  </xmp>
 200  In script you can manipulate this data using script methods:
 201  
 202  <em>tree.getUserData(nodeId,key)</em>, for example:
 203  <xmp>
 204  	function doOnSomeEvent(id){
 205      If(yourTree.getUserData(id,"folder")=='0')
 206                  alert("This was file")
 207              else
 208                  alert("This was folder")
 209      }
 210  </xmp>
 211  This way you can cancel drop event for files:
 212  <xmp>
 213  tree.setDragFunction(doOnDrop);
 214  function doOnDrop(nodeId,parentId){
 215          if(tree.getUserData(parentId,"folder")=="0")
 216              return false;
 217  }
 218  </xmp>
 219  For more details about eventHandlers see "Set Event Handlers" chapter of Tree documentation.
 220  </div>
 221  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 222  <li>How to collapse all nodes in the tree.</li>
 223  </div>
 224  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">To collapse all root nodes (nodes of first level) in the tree you need to close them all one by one:
 225  <xmp>
 226  	function closeAllRoots(){
 227          var rootsAr = tree.getSubItems(0).split(",")
 228          for(var i=0;i<rootsAr.length;i++){
 229              tree.closeAllItems(rootsAr[i])
 230          }
 231      }
 232  </xmp>
 233  where "0" is ID of Super Root level.</div>
 234  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 235  <li>Is there a way to get a modified tree back to xml?</li>
 236  </div>
 237  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Yes, you can use serializeTree() method for this. It returns xml string. </div>
 238  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 239  <li>How can I have different nodes call different functions when clicked?</li>
 240  </div>
 241  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">You can use userData to keep function name for each node. In onclick event handler get this name and evaluate it.</div>
 242  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 243  <li>How to create nodes in tree and save them to db at the same time?</li>
 244  </div>
 245  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">1.    user clicks button "add new item" (or whatever you have for this) <br>
 246  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) <br>
 247  3.    move selection to the node with calling onclick function  (last parameter should be true)<br>
 248  4.    determine that node id is "newnodeid" and load the form for creating new item. <br>
 249  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). <br>
 250  6.    Delete and update should be done very likely. <br>
 251  7.    Do not forget the main principle - update the tree after database was updated. </div>
 252  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 253  <li>Can we limit the "maximum depth" of the tree to disallow child-dropping beyond a certain number of sub-nodes?</li>
 254  </div>
 255  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">You can get the level of the node in onDrop event handler and cancel drop if it exceeds maximum allowed.</div>
 256  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 257  <li>Can we use HTML as a node label?</li>
 258  </div>
 259  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Yes.</div>
 260  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 261  <li>Serialization of the modified trees - how does that work?</li>
 262  </div>
 263  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Using <em>serializeTree()</em> 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.</div>
 264  </div>
 265  <div onclick="openFull(this)" style="display:block" class="block">
 266  <a name="kb_faq_else" id="kb_faq_else"><h3>Other Questions</h3></a>
 267  </div>
 268  <div style="display:;margin-left:5px;margin-top:2px;">
 269  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 270  <li>Is there any support for cookies?</li>
 271  </div>
 272  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">Yes, Professional Edition has the ability to save tree state into cookies and restore it. There are two types of this functionality:
 273      <li>save the whole tree (not good for large trees as cookies has size limit)</li>
 274      <li>save only opened/closed/selected state.</li></div>
 275  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 276  <li>Is there any ability to use context menu (right-click menu) with dhtmlxTree </li>
 277  </div>
 278  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">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.</div>
 279  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 280  <li>What is Super Root in the dhtmlxTree?</li>
 281  </div>
 282  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">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").</div>
 283  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 284  <li>Is it possible to use multiple-lines for a dhtmlxTree node?</li>
 285  </div>
 286  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">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.</div>
 287  <div onclick="openFull(this)" style="margin-top:5px;color:blue;cursor:pointer;margin-top:10px;">
 288  <li>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?</li>
 289  </div>
 290  <div style="display:none;margin-left:20px;margin-top:2px;font-size:16px;">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.</div>
 291  </div>