TutorialApi

About Fancytree API.

Fancytree exposes an extensive, object oriented interface to query and manipulate the data model. 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.

You find a complete overview in the Fancytree API Reference.

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

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

See also the list of static functions.

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

// Get or set an option (note: tree.getOption() is the preferred method)
var autoScroll = $("#tree").fancytree("option", "autoScroll");
$("#tree").fancytree("option", "autoCollapse", true);
// Disable the tree
$("#tree").fancytree("disable");
// Get the Fancytree instance for a tree widget
var tree = $.ui.fancytree.getTree("#tree");

See also the list of widget methods.

Note: Widget methods are deprecated and can mostly be replaced by native API calls:

// Get the Fancytree instance
var tree = $.ui.fancytree.getTree("#tree");
var autoScroll = tree.getOption("autoScroll");
tree.setOption("autoCollapse", true);
tree.setEnabled(false);

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 = $.ui.fancytree.getTree("#tree");
// 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
var tree = $.ui.fancytree.getTree("#tree");
var node = tree.getActiveNode();
// Use the API
node.setTitle("New title");

$("#tree").fancytree({
  ...
  activate: function(event, data){
    // A node was activated: display its title:
    var tree = data.tree,
        node = data.node;
    $("#echoActive").text(node.title);
  },
});

See also the list of FancytreeNode methods

Additional information:

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

Recipes

[Howto] Rename or redraw a node

  var tree = $.ui.fancytree.getTree("#tree");
  var node = tree.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 = $.ui.fancytree.getTree("#tree"),
      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
  }).always(function(){
    // The 'always' function is always called.
  });

[Howto] Traverse all nodes recursively

  var tree = $.ui.fancytree.getTree("#tree");

  // Expand all tree nodes
  tree.visit(function(node){
    node.setExpanded(true);
  });

[Howto] Add child nodes

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

  activeNode.addChildren({
    title: "Document using a custom icon",
    icon: "customdoc1.gif"
  });