CODEWITHSUNDEEP
jqueryfancytree
SQL and Java Learner
SQL and Java Learner

Reputation: 731

Node does not expand with data from lazyLoad callback

I'm running into an issue where I am getting JSON data returned from my ajax call, but when I set the data equal to the data.result in the lazyLoad callback, the data is not inserted into the tree.

    var values = [];
    //This call returns a var 'value' which contains the data I want to display.
    CallToGetData(databaseTree).done(function (value) {
    values = value;
    var treeStruc = [];
    //Grab only the necessary info needed and push each objective into an array.
    for (var j = 0; j < values.length; j++) {
        var obj = { title: values[j].Path, key: values[j].Id, lazy: true }; //folder: true, children: []
        treeStruc.push(obj);
    }
    $(function () {
         $("#tree").fancytree({
             checkbox: true,
             selectMode: 3,
             source: treeStruc, //Set the array above to the source.
             lazyLoad: function (event, data) {
                  data.result = [];
                  //This call returns a var 'value' which contains the data I want to display.
                  CallToGetData(databaseTree, data.node.title).done(function (value) {
                      var lazyNodeValues = [];
                      for (var l = 0; l < value.length; l++) {
                          var obj = { title: value[l].Path, key: value[l].Id, lazy: true }; //folder: true
                          lazyNodeValues.push(obj);
                      }
                      //Currently lazyNodeValues contains to objects that I want to display.
                      data.result = lazyNodeValues;//THIS ASSIGNMENT IS WHAT ISN'T WORKING.
                  });
             },
             activate: function (event, data) {
             $("#statusLine").text("Active node: " + data.node);
             }
        });
     });//End of $function       
});//End of CallToGetData

On the initial population of the tree, the var 'treeStruc' contains an array of objects with the format of this:

title: 'Value that I set', key: 'Id that I set', lazy: true.

This fills of the tree perfectly. When I click lazy load, I make another call to get more JSON data to fill the child nodes. They have a structure that is exactly the same, yet when I click a row, nothing gets populated below the row I select. Is there something that I am missing? Any help would be great!

Upvotes: 0

Views: 395

Answers (1)

SQL and Java Learner
SQL and Java Learner

Reputation: 731

From the documentation I found this. Create you deferred object, set the data.result to the promise, go get the data that you want to nest in the children and resolve the data that you want to place in the children.

var dfd = new $.Deferred();
data.result = dfd.promise();

CallToGetData(data.node.title).done(function (value) {
      var lazyNodeValues = [];

      for (var l = 0; l < value.length; l++) {
      var obj = { title: value[l].Path, key: value[l].Id, lazy: true }; 
      lazyNodeValues.push(obj);
      }
      dfd.resolve(lazyNodeValues);
});

Upvotes: 1

Related Questions