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

Parameters:

nodeId object event JSEvent columnName string

---

onNodeCollapsed

Parameters:

nodeId object

---

onNodeDoubleClicked

Parameters:

nodeId object event JSEvent

---

onNodeExpanded

Parameters:

nodeId object

---

onNodeRightClicked

Parameters:

nodeId object event JSEvent

---

onNodeSelected

Parameters:

nodeId object

---

onReady

Parameters:

event JSEvent

---

API

collapseAll

Collapse all nodes

@example

myElement.collapseAll()

@return {Boolean}

Returns: boolean

---

collapseNode

Collaps a node by id.

@example

myElement.collapseNode(22)

@param nodeId node id

Parameters:

nodeId object

---

expandAll

Expand all nodes

@example

myElement.expandAll

@return {Boolean}

Returns: boolean

---

expandNode

Expand a node by id.

@example

myElement.expandNode(22)

@param nodeId node id

Parameters:

nodeId object

---

filterBranches

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

@param {String} text filter nodes matching the given text @param {Object} [options] filter options, same as for 'filterNodes'

Parameters:

text string options object (optional)

---

filterNodes

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

@param {String} text filter nodes matching the given text @param {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. @example

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

Parameters:

text string options object (optional)

---

getChildNodes

Get child nodes ids of a parent node.

@example

var childNodes = myElement.getChildNodes()

@param nodeId node id @return {Array}

Parameters:

nodeId object

Returns: object

---

getNodeLevel

Get the tree level a node is situated.

@example

var nodeLevel = myElement.getNodeLevel()

@param nodeId node id @return {int}

Parameters:

nodeId object

Returns: int

---

getParentNode

Get child nodes ids of a parent node.

@example

var childNodes = myElement.getChildNodes()

@param nodeId node id @return {Object}

Parameters:

nodeId object

Returns: object

---

getRootNodes

Get root nodes ids .

@example

var rootNodes = myElement.getRootNodes()

@return {Array}

Returns: object

---

getSeletedNode

Get selected node id.

@example

var selection = myElement.getSeletedNode()

@return {Object}

Returns: object

---

isNodeExpanded

Returns expand state of a node.

@example

var expanded = myElement.isNodeExpanded([22])

@param pk array of each level id @return {boolean}

Parameters:

nodeId object

Returns: boolean

---

refresh

Refresh the tree display.

@example

myElement.refresh()

Parameters:

restoreExpandedNodes boolean

---

setColumnWidth

Sets the column width

@param {Number} columnWidth column width @example

myElement.setColumnWidth(50);

Parameters:

columnWidth int

---

setDataSet

Sets the tree data

@param jsDataSet the JSDataSet used for the tree model @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 dataset

---

setSelectedNode

Sets selected node by id.

@example

myElement.setSelectedNode(22)

@param nodeId node id

Parameters:

nodeId object

---

---