For Dashboard Designers Reference TreeView
Monday, February 25, 2019 10:27 AMTreeView
Labels: :IA_Function:IA_TreeView
Inherits from: Function and View
The TreeView Function renders data in a collapsible tree view from given source (list or tree) using jqxTree from jqWidgets. Optionally, items can have checkboxes for multple selection.
In the source data (#list
parameter) a child element can appear multiple times (with the same id) and reference different parents.
Looped referencing is not supported (a → b → a or a → b → c → a or a → b → c → b).
Function parameters
Key | Description | Default value | Possible values |
---|---|---|---|
area |
The area in which the View is rendered. | content | content|sidebar-right|sidebar_left |
config |
Configuration settings for jqxTree widget (from jqxTree documentation) | null |
|
keyFor |
Key mapping for input records if they do not have the required format | ||
items |
Source data in item format | array | |
tree |
Source data in tree format | array | |
search |
String to search in the tree. Tree branches will collapse and matching elements will be highlighted | null |
Input format
Input can be passed to TreeView through either of two parameters: items
or tree
. Both take an array of items, each
item differing only in whether they contain a list of children (tree
), or contain the identifier of their parent (items
).
Each item should have the following structure:
Key | Type | Description |
---|---|---|
id | string/number | (Required) Identifier within the tree. |
label | string | (Required) Label for this item to be shown in the tree. |
parentId | string | (For items parameter) The identifier of the parent item. |
items | array | (For tree parameter) The sub-items of this item. |
html | string | Html to display as the item instead of the label. |
disabled | true/false | Item is not clickable/selectable in disabled state. |
checked | true/false | Item is checked. |
expanded | true/false | Sub-items of item are also visible. |
selected | true/false | Item is selected. |
icon | string | Icon to display next to the item. |
iconsize | number | Size of the icon. |
class | string | CSS class to add to the item. |
If they do not have this structure, the keyFor
parameter can be set to indicate which expected keys correspond to which record keys.
keyFor
example
For records with the structure:
{
uuid: '12345',
content: 'Label',
parent: '4444'
}
The $keyFor
parameter should be:
{
id: 'uuid',
label: 'content',
parentId: 'parent'
}
Outgoing triggers
Type: itemSelect
Occurrence: triggered when a user selects an item in the tree (event is triggered only if the item is not selected).
Additional event properties (besides the inherited properties):
Key | Description | Possible values |
---|---|---|
item |
Selected item | object |
Type: itemClick
Occurrence: when a tree item is clicked (even if it is selected).
Additional event properties (besides the inherited properties):
Key | Description | Possible values |
---|---|---|
item |
Clicked item | object |
Type: itemRightClick
Occurrence: when a tree item is
Additional event properties (besides the inherited properties):
Key | Description | Possible values |
---|---|---|
item |
Target item | object |
Type: itemCheck
Occurrence: when a tree item's checkbox is turned to checked (when config.checkboxes == true
).
Additional event properties (besides the inherited properties):
Key | Description | Possible values |
---|---|---|
item |
Checked item | object |
Type: itemUncheck
Occurrence: when a tree item's checkbox is turned to unchecked (when config.checkboxes == true
).
Additional event properties (besides the inherited properties):
Key | Description | Possible values |
---|---|---|
item |
Unckecked item | object |
Type: itemCheckChange
Occurrence: when a tree item's checkbox state is changed (when config.checkboxes == true
).
Additional event properties (besides the inherited properties):
Key | Description | Possible values | |
---|---|---|---|
item |
Clicked item | object | |
checked |
Item | true |
false |
Type: itemDrag
Occurrence: when a tree item is dragged over another item (when config.allowDrag == true
).
Additional event properties (besides the inherited properties):
Key | Description | Possible values |
---|---|---|
item |
Dragged item | object |
overItem |
Target item | object |
Type: itemExpand
Occurrence: when a tree item that has children is expanded.
Additional event properties (besides the inherited properties):
Key | Description | Possible values |
---|---|---|
item |
Expanded item | object |
Type: itemCollapse
Occurrence: when a tree item that has children is collapsed.
Additional event properties (besides the inherited properties):
Key | Description | Possible values |
---|---|---|
item |
Collapsed item | object |