Dynatree addChild - question for the component'

Question

http://wwwendt.de/tech/dynatree/index.html

I would like to clarify the following: when addChild is invoked - does the whole tree gets re-rendered or just the nodes modified (added nodes and the nodes that have new children)?

I am getting 2 conflicting pieces of info: Lazy Loading in dynatree it says that only affected nodes will get re-rendered

Dynatree slow when dynamically loaded with 100+ nodes here it says that it does get re-rendered every time addChild is used

Perhaps, I am missing something?

Which one is it?

Answer 1

Dynatree stores the nodes in an internal structure. 'Rendering' is the process of creating or updating HTML elements in the DOM to reflect the tree's status. For example the last node in a branch has a special class name, so appending a node requires removing this class from the previous 'last node' and adding it to the new one.

Every time you call .addChild(data), the rendering is triggered. If you pass 100 nodes with one call, the rendering is done only once, so this is always more performant than calling it 100 times with one single node.

Currently (release 0.5.4) addChild uses this pattern:

var prevFlag = tree.enableUpdate(false);
[modify the tree]
tree.enableUpdate(prevFlag);

enableUpdate(true) calls tree.redraw(), so the whole tree is updated. This will change with release 1.0, but even then it will be faster to combine addChild calls.

Another aspect is: when are nodes created in the DOM. Starting with 1.0 creation of HTML elements is deferred until the node becomes visible (expanded) for the first time. So it is possible to load a very large number of nodes into the efficient internal Dynatree data strucure without bloating the DOM.

If it is more user friendly to pre-load the whole tree, or lazy-load single branches on demand depends on server, network and client. So it's always a matter of benchmarking the different scenarios.