Global

The tree instance

The jQuery UI tree widget

Shortcut to tree.options

The jQuery Event that initially triggered this call

The node that this call applies to (null for tree events)

(output parameter) Event handlers can return values back to the caller. Used by lazyLoad, postProcess, ...

(only for click and dblclick events) 'title' | 'prefix' | 'expander' | 'checkbox' | 'icon'

Contains tree.types[node.type] (or {} if node does not have a type). @since 2.27

(only for postProcess event) Original ajax response

data.node was activated

data.node is about to be (de)activated. Current status is data.node.isActive(). Return false to prevent default processing.

data.node is about to be collapsed/expanded. Current status is data.node.isExpanded(). Return false to prevent default processing.

ext-persist is about to restore the previous state. Return false to prevent default processing.

data.node is about to be (de)selected. Current status is data.node.isSelected(). Return false to prevent default processing.

ext-grid is about to redraw the tree.viewport.

data.next: viewport settings that will be applied.

data.diff: changes to the current tree.viewport, e.g. start offset.

data.reason: a string describing the type of change.

data.scrollOnly: true if only the start value has changed.

Modify next or return false to prevent default processing.

data.node lost keyboard focus

data.tree lost keyboard focus

data.node was clicked. data.targetType contains the region ("checkbox", "expander", "icon", "prefix", "title"). Return false to prevent default processing, i.e. activating, expanding, selecting, etc.

data.node is a 'paging' status node and was activated. Use data.node.replaceWith() to load additional nodes.

data.node was collapsed

Widget was created.

Source data may not be loaded or rendered yet:
see also the init event, which is fired later.

Note: called only once, but not when re-initialized.

Allow tweaking and binding, after node was created for the first time (NOTE: this event is only available as callback, but not for bind())

data.node was double-clicked. data.targetType contains the region ("checkbox", "expander", "icon", "prefix", "title"). Return false to prevent default processing, i.e. expanding, etc.

data.node was deactivated

(used by ext-aria) The user hit enter on the active row or cell.

data.activeTd contains the currently active <td> element or null

data.colIdx contains the 0-based column index or -1

Allow extending the <span class='fancytree-title'> markup, for example by adding badges, ... (NOTE: this event is only available as callback, but not for bind())

data.node was expanded

data.node received keyboard focus

data.tree received keyboard focus

@deprecated use tree option icon instead.

Widget was (re-)initialized.

The tree widget was initialized, source data was loaded, visible nodes are rendered,
selection propagation applied, and node activated.

data.status is false on load error.

Note: preInit is fired before nodes are loaded.

Note: if ext-persist is used, see also the restore event, which is fired later.

data.node received key. event.which contains the key. Return false to prevent default processing, i.e. navigation. Call data.result = "preventNav"; to prevent navigation but still allow default handling inside embedded input controls.

(currently unused)

data.node is a lazy node that is expanded for the first time. The new child data must be returned in the data.result property (see source option for available formats).

Node data was loaded, i.e. node.nodeLoadChildren() finished

A load error occurred. Return false to prevent default processing.

A child of data.node was added, removed, or otherwise modified

data.operation contains 'add', 'remove', 'rename', 'move', 'sort', 'data'

data.childNode contains the new, deleted, or modified child node if applicable

Note that this event is not necessarily fired for each single deleted or added node, when a hierarchy. was modified.

This event is only available as callback, but not for bind().

Allows to modify the ajax response

Widget markup was created, but no data loaded yet.

@deprecated use modifyChild with operation: 'remove' instead.

(used by table extension)

(used by table extension)

Allow tweaking after node state was rendered (NOTE: this event is only available as callback, but not for bind())

Allow replacing the <span class='fancytree-title'> markup (NOTE: this event is only available as callback, but not for bind())

ext-persist has expanded, selected, and activated the previous state

data.node was (de)selected. Current status is data.node.isSelected()

ext-grid has redrawn the tree.viewport.

