TutorialApi

About Fancytree API.

Fancytree exposes an extensive, object oriented interface to query and manipulate the data model.

Additional information:

• Have a look at the API Reference for details, especially Fancytree methods and FancytreeNode methods.
• See the demo page.

Recipes

[Howto] Call asynchrous methods

Fancytree returns jQuery deferreds / promises for most asynchronous methods:

  var node = $("#tree").fancytree("getActiveNode");
  // set the 'selected' status and update the display:
  node.setSelected(true);
  // changing other attributes may require explicit rendering:
  node.title = node.title + "_copy";
  node.tooltip = "new";
  node.selected = true;
  node.render();

[Howto] Rename or redraw a node

Fancytree returns jQuery deferreds / promises for most asynchronous methods:

  var tree = $("#tree").fancytree("getTree"),
      activeNode = tree.getActiveNode();

  activeNode.setExpanded(true).done(function(){
    // The 'done' function is called after the expansion animation finished.
    alert("Node was expanded");
  });

[Howto] Traverse all nodes recursively

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

[Howto] Add child nodes

  var activeNode = $("#tree").fancytree("getActiveNode");
    
  activeNode.addChildren({
    title: "Document using a custom icon",
    icon: "customdoc1.gif"
  });