How to refresh a jquery dynatree without rerendering it completely again?

Question

In my webapp I am using dynatree to display a tree of data which can be edited using drag&drop (for hierarchy changes) and through custom links (to change the status of an item). Every change is saved into the database directly after dropping or clicking the link.

To prevent the tree and it's backend model coming out of sync due to whichever circumstances, I would like to update the tree completely after each modification.

I can do it like this: how to reload/refresh/reinit DynaTree?. But I have to destroy and re-initialize the complete tree in order to do this and all nodes collapse while doing so.

I'd love a refresh option iterating over all tree items, throwing out items that are no longer there, adding new items, or changing title/icon/data of modified icons, but I cannot find anything like this in the documentation.

Is there any trick to achieve this? Maybe a hidden feature, or a workaround?

Thanks for inspiration, Peter

Answer 1

As there does not seem to be (at least I could not find) any built-in functionality for updating the tree (or parts of it) according to its backing javascript data object, I wrote this helper method to update a tree (or a branch of it):

EDIT: The previous implementation of the method did not work when children are added or removed. Updated it to discard all childnodes and add all children again:

  function updateNodeRecursively(node, data, includeSelf) {
    if(includeSelf == undefined) includeSelf = true;
    if(includeSelf) node.data = data;
    node.removeChildren();
    if(data.children) {
      for(var i=0; i<data.children.length; i++) {
        var cnode = node.addChild(data.children[i]);
        updateNodeRecursively(cnode, data.children[i],false)
      }
    }

It uses the same structure for data as used when initializing the tree from JavaScript, the tree can be updated completely or partially, depending on which node you are passing as first argument.