data.prev: viewport settings that were active before this update.

data.diff: changes to the current tree.viewport, e.g. start offset.

data.reason: a string describing the type of change.

data.scrollOnly: true if only the start value has changed.

Make sure that the active node is always visible, i.e. its parents are expanded (default: true).

Default options for ajax requests

(default: true) Add WAI-ARIA attributes to markup

Activate a node when focused with the keyboard (default: true)

Automatically collapse all siblings, when a node is expanded (default: false).

Scroll node into visible area, when focused by keyboard (default: false).

Display checkboxes to allow selection (default: false).

Note that selection via the API or initialization data is still possible.

true: display a checkbox in front of the node

false: no checkbox (default)

"radio": display a radio button in front of the node. This does not modify the selection behavior.

function(event, data): callback returning true, false, or a string.

NOTE: changed with v2.23.

Hide checkboxes unless selected or hovered.

This mimics Windows File Explorer 'Use check boxes to select items' mode.

(default: false, requires checkboxes enabled).

Defines what happens, when the user click a folder node.
1:activate, 2:expand, 3:activate and expand, 4:activate/dblclick expands (default: 4)

Made available as tree.columns.

Recommended place to store shared data for column rendering.
See also table extension.

Copy also functions to the node's data property (default: false)

0..4 (null: use global setting $.ui.fancytree.debugLevel)

callback(node) is called for new nodes without a key. Must return a new unique key. (default null: generates default keys like that: "_" + counter)

Accept passing ajax data in a property named d (default: true).

Make sure all HTML tags are escaped (default: false).

List of active extensions (default: [])

Set focus when node is checked by a mouse click (default: false)

Add id="..." to node markup (default: false).

The id is constructed from options.idPrefix + node.key, e.g. id="ft_1234".

Display node icons (default: true)

true: use default icons, depending on node.folder and node.expanded

false: hide icons

function(event, data): callback returning true, false, object, or a string.

NOTE: changed with v2.14.

See also dynamic options.

See the node option of the same name for an explanation of possible string values.

@deprecated use icon instead

Add a title attribute to the node's icon span markup,
thus enabling a tooltip (default: false).

See tree.tooltip option for details.
See also dynamic options.

prefix used to generate node markup ID attributes (default: "ft_", requires generateIds to be set)

Path to a folder containing icons (default: null, using 'skin/' subdirectory).

Support keyboard navigation (default: true).

(default: "/")

2: top-level nodes are not collapsible (default: 1)

Display a special message when the tree loader
returned no data (default: true)

navigate to next node by typing the first letters (default: false)

optional margins for node.scrollIntoView() (default: {top: 0, bottom: 0})

scrollable container for node.scrollIntoView() (default: $container)

1:single, 2:multi, 3:multi-hier (default: 2)

Used to Initialize the tree.

Translation table

default: {loading: "Loading...", loadError: "Load error!", moreData: "More...", noData: "No data."}

@deprecated use tabindex instead

Add tabindex attribute to container, so tree can be reached using TAB (default: "0")

"0": Tree control can be reached using TAB keys

"-1": Tree control cannot be reached using TAB keys, but may receive keyboard focusable using mouse clicks or JavaScript

"": Tree control is not tabbable nor may it receive keyboard focus.

Add tabindex='0' to node title span, so it can receive keyboard focus

Animation options, false:off
(default: { effect: "slideToggle", duration: 200 })

Add a title attribute to the node's title span markup,
thus enabling a tooltip (default: false).

false: No automatic tooltip (but still honor node.tooltip attribute)

true: Use node.title as tooltip

function: A callback(event, data)

Note: If a node has the node.tooltip attribute set, this will take precedence.

See also dynamic options.

Note: If a separate tooltip widget is used, it may be more efficient to use that widget
API instead, instead of duplicating tree markup.
(For example jQuery UI Tooltip.)

optional fixed tree id and namespace (default: null)

