TreeView

Label: :IA_Function
Property: type: 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
items Source data in item format (see 'Input format' below) array
keyFor Key mapping for input records if they do not have the required format
tree Source data in tree format (see 'Input format' below) 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 disabled (not clickable or selectable).
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