#### Extra - Dynamic Trees

Statistics Invoices Schedule

###### 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

Select all

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

Disable tree

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