Treeview

(part of package 'Servoy Extra Components') Extends designtime/SolutionModel: JSWebComponent Extends runtime: RuntimeWebComponent

This is a reference page; many components have detailed usage guides here.

Properties

jsDataSet

Type: dataset

---

styleClass

Type: styleclass

---

Events

onNodeClicked(nodeId,event,columnName)

Parameters:

• {object} nodeId

• {JSEvent} event

• {string} columnName

---

onNodeCollapsed(nodeId)

Parameters:

• {object} nodeId

---

onNodeDoubleClicked(nodeId,event)

Parameters:

• {object} nodeId

• {JSEvent} event

---

onNodeExpanded(nodeId)

Parameters:

• {object} nodeId

---

onNodeRightClicked(nodeId,event)

Parameters:

• {object} nodeId

• {JSEvent} event

---

onNodeSelected(nodeId)

Parameters:

• {object} nodeId

---

onReady(event)

Parameters:

• {JSEvent} event

---

API

collapseAll()

Collapse all nodes

Example:

myElement.collapseAll()

Returns: boolean

---

collapseNode(nodeId)

Collaps a node by id.

Example:

myElement.collapseNode(22)

Parameters:

• {object} nodeId ** nodeId node id

---

expandAll()

Expand all nodes

Example:

myElement.expandAll

Returns: boolean

---

expandNode(nodeId)

Expand a node by id.

Example:

myElement.expandNode(22)

Parameters:

• {object} nodeId ** nodeId node id

---

filterBranches(text,options)

Dimm or hide unmatched branches. Matching nodes are displayed together with all descendants.

Parameters:

• {string} text Filter nodes matching the given text

• {object} [options] Filter options, same as for 'filterNodes'

---

filterNodes(text,options)

Dimm or hide unmatched nodes. NOTE: This function might not work as expected if the node titles contain HTML markup.

Example:

elements.tree.filterNodes(searchFilter, {mode: 'hide', autoExpand: true, leavesOnly: true});

Parameters:

• {string} text Filter nodes matching the given text

• {object} [options] Filter options List of options: autoExpand**, type: {boolean}, default: false Temporarily expand matching node parents while filter is active. fuzzy**, type: {boolean}, default: false Match single characters in order, e.g. 'fb' will match 'FooBar'. hideExpanders**, type: {boolean}, default: false Hide hideExpanders expanders if all child nodes are hidden by filter. highlight**, type: {boolean}, default: false Highlight matches by wrapping inside tags. leavesOnly**, type: {boolean}, default: false Match end nodes only. mode**, type: {string: 'dimm' | 'hide'}, default: 'hide' Defines if unmatched nodes are grayed out or hidden. nodata**, type: {boolean|string|object|function}, default: true Display the string 'No data' if the filtered tree would be empty.

---

getChildNodes(nodeId)

Get child nodes ids of a parent node.

Example:

var childNodes = myElement.getChildNodes()

Parameters:

• {object} nodeId ** nodeId node id

Returns: object

---

getNodeLevel(nodeId)

Get the tree level a node is situated.

Example:

var nodeLevel = myElement.getNodeLevel()

Parameters:

• {object} nodeId ** nodeId node id

Returns: int

---

getParentNode(nodeId)

Get child nodes ids of a parent node.

Example:

var childNodes = myElement.getChildNodes()

Parameters:

• {object} nodeId ** nodeId node id

Returns: object

---

getRootNodes()

Get root nodes ids .

Example:

var rootNodes = myElement.getRootNodes()

Returns: object

---

getSeletedNode()

Get selected node id.

Example:

var selection = myElement.getSeletedNode()

Returns: object

---

isNodeExpanded(nodeId)

Returns expand state of a node.

Example:

var expanded = myElement.isNodeExpanded([22])

Parameters:

• {object} nodeId ** pk array of each level id

Returns: boolean

---

refresh(restoreExpandedNodes)

Refresh the tree display.

Example:

myElement.refresh()

Parameters:

• {boolean} restoreExpandedNodes

---

setColumnWidth(columnWidth)

Sets the column width

Example:

myElement.setColumnWidth(50);

Parameters:

• {int} columnWidth ColumnWidth column width

---

setDataSet(jsDataSet)

Sets the tree data

Example:

 var treeviewDataSet = databaseManager.createEmptyDataSet( 0,  ['id', 'pid', 'treeColumn', 'icon']);

 treeviewDataSet.addRow([1,      null,   'Main group',   'media:///group.png']);
 treeviewDataSet.addRow([2,      null,   'Second group', 'media:///group.png']);
 treeviewDataSet.addRow([3,      2,      'Subgroup',     'media:///group.png']);
 treeviewDataSet.addRow([4,      3,      'Mark',         'media:///user.png']);
 treeviewDataSet.addRow([5,      3,      'George',       'media:///user.png']);

 myElement.setDataSet(treeviewDataSet);

 // Render tree as a table by providing any additional 'column*' in the DataSet; additional columns must be prefixed with 'column'; e.g. columnone, columntwo...
 var tableTreeviewDataSet = databaseManager.createEmptyDataSet( 0, ['id', 'pid', 'treeColumn', 'icon', 'column1', 'column2']);

 tableTreeviewDataSet.addRow([null, null, 'Group', null, 'Description', 'Extra info']);  // header
 tableTreeviewDataSet.addRow([1, null, 'Main group', 'media:///group.png', 'This is my the Main Group', 'Has (0) child']);
 tableTreeviewDataSet.addRow([2, null, 'Second group', 'media:///group.png', 'This is my the Second Group', 'Has (1) child']);
 tableTreeviewDataSet.addRow([3, 2, 'Subgroup', 'media:///group.png', 'This is my the Subgroup Group', 'Has (2) children']);
 tableTreeviewDataSet.addRow([4, 3, 'Mark', 'media:///user.png', 'This is leaf Mark', 'Has (0) child']);
 tableTreeviewDataSet.addRow([5, 3, 'George', 'media:///user.png', 'This is leaf George', 'Has (0) child']);

 myElement.setDataSet(tableTreeviewDataSet);

Parameters:

• {dataset} jsDataSet ** jsDataSet the JSDataSet used for the tree model

---

setSelectedNode(nodeId)

Sets selected node by id.

Example:

myElement.setSelectedNode(22)

Parameters:

• {object} nodeId ** nodeId node id

---

---