Disable FancyTree's lazy load

Question

My application passes the entire tree hierarchy from PHP to Javascript via JSON. There are no AJAX calls, no lazy loading. However, what I'm finding is that I cannot actually disable the lazy load aspect of the list expanding method.

For example:

If this is the json passed from my PHP script:

[{
    "title": "Southeast",
    "key": 28,
    "children": [{
        "key": 2,
        "title": "North Carolina",
        "children": [{
            "key": 68,
            "title": "Charlotte"
        }, {
            "key": 69,
            "title": "Raleigh"
        }]
    }, {
        "key": 1,
        "title": "South Carolina",
        "children": [{
            "key": 1,
            "title": "Columbia"
        }, {
            "key": 2,
            "title": "Baldwin County"
        }, {
            "key": 3,
            "title": "Barbour County"
        }, {
            "key": 4,
            "title": "Bibb County"
        }]
    }]
},
{
    "title": "Northeast",
    "key": 32,
    "children": [{
        "key": 3121,
        "title": "Albany County",
        "children": [{
            "key": 3121,
            "title": "Albany County"
        }, {
            "key": 3122,
            "title": "Big Horn County"
        }]
    }, {
        "key": 3122,
        "title": "Big Horn County"
    }]
},
{
    "title": "Midwest",
    "key": 167
},
{
    "title": "Mid-Atlantic",
    "key": 31
},
{
    "title": "Southwest",
    "key": 166
}]

And I create the fancytree:

$('#tree').fancytree({
    source: 'php_script.php'
    extensions: ['edit']
});

I can't see the second or third level tiers even in the DOM until I actually click the expander next to the respective parent tiers (Southeast, Northeast, etc.) What I'd like to be able to do, is "see" the tiers in the DOM (inspector/console) BEFORE a click on the expanders. Any idea how to do this? I assume this has to do with lazy loading, however, I've tried the following:

$('#tree').fancytree({
...
lazyLoad: function(event, data) {
    return false; // I understand this is likely hack-ish, but it still didn't work
},

Or set the lazy property directly on each node with no luck:

[{
"title": "Southeast",
"key": 28,
"lazy":false,
"children": [{
    "key": 2,
    "lazy":false,
    "title": "North Carolina",
    "children": [{
        "key": 68,
        "lazy":false,
        "title": "Charlotte"
    }, {
        "key": 69,
        "lazy":false,
        "title": "Raleigh"
    }]
}
...

I've checked the nodes to ensure they're actually not lazy:

$('#tree').fancytree({
    'beforeExpand': function(event, data){
        console.log(data.node.isLazy());
    },
    'expand': function(event, data) {
        console.log(data.node.isLoaded());
    },
...

and in the console, I receive what I expected:

false
true

I understand that if the number of nodes begins becomes quite large, then NOT lazy loading them will begin to slow the page down. I also understand that I can force all of the nodes to load by triggering an expand on all nodes through this:

if(all) {
    $('#tree').fancytree('getTree').visit(function(node){
        node.setExpanded(expand);
    });
}

But it feels like there should be an easier way to do this. I want the entire DOM loaded, but immediately on fancytree instantiation. Any thoughts?

Answer 1

Lazy loading would issue an Ajax request to load child nodes on first expand (if the parent is marked lazy).

What you describe is lazy rendering: The complete model is already loaded, but Fancytree generates DOM elements on demand. In most cases this leads to much better user experience, because browsers tend to slow down when the number of DOM elements grows too large.
See also here for concepts.

However, if you want to render all nodes after load, have a look at the node.render() method:

$("#tree").fancytree({
  source: "php_script.php",
  extensions: ["edit"]
  init: function(event, data) {
    data.tree.getRootNode().render(true, true);
  },
  ...
});