# Treeview

{% hint style="info" %}
*<mark style="color:blue;">**Content under construction**</mark>*
{% endhint %}

Servoy extra components contains two tree components. The difference between the two is the model, the dbtreeview is based on foundset(s) while treeview is based on dataset.

DbTreeview shows multiple tree levels based on relation. From top foundset (datasource), one can show related nodes specified by a relation. Note that each relation is a database query , so for performance should not abuse the tree expand (from javascript). The tree works lazy and initializes data as requested.

Usual tree features are included, show a node checkbox, node image, tooltip, click callback, expand node... More information about model/api can be seen in Servoy Developer.

## Table of contents

* [Tree properties](#tree-properties)
* [Tree example](#tree-example)
* [Tree events](#tree-events)
* [Tree API](#tree-api)

## Tree properties

Tree properties can be found [here](/reference/servoyextensions/ui-components/visualization/treeview.md#properties)

The component has one property, API should be used for everything else. Dataset that is the model of the tree. Each row in dataset represents a node in the tree. Dataset should have 4 columns: node id, parent node id (null in case of top nodes or another valid id), node text and icon media url.

Instead of 'icon' it is possible to use 'fa-icon', in this case the values in the column should be FontAwesome classes, ex: 'fa fa-users'.

## Tree example

```javascript
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']);
elements.mytree.setDataSet(treeviewDataSet);
```

## Tree events

Tree events can be found [here](/reference/servoyextensions/ui-components/visualization/treeview.md#events)

## Tree API

Tree API methods can be found [here](/reference/servoyextensions/ui-components/visualization/treeview.md#api)


---

# 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/guides/develop/application-design/ui-components/visualization/tree.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.