Dynatree + lazy loading = slow

Question

I started using Dynatree in my project and I have one problem - it works very slowly when I try lazy reading. I found that my whole tree is re-rendered every time when I call addChild and I think it isn't efficient.

Does anyone know what I can do with it?

Two years ago, mar10 wrote that: "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." (http://stackoverflow.com/questions/3097791/dynatree-addchild-question-for-the-components-author)

I use release 1.0 now but I can't find any changes.

Answer 1

Maybe can you try the 1.2.2 version, latest one available, with up to date jquery & UI packages ?

https://code.google.com/p/dynatree/

Answer 2

Instead of addChild, you can initialize and update Dynatree with an ajax calls. Use dynatree's initAjax and node's appendAjaxmethods.

As argument of the data parameter, I pass the id of the parent node (or 0 if root node).

initAjax: {
      type: 'POST',
      url: 'inc/treeNodes.php',
      dataType: 'json',
      data: {key: 0}
    }

and

 onLazyRead: function (node) {
      node.appendAjax({
      type: 'POST',
      url: "inc/treeNodes.php",
      dataType: 'json',
      data: {key: node.data.key}
      })
  }

With this method, speed is no longer an issue, as the whole tree isn't reloaded when doing an Ajax calls to load children nodes.