Example: Selection and checkbox

This tree has checkoxes and selectMode 1 (single-selection) enabled.
A double-click handler selects a document node (not folders).
A keydown handler selects on [space].
The checkbox icons are replaced by radio buttons by adding the 'fancytree-radio' class to the container.
Note: the initialization data contains multiple selected nodes. This is considered bad input data and not fixed automatically (only on the first click).

Skin:

Active node: -

Selection: -

This tree has selectMode 2 (multi-selection) enabled.
A single-click handler selects the node.
A keydown handler selects on [space].

Select all - Deselect all - Toggle select

Selected keys: -

This tree has checkoxes and selectMode 3 (hierarchical multi-selection) enabled.
A double-click handler selects the node.
A keydown handler selects on [space].

Selected keys: -

Selected root keys: -

Selected root nodes: -

This tree has selectMode 2 (multi-selection) enabled, but no checkboxes.
A single-click handler selects the node.
A keydown handler selects on [space].
A double-click handler expands documents.
A onQuerySelect handler prevents selection of folders.

Selected keys: -

jquery.fancytree.js project home Link to this page Example Browser View source code