# DBTreeview

(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 database tree view.

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

## Properties

### allowDrag

Can be used to enable dragging of nodes. Can either be a boolean value or a clientfunction that is executed in browser. Default value is false. Type: [Object](/reference/servoycore/dev-api/js-lib/object.md)

***

### allowDrop

Can be used to enable dropping of nodes. Can either be a boolean value or a clientfunction that is executed in browser. Default value is false. Type: [Object](/reference/servoycore/dev-api/js-lib/object.md)

***

### autoRefresh

If true, component listens to foundset changes and updates itself while visible. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true

***

### enabled

Flag indicating whether the tree view is enabled for user interaction. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true

***

### responsiveHeight

Height of the treeview, set only in responsive forms. Type: [Number](/reference/servoycore/dev-api/js-lib/number.md) Default Value: 0

***

### showLoadingIndicator

Flag indicating whether a loading indicator is displayed while data is loading. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true

***

### styleClass

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

***

### visible

Flag indicating whether the tree view is visible. Type: [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) Default Value: true

***

## Events

### onDrop(sourceNodePkPath,targetNodePkPath,indexInParent,event)

Called when a node is dropped as a result of a drag-n-drop.

**Parameters:**

> * {[Array\<String>](/reference/servoycore/dev-api/js-lib/string.md)} sourceNodePkPath The primary key path of the source node.
> * {[Array\<String>](/reference/servoycore/dev-api/js-lib/string.md)} targetNodePkPath The primary key path of the target node.
> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} indexInParent The index at which the node is dropped within its parent.
> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the drop action.

***

### onReady(event)

Fired when the tree view is ready to be displayed.

**Parameters:**

> * {[JSEvent](/reference/servoycore/dev-api/application/jsevent.md)} event The event object associated with the ready event.

***

