Global

Members

EventData :Object

Context object passed to events and hook functions.

Type:
  • Object
Properties:
Name Type Description
tree Fancytree

The tree instance

widget object

The jQuery UI tree widget

options FancytreeOptions

Shortcut to tree.options

originalEvent Event

The jQuery Event that initially triggered this call

node FancytreeNode | null

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

result any

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

targetType string | undefined

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

typeInfo object

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

response any

(only for postProcess event) Original ajax response

Source:

FancytreeEvents :Object

Events are called like this:
CALLBACK_NAME(event, data)
where event is a jQuery Event
object and data is of type EventData.

The this context is set to the tree's HTMLDivElement.

Type:
  • Object
Properties:
Name Type Description
activate function

data.node was activated

beforeActivate function

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

beforeExpand function

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

beforeRestore function

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

beforeSelect function

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

blur function

data.node lost keyboard focus

blurTree function

data.tree lost keyboard focus

click function

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.

clickPaging function

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

collapse function

data.node was collapsed

create function

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.

createNode function

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

dblclick function

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.

deactivate function

data.node was deactivated

defaultGridAction function

(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

enhanceTitle function

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

expand function

data.node was expanded

focus function

data.node received keyboard focus

focusTree function

data.tree received keyboard focus

iconClass function

@deprecated use tree option icon instead.

init function

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: if ext-persist is used, see also the restore event, which is fired later.

keydown function

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.

keypress function

(currently unused)

lazyLoad function

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).

loadChildren function

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

loadError function

A load error occurred. Return false to prevent default processing

modifyChild function

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().

postProcess function

Allows to modify the ajax response

removeNode function

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

renderColumns function

(used by table extension)

renderStatusColumns function

(used by table extension)

renderNode function

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

renderTitle function

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

restore function

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

select function

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

updateViewport function

ext-grid has redrawn the viewport.

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

Source:
See:
Example
$("#tree").fancytree({
    activate: function(event, data){
        var node = data.node;
    }
});

FancytreeOptions :Object

Fancytree options (see also example)

Type:
  • Object
Properties:
Name Type Description
activeVisible boolean

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

ajax object

Default options for ajax requests

aria boolean

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

autoActivate boolean

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

autoCollapse boolean

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

autoScroll boolean

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

checkbox boolean | string | function

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.

clickFolderMode Integer

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

columns object | array

Made available as tree.columns.

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

debugLevel Integer

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

defaultKey function

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

enableAspx boolean

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

escapeTitles boolean

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

extensions Array.<string>

List of active extensions (default: [])

focusOnSelect boolean

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

generateIds boolean

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

icon boolean | function

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.

icons boolean

@deprecated use icon instead

iconTooltip boolean | function

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.

idPrefix string

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

imagePath string

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

keyboard boolean

Support keyboard navigation (default: true).

keyPathSeparator string

(default: "/")

minExpandLevel Integer

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

nodata boolean | string | function

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

quicksearch boolean

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

scrollOfs object

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

scrollParent jQuery

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

selectMode Integer

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

source any

Used to Initialize the tree.

strings object

Translation table

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

tabbable boolean

@deprecated use tabindex instead

tabindex string

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.

titlesTabbable boolean

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

toggleEffect object

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

tooltip boolean | function

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)<br> Note: If a node has thenode.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.)

treeId string

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.

types object

Made available as tree.types.

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

unselectable boolean | function

(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.)

unselectableIgnore boolean | function

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

If defined, unselectable: true is implied.

unselectableStatus boolean | function

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

If defined, unselectable: true is implied.

Since:
  • 2.27
Source:
Example
$("#tree").fancytree({ source: { url: "/myService" } });

NodeData :Object

Data object passed to FancytreeNode() constructor.
Note: typically these attributes are accessed by class methods, e.g. node.isExpanded()
and node.setTitle("foo").

Type:
  • Object
Properties:
Name Type Description
active boolean

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

checkbox boolean | string

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.

children Array.<NodeData>

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.

data object

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

expanded boolean

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

extraClasses string

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

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

focus boolean

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

folder boolean

Folders have different default icons and honor the clickFolderMode option.

hideCheckbox boolean

@deprecated use checkbox instead.

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

icon boolean | string

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.

iconclass string

@deprecated use icon instead.

iconTooltip string

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.

key string

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

lazy boolean

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

refKey string

(Reserved, used by 'clones' extension.)

selected boolean

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

statusNodeType string

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

title string

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

tooltip string

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.

type string

Made available as node.type.

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

unselectable boolean

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.)

unselectableIgnore boolean

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

If defined, unselectable: true is implied.

unselectableStatus boolean

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

If defined, unselectable: true is implied.

OTHER any

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

Since:
  • 2.23
Source:

NodePatch :Object

Data object similar to NodeData, but with additional options.
May be passed to FancytreeNode#applyPatch
(Every property that is omitted (or set to undefined) will be ignored)

Type:
  • Object
Properties:
Name Type Description
any any

(see NodeData)

appendChildren NodeData

(not yet implemented)

replaceChildren NodeData

(not yet implemented)

insertChildren NodeData

(not yet implemented)

Source:

TreePatch :Object

List of [key, NodePatch] tuples.
May be passed to Fancytree#applyPatch.

Type:
  • Object
Source:

Fork me on GitHub