Previous Page / Control Center Title
Initialization options Data type and data source options
Current example demonstrates multi level file tree with default options, initialized from an <ul>
element.
- Menu item with key and tooltip
- Collapsed folder
- Sub-item 1.1
- Sub-item 1.2
- This is a selected item
- Active sub-item (active and focus on init)
- Basic menu item with HTML support
- Collapsed sub-item
- Menu item with key and tooltip
- Collapsed folder
- This is a selected item
- Document sub-item
- Another document sub-item
To embed JSON data in the markup, specify data type via data-type
attribute and hide is using .hidden
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='text-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"}
]}
]}
]
- Active sub-item (active and focus on init)
- Basic menu item with HTML support
- Expanded sub-item
- Menu item with key and tooltip
- Collapsed folder
- This is a selected item
- Document sub-item
- Another document sub-item
Selectable nodes Single an multiple selections
Hierarchical multi selection example. A single-click handler selects the node; a keydown handler selects on space.
- Menu item with key and tooltip
- Collapsed folder
- Sub-item 1.1
- Sub-item 1.2
- Basic menu item with HTML support
- Menu sub-item
- This is a selected item
- Collapsed sub-item
- Menu item with key and tooltip
- Collapsed folder
- Basic menu item with HTML support
- Document sub-item
- Another document sub-item
Various examples Fancytree examples with options
This example demonstrates a sorting
feature of child list by title in 2 ways: full tree and in active nodes only.
- This is a selected item
- Collapsed folder
- Sub-item 1.1
- Sub-item 1.2
- Document sub-item
- Another document sub-item
- Active sub-item (active and focus on init)
- Basic menu item with HTML support
- Collapsed sorting node
- This is a selected item
- Collapsed folder
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 | |
---|---|---|---|---|
Loading… |