TutorialEvents

About Fancytree event handlers.

Functionality can be added (and modified) by defining event handlers (i.e. callback functions).

Every event handler is passed a event and a data argument, that contain information about the event target.

Example:

  $("#tree").fancytree({
    ...
    activate: function(event, data){
      // A node was activated: display its title:
      var node = data.node;
      $("#echoActive").text(node.title);
    },
    beforeSelect: function(event, data){
      // A node is about to be selected: prevent this for folders:
      if( data.node.isFolder() ){
        return false;
      }
    }
  });

Some event handlers may return false to prevent default handling.
Return values other than true or false must be passed in the data.result property:

  $("#tree").fancytree({
    ...
    lazyLoad: function(event, data){
      data.result = [ {"title": "New child 1"}, {"title": "New child 2"} ];
    },
    ...
  });

An alternative way to define event handlers is to bind them later to an initialized tree. Note that the event name must be converted to lower case and prefixed with 'fancytree':

  $("#tree").on("fancytreebeforeselect", function(event, data){
    if( data.node.isFolder() ){
      return false;
    }
  });

For more information see also

• the online sample
• the complete list of available events
• and a description of the 'data' object.

To see the event sequence for different operations, open the online sample and have a look at the browser console.

Recipes

[Howto] Find out source and the clicked region in a click handler

$("#tree").fancytree({
  [...]
  click: function(event, data) {
    var node = data.node,
        // Only for click and dblclick events:
        // 'title' | 'prefix' | 'expander' | 'checkbox' | 'icon'
        targetType = data.targetType;

    // we could return false to prevent default handling, i.e. generating
    // activate, expand, or select events
  },
});

[Howto] Retrieve a FancytreeNode in an arbitrary event handler

A standard click event does not have a data argument, so we have to use helper functions.

$(document).click(function(event) {
  var node = $.ui.fancytree.getNode(event),
      // Only for click and dblclick events:
      // 'title' | 'prefix' | 'expander' | 'checkbox' | 'icon'
      tt = $.ui.fancytree.getEventTargetType(event);
});

[Howto] Add a hover handler for node titles

$("#tree").fancytree({
    ...
}).on("mouseenter,mouseleave", "span.fancytree-title", function(event){
  // Add a hover handler to all node titles (using event delegation)
  var node = $.ui.fancytree.getNode(event);
  node.info(event.type);
});