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 itemsparameter) The identifier of the parent item. | 
| items | array | (For treeparameter) 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 | 
 Graphileon Documentation
    Graphileon Documentation
     Graphileon.com
    Graphileon.com