Add callback to onLazyRead (loading a keypath node does not render the expanded nodes in ui)

[GoogleCodeExporter]

I am trying to load a node using keypath. Looks like the tree nodes expand 
request goes to server (lazy loading works and returns nodes), however the ui 
is not rendering reloaded nodes.

function loadNode() {
alert("loading node");
      var tree = $("#tree-div").dynatree("getTree");
      // Make sure that node #_27 is loaded, by traversing the parents.
      // The callback is executed for every node as we go:
      tree.loadKeyPath("/Library/a04A000000BHdISIA1", function(node, status){
        if(status == "loaded") {
          // 'node' is a parent that was just traversed.
          // If we call expand() here, then all nodes will be expanded
          // as we go
          node.expand();
        }else if(status == "ok") {
          // 'node' is the end node of our path.
          // If we call activate() or makeVisible() here, then the
          // whole branch will be exoanded now
          node.activate();
        }
      });
     };

Original issue reported on code.google.com by runad...@gmail.com on 22 Aug 2011 at 7:49

[GoogleCodeExporter]

Looks like the loadkeypath() stops calling callback when the node is being 
expanded isLazy node. See the attached sample test. Looks like same piece of 
code works with the Example browser | lazy loading... example.
I need to have something like the attached file where my lazy read method would 
use javascript remoting to get the children for a node being expanded. 

any thoughts / pointers? your help is appreciated...

Original comment by runad...@gmail.com on 22 Aug 2011 at 10:01

Attachments:

• tree-test2.html

[GoogleCodeExporter]

Here is how I fixed this in my version of dynatree. I am sure one of you would 
be able to provide better solution and merge with dynatree release.

I modified _loadContent to accept callback function and pass that around to 
onLazyRead method. Then modified reloadChildren to pass callback received to 
_loadContent. This would close the callback loop from loadKeyPath to lazy read. 
Then I modified my onLazyRead to call the callback when data is received from 
server.

Let me know if any of you see issue with this change. 

Also, looks like there is no way to generate onClick() event programatically, 
correct? I need this loadKeyPath() to expand a tree node as well as generate 
onclick so that my onclick handler can handle this. currently, I am just 
directly calling my onClick to fake the behavior.

// _loadContent change....

 _loadContent: function(callback) {
        try {
            var opts = this.tree.options;
            this.tree.logDebug("_loadContent: start - %o", this);
            this.setLazyNodeStatus(DTNodeStatus_Loading);
            if( true === opts.onLazyRead.call(this.tree, this, callback) ) {
                // If function returns 'true', we assume that the loading is done:
                this.setLazyNodeStatus(DTNodeStatus_Ok);
                // Otherwise (i.e. if the loading was started as an asynchronous process)
                // the onLazyRead(dtnode) handler is expected to call dtnode.setLazyNodeStatus(DTNodeStatus_Ok/_Error) when done.
                this.tree.logDebug("_loadContent: succeeded - %o", this);
            }
        } catch(e) {
            this.tree.logWarning("_loadContent: failed - %o", e);
            this.setLazyNodeStatus(DTNodeStatus_Error, {tooltip: ""+e});
        }
    },

Original comment by runad...@gmail.com on 22 Aug 2011 at 11:44

[GoogleCodeExporter]

As you found out, the problem seems to be, that `loadKeyPath` calls 
`reloadChildren(callback)` which calls _loadContent() -> onLazyRead.

onLazyRead may call node.appendAjax() which fires the nodeLoaded event, that is 
then catched by reloadChildren.
You call node.addChild() instead of appendAjax(), so this event is not 
triggered.

Adding a callback parameter to onLazyRead sounds like a good idea.
The client would be expected to call it after content was loaded and added.
node.setLazyNodeStatus(DTNodeStatus_Ok) would no longer be required.
The callback shuld also allow to signal error conditions.
It would still be possible to ignore this callback and return `true` for 
synchronous operation.

Original comment by moo...@wwwendt.de on 23 Aug 2011 at 7:28

• Changed state: Accepted
• Added labels: Milestone-Release1.3

[GoogleCodeExporter]

Does `$(node.span).click()` work for you?

Original comment by moo...@wwwendt.de on 23 Aug 2011 at 7:33

[GoogleCodeExporter]

As a workaround, try adding these lines to your onLazyRead:

    node.addChild(fakeJsonResult);
    // Remove the 'loading...' status:
    node.setLazyNodeStatus(DTNodeStatus_Ok);
    // Fire nodeLoaded event
    var tree = node.tree,
    eventType = "nodeLoaded.dynatree." + tree.$tree.attr("id") + "." + node.data.key;
    tree.$tree.trigger(eventType, [node, true]);

Original comment by moo...@wwwendt.de on 23 Aug 2011 at 7:43

[GoogleCodeExporter]

Firing nodeLoaded event the way you mentioned works as well. I would be better 
of using this workaround to achieve my objective instead of modifying 
dynatree.js.

$(node.span).click() - this works to fire onclick event for the node.

thanks for help...

Original comment by runad...@gmail.com on 23 Aug 2011 at 3:56

[GoogleCodeExporter]

Original comment by moo...@wwwendt.de on 23 Aug 2011 at 4:37

• Changed title: Add callback to onLazyRead (loading a keypath node does not render the expanded nodes in ui)

[GoogleCodeExporter]

Should address #233 as well

Original comment by moo...@wwwendt.de on 26 Dec 2011 at 8:20

[GoogleCodeExporter]

Could someone post the fix more in detail?
Thanks.

Original comment by matej.le...@iprom.si on 16 Apr 2012 at 8:00

[GoogleCodeExporter]

I ran into a similar problem. 
In my case "this.data.key" contained whitespaces, which broke the binding of 
the appendAjax function. 

var eventType = "nodeLoaded.dynatree." + this.tree.$tree.attr("id") + "." + 
this.data.key;

>> eventType = nodeLoaded.dynatree.div_tree.Folder with a subfolder

Initially I changed this to ... + this.data.key.replace(/ /g,"_") in line 1437 
and 1717, but for better maintainability I added urlencoding and urldecoding on 
the server. 

Maybe include this workaround in future releases.

Original comment by gerhard....@gnowsis.com on 22 May 2012 at 9:02

[GoogleCodeExporter]

I ran into an issue using loadKeyPath against lazy loaded data.  I kept getting 
a node not found error, even though the Active echo clearly showed the key that 
I was looking for. 

The data I was loading in assigned an integer key to the node.data.key and 
during the loadKeyPath function, the string path is segmented but never checked 
for whether or not the key was an integer to be compared to an integer.  I 
added after line 1487 of jquery.dyantree.js: 

seg=parseInt(seg); 

And it worked.  Perhaps this could be addressed in a future release by a check 
up front to ensure that child.data.key and seg are the same datatype.  

Original comment by dwhe...@gmail.com on 21 Aug 2012 at 2:22

[GoogleCodeExporter]

This issue is addressed with Dynatree 2.0 ('fancytree')

Original comment by moo...@wwwendt.de on 7 Oct 2012 at 3:23

[GoogleCodeExporter]

Original comment by moo...@wwwendt.de on 26 Jan 2013 at 4:15

• Added labels: Milestone-Release2.0
• Removed labels: Milestone-Release1.3

[GoogleCodeExporter]

As of 2014 Dynatree is feature frozen.
Please have a look at Fancytree (sequel of DynaTree 1.x): chances are good that 
the problem was resolved / the requested featuer is already implemented.
Please open a new issue there otherwise:

https://github.com/mar10/fancytree

Original comment by moo...@wwwendt.de on 1 May 2014 at 4:38

• Changed state: WontFix