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.

The API functions and properties are exposed by different interfaces:

• Static methods in the $.ui.fancytree namespace.
• Widget methods on the Fancytree jQuery widget instance.
• Tree methods on the Fancytree object instance.
• Node methods on the FancytreeNode object instances.

Static functions and properties are directly available from the $.ui.fancytree namespace:

alert($.ui.fancytree.version);
var node = $.ui.fancytree.getNode(event);

Widget methods and properties require a jQuery Widget instance. They are called using the special .fancytree(COMMAND) syntax:

// Get or set an option
var as = $("#tree").fancytree("option", "autoScroll");
$("#tree").fancytree("option", "autoCollapse", true);
// Disable the tree
// Get the Fancytree instance for a tree widget
var tree = $("#tree").fancytree("getTree");

See also the list of widget methods.

We can get all Fancytree widgets using a special selector:

var $allTrees = $(":ui-fancytree");
$allTrees.fancytree("disable");

Tree methods and properties require a Fancytree object instance:

// Get the Fancytree instance
var tree = $("#tree").fancytree("getTree");
// Use the API
alert("We have " + tree.count() + " nodes.");
tree.reload();

See also the list of Fancytree methods

Node methods and properties require a FancytreeNode object instance. Node objects are returned by many functions or passed as argument to event handlers.

// Get a FancytreeNode instance
node = $("#tree").fancytree("getActiveNode");
// Use the API
node.setTitle("New title");

See also the list of FancytreeNode methods

Recipes

[Howto] Rename or redraw a node

  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] Call asynchrous methods

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");
  }).fail(function(){
    // The 'fail' function is called on error, or if the node could not 
    // be expanded when it is empty
  }).always(function(){
    // The 'always' function is always called.
  });

[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"
  });