How to add custom child nodes on an initilized fancytree

Question

I have a json response that is parsed through js & made as ul,li tags in javascript. I will then call .fancytree to make these ul li into a fancytree structure.

Now I requirement of clicking an icon within an li element. This click does an ajax call, gets a json response. All that I need to do is add this DOM to existing li tags.

Fancytree removes all my custom classes & builds something of its own. Is there anyway I can fix my problem.

Regards Sarath

I'm thinking your Javascript doesn't need to create HTML elements; it ought to be able to use FancyTreeNode methods and attributes to achieve the same results in a much easier manner. Maybe that's what caused your problem? — Sheldon R., Feb 18 '15 at 21:55

score 1 · Answer 1 · answered Mar 09 '15 at 21:09

To add your custom css classes please use the API of fancytree. In the demo you have two ways to make that:

$("#tree").fancytree({
  // you can use the node property 'extraClasses' like this.
  source: [
    {title: "Node 1", key: "1", extraClasses="css-class-1 css-class2"},
    {title: "Folder 2", key: "2", extraClasses="css-class-1 css-class2", folder: true, children: [
      {title: "Node 2.1", key: "3", extraClasses="css-class-1 css-class2"},
      {title: "Node 2.2", key: "4", extraClasses="css-class-1 css-class2"}
    ]}
  ],

  // or you can customize your node on the rendering.
  renderNode: function(event, data){
    var node = data.node;
    $(node.span).addClass("css-class-1 css-class2");
  }
};

How to add custom child nodes on an initilized fancytree

1 Answers1