Expanding a fancyTree via lazy load

Question

I have set up my fancytree to open via lazy loading, and it works very nicely.

$("#tree").fancytree({
        selectMode: 1, quicksearch:true, minExpandLevel:2,
        autoScroll: true,
        source: [{
            title: "Root",
            key: "1",
            lazy: true,
            folder: true
        }],
        lazyLoad: function(event, data) {
            var node = data.node;
            data.result = {
                url: "getTreeData.jsp?parent=" + node.key,
                data: {
                    mode: "children",
                    parent: node.key
                },
                cache: false
            };
        }


    });

However, if a user has previously selected a point on the tree, I would like the tree to open to that point. I have a variable called hierarchy which looks like "1/5/10/11/200" and holds the sequence of keys to that certain point.

The following will not work:

$("#tree").fancytree("getTree").getNodeByKey("1").setExpanded();
$("#tree").fancytree("getTree").getNodeByKey("5").setExpanded();
$("#tree").fancytree("getTree").getNodeByKey("10").setExpanded();
$("#tree").fancytree("getTree").getNodeByKey("11").setExpanded();
$("#tree").fancytree("getTree").getNodeByKey("200").setExpanded();

The reason why it will not work, apparently, is because there needs to be some delay between one statement and the next.

The following code works, however it is in my mind messy:

function openNode(item) {

   $("#tree").fancytree("getTree").getNodeByKey(String(item)).setExpanded();
}

function expandTree(hierarchy) {
  var i=0;
  hierarchy.split("/").forEach(function (item) {
  if (item!="") {
     i++;
     window.setTimeout(openNode, i*100,item);
  }
});

Is there any neater way of opening to a specific point on the tree?

score 0 · Accepted Answer · answered Jan 17 '18 at 14:59

The following code seems to do the trick.

It was adapted from

http://wwwendt.de/tech/fancytree/doc/jsdoc/Fancytree.html#loadKeyPath

function expandTree(hierarchy) {
    $('#tree').fancytree("getTree").loadKeyPath(hierarchy).progress(function(data) {
        if (data.status === "loaded") {
            console.log("loaded intermediate node " + data.node);
            $('#tree').fancytree("getTree").activateKey(data.node.key);
        } else if (data.status === "ok") {}
    }).done(function() {});
}

Expanding a fancyTree via lazy load

1 Answers1