Start Building Professional
Web Apps Today

dhtmlxtree - slow loading

Hello,

Following are my scenario:
---------------------------------------
Xml structure is something like following:
<tree id="0">
    <item id="xyz" text="Root">
        <item id="header" text="Header" im0="blank.gif" im1="blank.gif" im2="blank.gif" />
        <item id="blockList" text="Blocks" im0="blocks.gif" im1="blocks.gif" im2="blocks.gif" child="1" call="1" select="1" />
    </item>
</tree>

Initialization:
var tree = new dhtmlXTreeObject(document.getElementById('id'));
tree.setImagePath("imgs/tree/csh_vista/");
tree.enableTreeImages(true);
tree.enableLoadingItem("<span class='xyz'>Loading...</span>");
tree.setXMLAutoLoading("url");
tree.attachEvent("onClick", function);
tree.loadXML("<path_to_above_xml>")

Data for sub-item (blockList) in the above illustration is dynamically generated with server-side script (url) that used information in the database to construct the xml. This list can be quite deep (up to 500) and may consist of sub-items. Note that sub-items xml are generated with auto loading functionality.

Items are added, updated and deleted from blockList through a panel in the same frameset as the tree. smartRefreshItem(id) method is used to synch up tree data with the panel. The id parameter is blockList Id.


There are the problems:
------------------------------
1. Opening block list for the first time (auto-loading) take up to 2 minutes

2. Refreshing the tree structure following an update as illustrated in above scenario causes the UI to freeze and takes up to 2 minutes to complete.

3. After update and refresh, the tree structure does not keep the same order as the generated xml and some of the items with sub-items lost their plus signs.

4. Replacing smartRefreshItem(id) with refreshItem(id) method maintains the list order, however loading takes up to 2 minutes to complete.

5. Using enableSmartRendering and enableSmartXmlParsing methods caused following error:
"Out of stack space" on line 91 in dhtmlxcommon.js. Whereas enableDistributedParsing method doesn't seem to have any effect.

Please what can we do to improve the loading performance of blockList in the above scenario as this is deal breaker for us?

BTW, we didn't have this issue with Jtree applet. The reason we are moving away from the applet is incompatibility with recent Jre?

Thanks for your support!

Hello,

Thank you for your response. Please find answers to your questions in bold text below:

>> Opening block list for the first time (auto-loading) take up to 2 minutes

How many nodes are loaded for the first time ?

For the test scenario, 132 nodes were loaded with each one containing 5 sub-items.
However, we're able to reduce the performance to 15 seconds by running on machine with bigger memory.

>> After update and refresh, the tree structure does not keep the same order as the generated xml and some of the items with sub-items lost their plus signs.

Please, check that server-side script returns desired xml.

In all test cases, server-side script  returns desired xml.

>> Replacing smartRefreshItem(id) with refreshItem(id) method maintains the list order, however loading takes up to 2 minutes to complete.

refreshItem method reloads the whole tree.

Confirmed that server-side script  returns desired xml.

>> Using enableSmartRendering and enableSmartXmlParsing methods caused following error:

enableSmartXmlParsing doesn't affect in case of dynamic loading. But Smart Rendering isn't compatible with dynamic loading. Distributed Parsing can help in solve rendering issue in case of bad-structured trees.

With enableSmartXMLParsing(true) omitted from initialization script, root node was opened by default upon page load using xml structure below.

<tree id="0">
    <item id="xyz" text="Root">
        <item id="header" text="Header" im0="blank.gif" im1="blank.gif" im2="blank.gif" />
        <item id="blockList" text="Blocks" im0="blocks.gif" im1="blocks.gif" im2="blocks.gif" child="1" call="1" select="1" />
    </item>
</tree>

However, with enableSmartXMLParsing included in the initialization, the root node was closed by default on page load.
When the plus sign was clicked to open the root node, the following error was received,

"Out of stack space" on line 91 in dhtmlxcommon.js.

How many nodes per level does the tree contain ?

Root node (level 1) contains 5 sub-items (level 2) including blockList.  Only the blockList item in level 2 contains sub-items.
blockList contains 132 nodes (can reach up to 500) with each one containing 5 sub-items.

Please, provide the direct link to the problematic page to support@dhtmlx.com if it's possible.

Unfortunately, it is not possible to provide a direct link since the pages are hosted within the intranet.
But if it helps we can provide sample xml produced by server-side script.

Hi,

Per request in above link. Please find attached sample xml and below scripts to assist with troubleshoot. We are using dhtmlxSuite_v25_pro_91111.

To recap our main issues:

1. Refreshing the tree structure using smartRefreshItem function following add, update or delete causes the UI to freeze and takes twice as long as refreshItem function.

2. Whenever user add or delete element from block list, server-side script generates new xml and maintains correct order and grouping of block list (confirmed server-side script returns desired xml).
However, when the tree is rendered, the order in the xml is not maintained plus some nodes containing sub-items lost their plus signs.

3. With enableSmartXMLParsing included in the initialization, the root node was closed by default on first page load. When the plus sign was clicked to open the root node, the following error was received.

"Out of stack space" on line 91 in dhtmlxcommon.js.

4. Also refer to threads in this link http://dhtmlx.com/docs/products/kb/index.php?s=normal&q=13587&a=22204


Initialization:

<div id="MyTree" style="width:100%;height:100%;"></div>
<script>
    var tree = new dhtmlXTreeObject(document.getElementById('MyTree'),"100%","100%",0);
    tree.setImagePath("imgs/tree/csh_vista/");
    tree.enableTreeImages(true);
    //tree.enableSmartXMLParsing(true);
    tree.enableLoadingItem("<span class=''>Loading...</span>");
    tree.setXMLAutoLoading("dynamic_load.xml");
    tree.attachEvent("onClick", some_function);
    tree.loadXML("initial_load.xml")
</script>

This function is called when a node is deleted or added to block list:    

function updateBlockList(id){
    if (tree.getLevel(id) >= 0 ) {
        tree.smartRefreshItem(id);
    }
}

Thank you for your support!