### onRowDrop(sourceRows,targetNodePkPath,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 An array of plain objects if dragged from a power grid, or JSRecord objects if from a data grid
> * {[Array\<String>](/reference/servoycore/dev-api/js-lib/string.md)} targetNodePkPath The primary key path of the target node.
> * {[CustomType\<servoyextra-dbtreeview.JSDNDEvent>](#jsdndevent)} event The event object associated with the drop action.

***

## API

### addRoots(root)

Add foundset to the list of foundsets used to create the tree's root nodes.

**Example:**

```js
myElement.addRoots(foundset);
```

**Parameters:**

> * {[Foundsetref](/reference/servoy-developer/component_and_service_property_types.md#foundsetref)} root The foundset reference to be added as a root node in the tree structure.

***

### createRelationInfo(label,nRelationName)

Create relation info object used to set multiple child relations for a tree node

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} label The label for the relation, typically used as the display name for the tree node.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} nRelationName The name of the relation used to define the child relations for the tree node.

**Returns:** [CustomType\<servoyextra-dbtreeview.relationInfo>](#relationinfo) An object containing the relation information for setting child relations in the tree structure.

***

### getCheckBoxValues(datasource)

Returns array of pk of nodes that are checked for the datasource

**Example:**

```js
var arrayPkChecked = myElement.getCheckBoxValues(databaseManager.getDataSource('example_data', 'categories'));
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset for which the checked nodes' primary keys are retrieved.

**Returns:** [Array\<String>](/reference/servoycore/dev-api/js-lib/string.md) An array of primary keys of the nodes that are checked for the specified datasource.

***

### getRoots()

Returns all the roots that were already added using addRoots.

**Example:**

```js
myElement.getRoots();
```

**Returns:** [Array\<FoundsetRef>](/reference/servoy-developer/component_and_service_property_types.md#foundsetref) All root foundsets.

***

### getSelectionPath()

Returns the path of the currently selected node in the tree.

**Example:**

```js
var selection = myElement.getSelectionPath();
// selection might be an array like: [{ id: 1, name: 'Root' }, { id: 2, name: 'Child' }]
```

**Returns:** [Array\<Object>](/reference/servoycore/dev-api/js-lib/object.md) An array representing the path of the selected node in the tree.

***

### isNodeExpanded(pk)

Returns expand state of a node.

**Example:**

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

**Parameters:**

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

**Returns:** [Boolean](/reference/servoycore/dev-api/js-lib/boolean.md) True if the specified node is expanded, false if it is collapsed.

***

### refresh()

Refresh the tree display.

**Example:**

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

***

### removeAllRoots()

Clears all foundset roots of the tree.

**Example:**

```js
myElement.removeAllRoots();
```

***

### setActionsCallBack(actions)

Set callback info for specific actions.

**Example:**

```js
myElement.setActionsCallBack([[databaseManager.getDataSource('example_data', 'categories'), 'myfunction1', 'categ_id', 'div.myclass1'], [databaseManager.getDataSource('example_data', 'categories'), 'myfunction2', 'categ_name', '.myclass2']]);
```

**Parameters:**

> * {[Array\<CustomType\<servoyextra-dbtreeview.action>>](#action)} actions An array of action objects, each defining a datasource, a callback function, a field from datasource, and the associated DOM element for which the action should be triggered.

***

### setCallBackInfo(datasource,callbackfunction,param)

Set callback info for a datasource foundset display.

**Example:**

```js
myElement.setCallBackInfo(databaseManager.getDataSource('example_data', 'categories'),myfunction,'categ_id');
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset to be displayed.
> * {[Function](/reference/servoy-developer/component_and_service_property_types.md#function)} callbackfunction Callback function name
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} param The parameter should be a field from the datasource whose value is passed to the callback function when it is invoked.

***

### setCheckBoxAutoselectsChildren(datasource,autoselect)

Set the nodes whose checkbox will automatically autoselect children.

**Example:**

```js
myElement.setCheckBoxAutoselectsChildren(databaseManager.getDataSource('example_data', 'categories'),false);
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset for which the checkbox behavior is set.
> * {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} autoselect A boolean value indicating whether the checkboxes should automatically select or deselect child nodes when a parent node is selected.

***

### setCheckBoxValueDataprovider(datasource,checkboxvaluedataprovider)

Set dataprovider for the checkbox displayed for a datasource foundset.

**Example:**

```js
myElement.setCheckBoxValueDataprovider(databaseManager.getDataSource('example_data', 'categories'),'enabled');
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset for which the checkbox value dataprovider is being set.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} checkboxvaluedataprovider Dataprovider of the displayed checkbox

***

### setChildSortDataprovider(datasource,childsortdataprovider)

Set the dataprovider name to retrieve column name and sort order for the child nodes. The provided data must be a string of form : column\_name\_used\_for\_sort sort\_order(asc or desc)

**Example:**

```js
myElement.setChildSortDataprovider(databaseManager.getDataSource('example_data', 'companies'),'company_sort');
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset for which the child nodes' sort dataprovider is being set.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} childsortdataprovider Dataprovider of the sort text

***

### setExpandNode(pk,state)

Sets expand state of a node.

**Example:**

```js
myElement.setExpandNode([22],true)
```

**Parameters:**

> * {[Array\<Object>](/reference/servoycore/dev-api/js-lib/object.md)} pk Array of each level
> * {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} state Expand state

***

### setHasCheckBoxDataprovider(datasource,hascheckboxdataprovider)

Set relation for displaying a datasource foundset.

**Example:**

```js
myElement.setHasCheckBoxDataprovider(databaseManager.getDataSource('example_data', 'categories'),'has_checkbox');
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset for which the checkbox dataprovider is being set.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} hascheckboxdataprovider Has checkbox dataprovider, whose value will determine if a checkbox is shown for the node.

***

### setHasCheckBoxValue(datasource,pks)

Set the nodes that should have checkbox for a datasource when no hascheckboxdataprovider is used

**Example:**

```js
myElement.setHasCheckBoxValue(databaseManager.getDataSource('example_data', 'categories'),["1", "3", "5"]);
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset for which the checkboxes should be applied.
> * {[Array\<String>](/reference/servoycore/dev-api/js-lib/string.md)} pks Array of primary keys that should have a checkbox associated with them.

***

### setImageURLDataprovider(datasource,imageurldataprovider)

Set dataprovider for the image displayed in tree node for a datasource foundset.

**Example:**

```js
myElement.setImageURLDataprovider(databaseManager.getDataSource('example_data', 'categories'),'mymedia');
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset for which the image dataprovider is being set.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} imageurldataprovider The dataprovider that specifies the URL or path to the image displayed in the tree node.

***

### setInitialCheckBoxValues(datasource,pks)

Set intial checked checkboxes for a datasource foundset when no checkboxdataprovider is used

**Example:**

```js
myElement.setInitialCheckBoxValues(databaseManager.getDataSource('example_data', 'categories'),["1", "3", "5"]);
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset where checkboxes are applied.
> * {[Array\<String>](/reference/servoycore/dev-api/js-lib/string.md)} pks Array of pks that should have the checkbox checked

***

### setMethodToCallOnCheckBoxChange(datasource,callbackfunction,param)

Set callback info for a datasource foundset checkbox display.

**Example:**

```js
myElement.setMethodToCallOnCheckBoxChange(databaseManager.getDataSource('example_data', 'categories'),myfunction,'categ_id');
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset for which the checkbox change callback is being set.
> * {[Function](/reference/servoy-developer/component_and_service_property_types.md#function)} callbackfunction Callback function name
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} param The parameter should be a field from the datasource whose value is passed to the callback function when the checkbox state changes.

***

### setMethodToCallOnDoubleClick(datasource,callbackfunction,param)

Set callback info for a datasource foundset doubleclick event.

**Example:**

```js
myElement.setMethodToCallOnDoubleClick(databaseManager.getDataSource('example_data', 'categories'),myfunction,'categ_id');
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset for which the double-click callback is being set.
> * {[Function](/reference/servoy-developer/component_and_service_property_types.md#function)} callbackfunction The name of the function to be invoked when a double-click event occurs on a node.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} param The parameter should be a field from the datasource whose value is passed to the callback function during invocation.

***

### setMethodToCallOnRightClick(datasource,callbackfunction,param)

Set callback info for a datasource foundset right click event.

**Example:**

```js
myElement.setMethodToCallOnRightClick(databaseManager.getDataSource('example_data', 'categories'),myfunction,'categ_id');
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset for which the right-click callback is being set.
> * {[Function](/reference/servoy-developer/component_and_service_property_types.md#function)} callbackfunction Callback function name
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} param The parameter should be a field from the datasource whose value is passed to the callback function during invocation.

***

### setNRelationInfos(datasource,relationInfos)

Set n-relation infos (array of RelationInfo objects created using tree.createRelationInfo() for having multiple child relations for one node)

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset for which the relations are being set.
> * {[Array\<CustomType\<servoyextra-dbtreeview.relationInfo>>](#relationinfo)} relationInfos An array of objects, defining multiple child relations for a single node.

***

### setNRelationName(datasource,nrelationname)

Set relation for displaying a datasource foundset.

**Example:**

```js
myElement.setNRelationName(databaseManager.getDataSource('example_data', 'categories'),'companies_to_categories');
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset to be displayed using the specified relation.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} nrelationname The name of the relation used to link the datasource with its child nodes.

***

### setNodeLevelVisible(level,visible)

Sets expanded state for a tree level. Expanding the tree may cause performance issues.

**Example:**

```js
myElement.setNodeLevelVisible(2,true)
```

**Parameters:**

> * {[Number](/reference/servoycore/dev-api/js-lib/number.md)} level The level of the tree to set the expanded state for.
> * {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} visible A boolean indicating whether the specified tree level should be expanded (true) or collapsed (false).

***

### setSelectionPath(pk)

Sets selection node of the tree.

**Example:**

```js
myElement.setSelectionPath([22])
```

**Parameters:**

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

***

### setTextDataprovider(datasource,textdataprovider)

Set dataprovider for the text displayed from a datasource foundset.

**Example:**

```js
myElement.setTextDataprovider(databaseManager.getDataSource('example_data', 'categories'),'categoryname');
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset for which the text dataprovider is being set.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} textdataprovider The dataprovider that specifies the text to be displayed for each node in the tree.

***

### setToolTipTextDataprovider(datasource,tooltiptextdataprovider)

Set dataprovider for the tooltip text displayed for a datasource foundset.

**Example:**

```js
myElement.setToolTipTextDataprovider(databaseManager.getDataSource('example_data', 'categories'),'tooltip');
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset for which the tooltip text dataprovider is being set.
> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} tooltiptextdataprovider Dataprovider of the displayed checkbox

***

### updateCheckBoxValues(datasource,pks,state)

Update checkbox state for nodes

**Example:**

```js
myElement.updateCheckBoxValues(databaseManager.getDataSource('example_data', 'categories'),["1", "3", "5"], true);
```

**Parameters:**

> * {[String](/reference/servoycore/dev-api/js-lib/string.md)} datasource The datasource identifier, representing the foundset for which the checkbox states are being updated.
> * {[Array\<String>](/reference/servoycore/dev-api/js-lib/string.md)} pks Array of primary keys of the nodes for which the checkbox state should be updated.
> * {[Boolean](/reference/servoycore/dev-api/js-lib/boolean.md)} state True to check the checkbox, false to uncheck it.

***

## Types

## JSDNDEvent

scripting type: CustomType\<servoyextra-dbtreeview\.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)

## action

Represents an action configuration for tree view events. scripting type: CustomType\<servoyextra-dbtreeview\.action>

* callbackfunction
  * The callback function to be executed for the action.
  * **Type**: [function](/reference/servoy-developer/component_and_service_property_types.md#function)
* datasource
  * The datasource identifier related to the action.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* name
  * The unique name identifier for the action.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* param
  * The parameter to be passed to the callback function.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)

## binding

Represents binding configuration for tree view nodes. scripting type: CustomType\<servoyextra-dbtreeview\.binding>

* callbackinfo
  * Callback information for tree view actions.
  * **Type**: [callback](#callback)
* checkboxvaluedataprovider
  * The dataprovider for the checkbox value displayed in nodes.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* childsortdataprovider
  * The dataprovider that defines sorting for child nodes.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* datasource
  * The datasource identifier for the foundset.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* hasCheckboxValue
  * Represents the nodes that have an associated checkbox.
  * **Type**: [object\[\]](/reference/servoycore/dev-api/js-lib/object.md)
* hascheckboxdataprovider
  * The dataprovider for enabling checkboxes in nodes.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* imageurldataprovider
  * The dataprovider specifying the image URL for a node.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* initialCheckboxValues
  * Represents the initial checkbox values for nodes.
  * **Type**: [object\[\]](/reference/servoycore/dev-api/js-lib/object.md)
* methodToCallOnCheckBoxChange
  * Callback information for checkbox change events.
  * **Type**: [callback](#callback)
* methodToCallOnDoubleClick
  * Callback information for double-click events on nodes.
  * **Type**: [callback](#callback)
* methodToCallOnRightClick
  * Callback information for right-click events on nodes.
  * **Type**: [callback](#callback)
* nRelationInfos
  * An array of relation information objects for defining multiple child relations.
  * **Type**: [relationInfo\[\]](#relationinfo)
* nrelationname
  * The relation name used for linking child nodes.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* textdataprovider
  * The dataprovider for the text displayed in a node.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* tooltiptextdataprovider
  * The dataprovider for the tooltip text displayed for nodes.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)

## callback

Represents callback information used in tree view operations. scripting type: CustomType\<servoyextra-dbtreeview\.callback>

* f
  * The callback function to be executed.
  * **Type**: [function](/reference/servoy-developer/component_and_service_property_types.md#function)
* param
  * The parameter to be passed to the callback function.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)

## levelVisibilityType

Represents the visibility settings for a tree level. scripting type: CustomType\<servoyextra-dbtreeview\.levelVisibilityType>

* level
  * The level of the tree.
  * **Type**: [int](/reference/servoycore/dev-api/js-lib/number.md)
* value
  * The visibility state for the tree level.
  * **Type**: [boolean](/reference/servoycore/dev-api/js-lib/boolean.md)

## relationInfo

Represents relation information used for linking child nodes. scripting type: CustomType\<servoyextra-dbtreeview\.relationInfo>

* label
  * The label for the relation.
  * **Type**: [string](/reference/servoycore/dev-api/js-lib/string.md)
* nRelationName
  * The name of the relation.
  * **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/dbtreeview.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.