DHTMLX Docs & Samples Explorer

Increasing Tree's Performance

The following ways of increasing performance were introduced in dhtmlxTree (when working with huge data sets):

  • Dynamical Loading;
  • Smart XML Parsing;
  • Distributed Parsing;
  • Smart Rendering.

Dynamical Loading

In case the tree contains large amount of nodes (or the user doesn't want to waste time on loading hidden nodes), it would be better to load them on request, not all at once. The functionality to load tree levels dynamically using XML was introduced for this purpose. Dynamical loading of items from XML stream gives the possibility to create DHTML trees with unlimited number of nodes.

Activating Dynamical Loading

First, in XML the user should indicate the nodes that will be loaded dynamically this way: add the parameter child=“1” to all nodes that have child items. The items containing this parameter will be objects for dynamical loading.

    <?xml version="1.0" encoding="iso-8859-1" ?>
        <tree id="0">
            <item  text="Surveillance" id="a1" im0="book.gif" … child="1"/>
            <item …/></tree>
 

The method setXMLAutoLoading() switches the dynamical loading on in the tree:

    <script>
        tree.setXMLAutoLoading(url);
        tree.loadXML(file); // load the first level of the tree
    </script>
 

The above mentioned snippet is useful in case of a tree with large amount of data. The system will first load the data indicated by loadXML() method. The script specified in setXMLAutoLoading() method will be called when the user clicks the tree to expand any of the parent nodes (which child nodes were not loaded). The script will get the id of the node to open, and return the XML with description of the child items.

It should be noted that when the tree is switched on dynamical loading, script methods work only for those items that are loaded at the moment.

Setting Auto Loading Behavior

The following method is responsible for specifying the way server side URL is constructed during dynamical loading calls:

    <script>
        tree.setXMLAutoLoadingBehaviour(mode);
    </script>
 

The following modes variants are available here:

  • id - some_script?id=[item_id]
  • name - some_script[item_id]
  • xmlname - some_script[item_id].xml
  • function - is used for calling user-defined handler that should be set as the first parameter of setXMLAutoLoading() method.

Setting Escaping Mode

Mode setEscapingMode() is responsible for setting escaping mode (used for escaping id in requests). This method sets the mode for transferring itree item information to the server:

    <script>
        tree.setEscapingMode(mode);
    </script>
 

The following modes are available:

  • default - uses native escape functionality of the browser;
  • utf8 - is used for UTF escaping;
  • none - data is not escaped.

Smart XML Parsing

The idea of Smart XML Parsing is simple: the entire tree structure is loaded on the client side, but only nodes that should be displayed are rendered. This helps to decrease loading time and general performance of large trees greatly. Plus, the entire tree structure is available for most of script methods (for example, searching is performed against all nodes, not only rendered ones).

Activating Smart XML Parsing

To activate Smart XML Parsing, the user should apply the following method:

    <script>
        tree.enableSmartXMLParsing(true); // false is used to disable
    </script>
 

Please, pay your attention to the fact that Smart XML Parsing does not work in case of loading fully expanded tree.

Getting Parsing State

Parsing state can be got using getItemParsingState() method which takes item id as parameter:

    <script>
        var state = tree.getItemParsingState(itemId);
    </script>
 

The method returns:

  • 1 - item is already parsed;
  • 0 - item is not parsed yet;
  • -1 - item's parsing is in process.

Distributed Parsing

Another way to increase performance of the tree with some levels containing more than 100-200 nodes per level was introduced. This functionality is called Distributed Parsing. The main advantage of it lies in making the level visible and ready to use before it is completely parsed. Thus, items are loaded portion by portion with some timeouts.

Activating Distributed Parsing

To enable this functionality, the user should make use of the following JS command:

    <script>
        tree.enableDistributedParsing(mode,count,delay);
    </script>
 

Parameters of this method are:

  • mode - true|false meaning enable|disable Distributed Parsing;
  • count - number of nodes per portion (optional parameter);
  • delay - delay between portions parsing, set in milliseconds (optional parameter).

This functionaity is fully compatible with Smart XML Parsing.

Getting Parsing State

Current state of Distributed Parsing can be easily got in the following way:

    <script>
    var state = tree.getDistributedParsingState(); // returns true|false
    </script>
 

This method returns either true (meaning that parsing is still in process) or false (meaning that parsing is already finished).

Smart Rendering

In case the tree contains a lot of items per level (for instance, 500 and more), the user can increase overall performance using Smart Rendering mode. This mode allows loading big, not well-formed trees. There is no need for any changes in data structure to switch this mode on. It's just enableSmartRendering() method that should be used before loading data in tree:

    <script>
        tree.enableSmartRendering(true); // false is used to switch the mode off
    </script>
 

The important thing that should be taken into account is that this mode is incompatible with Distributed Parsing and Three-state checkboxes.