Graphileon Documentation

For Dashboard Designers Reference TreeView

Friday, March 15, 2019 10:27 PM

TreeView

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

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
type Event type select
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
type Event type itemClick
item Clicked item object

Type: checkChange

Occurrence: when a tree item is checked/unchecked (when config.checkboxes == true).

Additional event properties (besides the inherited properties):

Key Description Possible values
type Event type checkChange
item Checked item object