By default, the tree._id is an integer, starting as 1 and automatically
incremented every time a new Fancytree is instantiated.

The tree._id is used to define the hidden root node's id, persistence keys, form control ids,
and can be passed to $.ui.fancytree.getTree().

Also, tree._ns is calculated as ".fancytree-" + tree._id and used for namespaced events.

Made available as tree.types.

Shared data for nodes with the same node.type attribute.
See also node types.

(dynamic option)
Prevent (de-)selection using mouse or keyboard.

Note: This node can still be (de)selected by status propagation in selectMode 3.
(Set unselectableStatus to prevent this.)

(dynamic option)
Ignore this node when calculating the partsel status of parent nodes in selectMode 3 propagation.

If defined, unselectable: true is implied.

(dynamic option)
Use this as constant selected value (overriding selectMode 3 propagation).

If defined, unselectable: true is implied.

Evaluated during initialization: If true, node.setActive() is called after loading.

Pass false to remove checkbox for this node.

Note that selection via the API or initialization data is still possible, even
if no checkbox is displayed.

undefined: Use global tree option of the same name

true: display a checkbox

false: hide checkbox

"radio": display a radio button (this does not have any effect on the selection behavior)

This is a Dynamic Option:
see also the global tree option of the same name.

Optional array of child nodes.

Note that for lazy nodes, a value of null or undefined is interpreted as
not yet loaded; if an array is passed (even an empty one), the
node is considered loaded which will effectively disable the
lazy-behavior.

All unknown properties from constructor will be copied to node.data.

Initial expansion state. Use node.setExpanded() or node.isExpanded() to access.

Class names added to the node markup (separate with space).

Note: use node.add/remove/toggleClass() to modify.

(Initialization only, but will not be stored with the node.)

Folders have different default icons and honor the clickFolderMode option.

@deprecated use checkbox instead.

(The 'hideCheckbox' class name is still recognized when html source input is parsed.)

Define this node's icon.

undefined: Use global tree option of the same name

true: Use default icon, depending on node.folder and node.expanded status

false: Hide icon

Object: Dict of options, e.g. {text: 'check_box', addClass: ''}, useful for
ligature fonts like Material.

String: A string value that contains a '/' or a '.' is used as src attribute for a <img> tag.
(See also the global imagePath option.)

Any other string value is used to generate custom tags, e.g. for "ui-icon ui-icon-heart":

<span class="fancytree-custom-icon ui-icon ui-icon-heart" />.

See also dynamic options.

@deprecated use icon instead.

Will be added as title attribute of the node's icon span,
thus enabling a tooltip.

NOTE: Passing a tooltip string per node is probably very inefficient, assuming the
same data would be passed for every node of the same type: Consider using
the tree.types pattern.

See also the global tree.iconTooltip option.

Unique key for this node (auto-generated if omitted).

Lazy folders call the lazyLoad on first expand to load their children.

(Reserved, used by 'clones' extension.)

Initial selection state. Use node.setSelected() or node.isSelected() to access.

If set, make this node a status node. Values: 'error', 'loading', 'nodata', 'paging'.

Node text (may contain HTML tags). Use node.setTitle() to modify.

Will be added as title attribute of the node's title span,
thus enabling a tooltip.

NOTE: Passing a tooltip string per node would be inefficient, if it can be constructed
from existing node data. Consider using the callback instead:

See also the global tree.tooltip option.

Made available as node.type.

Should match an tree.types entry.
See also node types.

Prevent (de-)selection using mouse or keyboard.

Note: This node can still be (de)selected by status propagation in selectMode 3.
(Set unselectableStatus to prevent this.)

Ignore this node when calculating the partsel
status of parent nodes in selectMode 3 propagation.

If defined, unselectable: true is implied.

Use this as constant selected value
(overriding selectMode 3 propagation).

If defined, unselectable: true is implied.

Attributes other than listed above will be copied to node.data.

(see NodeData)

(not yet implemented)

(not yet implemented)

(not yet implemented)