ServoyCloudSupportOpen SourceCommunity

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.

onRowDrop(sourceRows,nodeId,event)

Called when an ng grid row is dropped as a result of a drag-n-drop

Parameters:

API

addOrUpdateRowData(data)

Adds or updates a row in the treeview.

This function checks if a row with the same unique identifier already exists in the dataset. If it does, the existing row is removed and replaced with the new data. If it doesn't, the new data is simply added as a new row.

Example:

// Adds a new row with ID 6
myElement.addOrUpdateRowData([6, null, 'Special group', 'media:///group.png']);
myElement.addOrUpdateRowData([6, null, 'Special group', 'media:///group.png', 'This is a Special group', 'Has (0) child']);

// Updates the row with ID 6
myElement.addOrUpdateRowData([6, null, 'The Special Group', 'media:///group.png']);
myElement.addOrUpdateRowData([6, null, 'The Special Group', 'media:///group.png', 'This is The Special Group', 'Has (0) child']);

Parameters:

  • {Object} data - An array representing the row to be added or updated.

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.

getSelectedNode()

Get selected node id.

Example:

var selection = myElement.getSelectedNode()

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

getSeletedNode()

Get selected node id.

Example:

var selection = myElement.getSeletedNode()

@deprecated

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.

scrollToNode(nodeId)

Scrolls to a node by id.

Example:

myElement.scrollToNode(22)

Parameters:

setColumnWidth(columnWidth,index)

Sets the width for all columns in the tree view or just a specific column by its index

Example:

// Sets all columns to a width of 50px
myElement.setColumnWidth(50);
// Sets the width of the first column to 50px
myElement.setColumnWidth(50,0);

Parameters:

  • {Number} columnWidth - The desired width to apply, in pixels.

  • {Number} [index] - The zero-based index of the column to update. If not provided, all columns will be updated.

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.

Types

JSDNDEvent

scripting type: CustomType<servoyextra-treeview.JSDNDEvent>

extends: JSEvent

  • sourceColumnId

    • The identifier of the source column from which the drag originated.

    • Type: string

  • sourceGridName

    • The name of the source grid from which the drag originated.

    • Type: string

PreviousProgress BarNextServer Plugins

Last updated

Was this helpful?