Home > .NET > Dynatree nodes added dynamically

Dynatree nodes added dynamically

2012/10/12

The Dynatree documentation is full of examples, but some obvious activities are not clearly explained.

After a little fight, i resolved how to dynamically add nodes in Dynatree “lazy” nodes.

A lazy node is a part of a Dynatree which is loaded on demand, but this is well explained in the documentation.

In my case i have a tree representing an commercial hierarchy, starting from Divisions -Areas … until Shops.

On every node i have provided a right-clic menu, that permits to add a node of the object which is hierarchically inferior, so for a Division i can add an Area.

There is a main node that permits to add a Division:


I went on problems when in the javascript callback , from a web method that gives back an JSON object, i needed to create the node: on my first try i noticed that if i added an Division when the Divisions tree was opened it was all ok, but if the Division node was closed, opening the Divisions tree there was only the fresh added Division…

The problem is related to the lazy mechanism: if the node is not loaded when you expand the node the underlying nodes are loaded from the database so is already included the freshly added item, instead if the underlying tree is already opened the node must be inserted by code.

In my example i have the current node from a javascript public object:

var node = public.currentNode;
if (node.childList == null)
    node.expand();
else {
    var childNode = node.append({
        title: public.newDivisionDescr,
        tooltip: "",
        key: "DivisionItem-" + objJson.d.Value,
        isLazy: true,
        isFolder: true
    });
    node.sortChildren(null, true);
}
node = null; 

The node.expand() activate the lazy call and the nodes are rendered from the db , otherwise the node must be added by code to the existing nodes.

node.expand() calls the lazy background loading only when the tree under the node is empty, otherwise it expands the tree node without the lazy loading: so the code test is not !node.isExpanded() but node.childList == null; in this manner the user interface works always correctly, also in the case that the user expands a tree node and then close it, then he/she does a right clic for to add an item to the underlying nodes.

The sortChildren is not requested on the first case, the lazy loaded nodes are already sorted; in the second case your node is added as the first node and the sortChildren is requested to place the new node in the correct place.

Advertisements
Categories: .NET
%d bloggers like this: