Treeview

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

A Servoy Extra Component that displays a tree view for hierarchical data.

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

Properties

jsDataSet

JSDataSet used for the tree model. Type: JSDataset

---

styleClass

CSS style classes applied to the tree view component. Type: Styleclass

---

Events

onNodeClicked(nodeId,event,columnName)

Fired when a node is clicked.

Parameters:

• {Object} nodeId The identifier of the clicked node.

• {JSEvent} event The event object associated with the click.

• {String} columnName The name of the column where the node is displayed.

---

onNodeCollapsed(nodeId)

Fired when a node is collapsed.

Parameters:

• {Object} nodeId The identifier of the node that was collapsed.

---

onNodeDoubleClicked(nodeId,event)

Fired when a node is double-clicked.

Parameters:

• {Object} nodeId The identifier of the node that was double-clicked.

• {JSEvent} event The event object associated with the double-click.

---

onNodeExpanded(nodeId)

Fired when a node is expanded.

Parameters:

• {Object} nodeId The identifier of the node that was expanded.

---

onNodeRightClicked(nodeId,event)

Fired when a node is right-clicked.

Parameters:

• {Object} nodeId The identifier of the node that was right-clicked.

• {JSEvent} event The event object associated with the right-click.

---

onNodeSelected(nodeId)

Fired when a node is selected.

Parameters:

• {Object} nodeId The identifier of the node that was selected.

---

onReady(event)

Fired when the tree view is ready.

Parameters:

• {JSEvent} event The event object associated with the tree view being ready.

---

API

collapseAll()

Collapse all nodes

Example:

myElement.collapseAll()

Returns: Boolean Returns `true` if all nodes were successfully collapsed, otherwise `false`.

---

collapseNode(nodeId)

Collaps a node by id.

Example:

myElement.collapseNode(22)

Parameters:

• {Object} nodeId The identifier of the node to collapse.

---

expandAll()

Expand all nodes

Example:

myElement.expandAll

Returns: Boolean Returns `true` if all nodes were successfully expanded, otherwise `false`.

---

expandNode(nodeId)

Expand a node by id.

Example:

myElement.expandNode(22)

Parameters:

• {Object} nodeId The identifier of the node to expand.

---

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 The identifier of the parent node whose child node IDs are to be retrieved.

Returns: Array<Object> Returns an array of objects representing the IDs of the child nodes for the specified parent node.

---

getNodeLevel(nodeId)

Get the tree level a node is situated.

Example:

var nodeLevel = myElement.getNodeLevel()

Parameters:

• {Object} nodeId The identifier of the node whose level is to be determined.

Returns: Number Returns the level of the specified node within the tree structure, where the root level is typically 0.

---

getParentNode(nodeId)

Get child nodes ids of a parent node.

Example:

var childNodes = myElement.getChildNodes()

Parameters:

• {Object} nodeId The identifier of the parent node whose child node IDs are to be retrieved.

Returns: Object Returns an object containing the IDs of the child nodes for the specified parent node.

---

getRootNodes()

Get root nodes ids .

Example:

var rootNodes = myElement.getRootNodes()

Returns: Array<Object> Returns an array of objects representing the IDs of the root nodes in the tree structure.

---

getSeletedNode()

Get selected node id.

Example:

var selection = myElement.getSeletedNode()

Returns: Object Returns the selected node object, including its `id` and any other relevant properties.

---

isNodeExpanded(nodeId)

Returns expand state of a node.

Example:

var expanded = myElement.isNodeExpanded([22])

Parameters:

• {Object} nodeId Array of each level id

Returns: Boolean Returns `true` if the specified node is expanded, otherwise `false`.

---

refresh(restoreExpandedNodes)

Refresh the tree display.

Example:

myElement.refresh()

Parameters:

• {Boolean} restoreExpandedNodes Indicates whether the previously expanded nodes should be restored after the tree is refreshed. Set to `true` to restore expanded nodes, or `false` to collapse all nodes.

---

setColumnWidth(columnWidth)

Sets the column width

Example:

myElement.setColumnWidth(50);

Parameters:

• {Number} 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:

• {JSDataset} jsDataSet The JSDataSet used for the tree model

---

setSelectedNode(nodeId)

Sets selected node by id.

Example:

myElement.setSelectedNode(22)

Parameters:

• {Object} nodeId The identifier of the node to set as selected.

---

---