Victoria Baker
Senior developer

Extra - Dynamic Trees

Statistics Invoices Schedule
Home Extra Dynamic trees
Support
Settings
Account security Analytics Accessibility
All settings
Initialization options
Data type and data source options
Unordered list markup

Current example demonstrates multi level file tree with default options, initialized from an <ul> element.

  • Expanded folder with children
    • Expanded sub-item
      • Active sub-item (active and focus on init)
      • Basic menu item with HTML support
    • Collapsed sub-item
      • Sub-item 2.2.1
      • Sub-item 2.2.2
  • Menu item with key and tooltip
  • Collapsed folder
    • Sub-item 1.1
    • Sub-item 1.2
  • This is a selected item
  • Document with some children (expanded on init)
    • Document sub-item
    • Another document sub-item
      • Sub-item 2.1.1
      • Sub-item 2.1.2
Load JSON data

In this example multi level file tree initialized from JSON data type and attached to <div> block element.

Embed JSON data

To embed JSON data in the markup, specify data type via data-type attribute and hide it using .d-none class.

[ {"title": "Expanded folder with children", "expanded": true, "folder": true, "children": [ {"key": "1_2", "title": "Expanded sub-item", "expanded": true, "children": [ {"key": "1_2_1", "title": "Active sub-item (active and focus on init)", "active": true, "focused": true}, {"key": "1_2_2", "title": "Basic <i>menu item</i> with <strong class='font-weight-semibold'>HTML support</strong>"} ]}, {"key": "1_3", "title": "Expanded sub-item", "children": [ {"key": "1_3_1", "title": "Sub-item 2.2.1"}, {"key": "1_3_2", "title": "Sub-item 2.2.2"} ]} ]}, {"key": "2", "title": "Menu item with key and tooltip", "extraClasses": "has-tooltip", "tooltip": "Look, a tool tip!"}, {"key": "3", "title": "Collapsed folder", "folder": true, "children": [ {"key": "3_1", "title": "Sub-item 1.1"}, {"key": "3_1", "title": "Sub-item 1.2"} ]}, {"key": "4", "title": "This is a selected item", "selected": true}, {"key": "5", "title": "Document with some children (expanded on init)", "expanded": true, "children": [ {"key": "5_1", "title": "Document sub-item"}, {"key": "5_2", "title": "Another document sub-item", "children": [ {"key": "5_2_1", "title": "Sub-item 2.1.1"}, {"key": "5_2_2", "title": "Sub-item 2.1.2"} ]} ]} ]
Drag and drop support

Fancytree supports drag'n'drop of tree nodes and behave like a standard jQuery UI draggable and droppable.

Selectable nodes
Single an multiple selections
Multiple select

This tree has multi selection enabled: a single-click handler selects the node; a keydown handler selects on space.

Disable selection

You can turn off a node selection by adding .hideCheckbox class to it or disable it using .unselectable class.

  • Expanded folder with children
    • Expanded sub-item
      • Active sub-item (active and focus on init)
      • Sub-item with hidden checkbox
    • Collapsed sub-item
      • Sub-item 2.2.1
      • Sub-item 2.2.2
  • Menu item with hidden checkbox
  • Collapsed folder with hidden checkbox
    • Sub-item 1.1
    • Sub-item 1.2
  • This is an unselectable checkbox
  • Document with some children (expanded on init)
    • Checked unselectable document sub-item
    • Another document sub-item
      • Sub-item 2.1.1
      • Sub-item 2.1.2
Tree persistence

Store and restore tree status using cookies or local storage: click, expand or select nodes and reload the page.

Toggle checkboxes state

Change checkboxes state programmatically using setSelected() parameter with true or false properties.

Hierarchical select

Hierarchical multi selection example. A single-click handler selects the node; a keydown handler selects on space.

  • Expanded folder with children
    • Expanded sub-item
      • Menu sub-item
      • This is a selected item
    • Collapsed sub-item
      • Sub-item 2.2.1
      • Sub-item 2.2.2
  • Menu item with key and tooltip
  • Collapsed folder
    • Sub-item 1.1
    • Sub-item 1.2
  • Basic menu item with HTML support
  • Document with some children (expanded on init)
    • Document sub-item
    • Another document sub-item
Single select

Single select example: a double-click handler selects a document node; a keydown handler selects on space.

Various examples
Fancytree examples with options
Editable nodes

Node titles can be changed via inline editing using dblclick, Shift + click [F2] or Enter (on Mac only).

Child counter

The following example demonstrates optional tiny badges that display count of children elements at parent node.

Toggle state

This example demonstrates the usage of some Fancytree API functions, such as disabling and enabling file tree.

Tree sorting

This example demonstrates a sorting feature of child list by title in 2 ways: full tree and in active nodes only.

  • Document with some children (expanded on init)
    • Document sub-item
    • Another document sub-item
      • Sub-item 2.1.1
      • Sub-item 2.1.2
  • Expanded folder with children
    • Expanded sub-item
      • Active sub-item (active and focus on init)
      • Basic menu item with HTML support
    • Collapsed sorting node
      • Sub-item 2.2.1
      • Sub-item 2.2.2
    • Another sortable node
  • This is a selected item
  • Collapsed folder
    • Sub-item 1.1
    • Sub-item 1.2
Table tree
The following example demonstrates rendered tree as a table (aka tree grid) and support keyboard navigation in a grid with embedded input controls. Table functionality is based on Fancytree's table.js extension. The tree table extension takes care of rendering the node into one of the columns. Other columns have to be rendered in the renderColumns event.
# Items Key Like