# Treeview

(part of package '[Servoy Extra Components](/reference/servoyextensions/packages/ui-component-packages/servoy-extra-components.md)')\
Extends designtime/SolutionModel: [JSWebComponent](/reference/servoycore/dev-api/solutionmodel/jswebcomponent.md)\
Extends runtime: [RuntimeWebComponent](/reference/servoycore/dev-api/forms/runtimeform/elements/runtimewebcomponent.md)

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

This is a reference page; many components have detailed usage guides [here](https://docs.servoy.com/guides/develop/application-design/ui-components).

## Properties

### jsDataSet

JSDataSet used for the tree model. Type: [JSDataset](/reference/servoycore/dev-api/database-manager/jsdataset.md)

***

### styleClass

CSS style classes applied to the tree view component. Type: [Styleclass](/reference/servoy-developer/component_and_service_property_types.md#styleclass)

***

## Events

### onNodeClicked(nodeId,event,columnName)

Fired when a node is clicked.

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} nodeId The identifier of the clicked node.
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the click.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} columnName The name of the column where the node is displayed.

***

### onNodeCollapsed(nodeId)

Fired when a node is collapsed.

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} nodeId The identifier of the node that was collapsed.

***

### onNodeDoubleClicked(nodeId,event)

Fired when a node is double-clicked.

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} nodeId The identifier of the node that was double-clicked.
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the double-click.

***

### onNodeExpanded(nodeId)

Fired when a node is expanded.

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} nodeId The identifier of the node that was expanded.

***

### onNodeRightClicked(nodeId,event)

Fired when a node is right-clicked.

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} nodeId The identifier of the node that was right-clicked.
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the right-click.

***

### onNodeSelected(nodeId)

Fired when a node is selected.

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} nodeId The identifier of the node that was selected.

***

### onReady(event)

Fired when the tree view is ready.

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} 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:**

> * {[Array\<Object>](/reference/servoycore/dev-api/js-lib/object.md)} sourceRows SourceRows \[object\[]] an Array of plain objects if dragged from a power grid, or JSRecord objects if from a data grid
> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} nodeId
> * {[CustomType\<servoyextra-treeview.JSDNDEvent>](#jsdndevent)} event

***

## 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:**

```js
// 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](/reference/servoycore/dev-api/js-lib/object.md)} data - An array representing the row to be added or updated.

***

### collapseAll()

Collapse all nodes

**Example:**

```js
myElement.collapseAll()
```

**Returns:** [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Returns \`true\` if all nodes were successfully collapsed, otherwise \`false\`.

***

### collapseNode(nodeId)

Collaps a node by id.

**Example:**

```js
myElement.collapseNode(22)
```

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} nodeId The identifier of the node to collapse.

***

### expandAll()

Expand all nodes

**Example:**

```js
myElement.expandAll
```

**Returns:** [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Returns \`true\` if all nodes were successfully expanded, otherwise \`false\`.

***

### expandNode(nodeId)

Expand a node by id.

**Example:**

```js
myElement.expandNode(22)
```

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} 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](/reference/servoycore/dev-api/js-lib/string.md)} text Filter nodes matching the given text
> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} \[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:**

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

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} text Filter nodes matching the given text
> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} \[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:**

```js
var childNodes = myElement.getChildNodes()
```

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} nodeId The identifier of the parent node whose child node IDs are to be retrieved.

**Returns:** [Array\<Object>](/reference/servoycore/dev-api/js-lib/object.md) 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:**

```js
var nodeLevel = myElement.getNodeLevel()
```

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} nodeId The identifier of the node whose level is to be determined.

**Returns:** [Number](/reference/servoycore/dev-api/js-lib/number.md) 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:**

```js
var childNodes = myElement.getChildNodes()
```

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} nodeId The identifier of the parent node whose child node IDs are to be retrieved.

**Returns:** [Object](/reference/servoycore/dev-api/js-lib/object.md) Returns an object containing the IDs of the child nodes for the specified parent node.

***

### getRootNodes()

Get root nodes ids .

**Example:**

```js
var rootNodes = myElement.getRootNodes()
```

**Returns:** [Array\<Object>](/reference/servoycore/dev-api/js-lib/object.md) Returns an array of objects representing the IDs of the root nodes in the tree structure.

***

### getSelectedNode()

Get selected node id.

**Example:**

```js
var selection = myElement.getSelectedNode()
```

**Returns:** [Object](/reference/servoycore/dev-api/js-lib/object.md) Returns the selected node object, including its \`id\` and any other relevant properties.

***

### getSeletedNode()

Get selected node id.

**Example:**

```js
var selection = myElement.getSeletedNode()
```

**@deprecated**

**Returns:** [Object](/reference/servoycore/dev-api/js-lib/object.md) Returns the selected node object, including its \`id\` and any other relevant properties.

***

### isNodeExpanded(nodeId)

Returns expand state of a node.

**Example:**

```js
var expanded = myElement.isNodeExpanded([22])
```

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} nodeId Array of each level id

**Returns:** [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Returns \`true\` if the specified node is expanded, otherwise \`false\`.

***

### refresh(restoreExpandedNodes)

Refresh the tree display.

**Example:**

```js
myElement.refresh()
```

**Parameters:**

> * {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} 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:**

```js
myElement.scrollToNode(22)
```

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} nodeId Node id

***

### setColumnWidth(columnWidth,index)

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

**Example:**

```js
// 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](/reference/servoycore/dev-api/js-lib/number.md)} columnWidth - The desired width to apply, in pixels.
> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} \[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:**

```js
 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](/reference/servoycore/dev-api/database-manager/jsdataset.md)} jsDataSet The JSDataSet used for the tree model

***

### setSelectedNode(nodeId)

Sets selected node by id.

**Example:**

```js
myElement.setSelectedNode(22)
```

**Parameters:**

> * {[Object](/reference/servoycore/dev-api/js-lib/object.md)} nodeId The identifier of the node to set as selected.

***

## Types

## JSDNDEvent

scripting type: CustomType\<servoyextra-treeview\.JSDNDEvent>

extends: [JSEvent](#jsevent)

* sourceColumnId
  * The identifier of the source column from which the drag originated.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* sourceGridName
  * The name of the source grid from which the drag originated.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)

***


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoyextensions/ui-components/visualization/treeview.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.