Automatically load node children in fancytree

Question

I have a fancytree implementation where each parent node has a child node that can be selected. After a user selects specific children, she is able to save her selections and settings so that she can come back to it later.

I'm able to do all of this, except for when I do an initial load of previously saved data. What I need to do is identify the nodes that need to be opened (and its children selected), and have Fancytree open those nodes and select the children.

I'm using lazy loading, and when the lazyloading event fires I'm able to check to see if the child needs to be selected and do so as needed. What I'd like to be able to do is programmatically do the same thing so that all the previously selected children are loaded and selected upon load. Currently, I'm attempting this in this way:

function getMultipleFieldsNoReset(element,selectedFieldsArray) {
    var fieldCreator = element.value;
    var tree = $("#multipleFields").fancytree("getTree");

    var treeOptions = {
        url: "urltogetdata",
        type: "POST",
        data: {
            id: fieldCreator
        },
        dataType: "json"
    };
    tree.reload(treeOptions);


    for (var i = 0, len = selectedFieldsArray.length; i < len; i++) {
        var valueAry = selectedFieldsArray[i].split("-");
        var growerNode = valueAry[0];
        var farmNode = valueAry[1];
        var fieldNode = valueAry[2];

        var node = tree.getNodeByKey(growerNode);

        console.log(node);
    }
}

My problem is that tree.getNodeByKey(growerNode) never finds the node, even though I'm able to find the node in the console after this runs. It seems like the parent nodes aren't loaded yet, which can cause this issue, but I'm not certain where I can set a complete function. Where can I do this? Or even better, is there a cleaner way to handle this?

How you achieved this? I've same issue. Actually I am able show previously saved records but my issue when I try to add more tree values without previously opened I loses my previously saved data. Because I am deleting previous records and creating new, I am using Django at backend (that's really doesn't matter) — Anup Yadav, Feb 08 '18 at 13:27
I was able to get this going by using the LoadChildren event. This gets fired whenever a load occurs. I keep track of items that were previously selected on the back end. Whenever someone reloads the page, upon load I provide all the items that were check-marked last time. Then, when a node is opened I check against my list to see if their check-mark status. This gives the illusion that the items were loaded as check-marked. — Fletchius, Feb 12 '18 at 18:17
Awesome Fletchius, Thanks a lot, I was struggling from last week and now I could solve the issue only because of your answer, please post your answer as well and accept, I am adding my answer this may helpful for someone in future. — Anup Yadav, Feb 13 '18 at 06:41

score 2 · Accepted Answer · answered Feb 13 '18 at 06:46

The OP / Fletchius has got solution on this issue and below is the answer of it. I achieved it in some different way but event loadChildren is the same. from which we both found solution. Just I'm loading those nodes which are selected nodes and lazy true meaning there are children down after this node. And only lazy=true can be useful for this.load(); explicit event.

loadChildren:function(event, data){
    var node = data.node;
    $(node.children).each(function(){
        if(this.selected && this.lazy)
        {
            this.load();
        }
    });
},

Automatically load node children in fancytree

1 Answers1