HTML not populated unless clicked

Question

I create a fancytree object very simple, for the sake of the explanation it has just one node and 4 children, just one level and I don't use lazyLoad.

In the code at runtime I see that until I don't click on the node to expand it, the html code of the children is not there, it's in the javascript init part of FancyTree lib. Once the node is opened or closed the html of the childern is there with differenct css class to hide/show them obviously.

I know that I can force to let the nodes visible once loaded the tree, but I need to have them closed, and with all the children already populated in the html. I think I can parse all the node and open and close them, but I 'm wondering if there is a better solution.

Here a simple example:

 SOURCE = [
    {title: "node 1", folder: true, expanded: true, children: [
      {title: "node 1.1", foo: "a"},
      {title: "node 1.2", foo: "b"}
     ]},
    {title: "node 2", folder: true, expanded: false, children: [
      {title: "node 2.1", foo: "c"},
      {title: "node 2.2", foo: "d"}
     ]}
  ];
    $("#tree").fancytree({
        clickFolderMode: 2,
        selectMode: 1,
        keyboard: false,
        source: SOURCE
    });

At the moment I come up with this workaround:

First I open all the nodes:

var tree = $("#tree").fancytree("getTree");
tree.visit(function (node) {
    node.setExpanded(true);
});

Then I close them:

  tree.visit(function (node) {
    node.setExpanded(false);
});

score 1 · Accepted Answer · answered Dec 16 '17 at 11:18

1

Fancytree renders html elements only on demand. You can use

tree.render(true, true);

to force this. See here for details.

answered Dec 16 '17 at 11:18

mar10

14,320
5
39
64

HTML not populated unless clicked

1 Answers1