# TreeView

The Wisej.Web.TreeView control shows nested items within a hierarchical tree. Each item can have a number of subitems, allowing the user to expand and collapse nested items accordingly.

{% hint style="info" %}
For a full list of properties, methods and events see the [API documentation](https://docs.wisej.com/api/wisej.web/lists-and-grids/treeview).
{% endhint %}

## Features

### Checkboxes

The TreeView control features a **CheckBoxes** property that will display a checkbox next to each node in the TreeView.

<div align="left"><img src="https://553579532-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MF1D11gPs_az3xaKusw%2Fuploads%2Fgit-blob-8f4398ba44d7aa29d59057f1e585a0193eb3f240%2FTreeView.png?alt=media" alt=""></div>

### Virtual Scrolling

The TreeView control has the ability to use virtual scrolling, a feature that only renders the list items currently visible in the browser.

Using this option can drastically reduce the amount of time spent rendering in the browser for large datasets.

{% hint style="warning" %}
Scrolling when **VirtualMode** is true may be slower than rendering all of the items at the same time. To improve scrolling performance, set the **PrefetchItems** property to pre-render items.
{% endhint %}

{% content-ref url="treeview" %}
[treeview](https://docs.wisej.com/docs/controls/lists/treeview)
{% endcontent-ref %}

{% embed url="<https://youtu.be/urVp9y8FEEI>" %}

## Advanced

### JavaScript Widget

| Item                      | Description                                                                                                                                                                                                                     |
| ------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Class name                | wisej.web.TreeView for the TreeView. wisej.web.TreeNode for each tree node.                                                                                                                                                     |
| Theme appearance          | "tree", "tree-item" for the items in the tree view, "tree-folder" for the folders in the tree view, "tree-file" for the end nodes in the tree view. See [Themes](https://docs.wisej.com/theme-builder/theme-elements/elements). |
| TreeView child components | "scrollbar-x" is the horizontal scrollbar and "scrollbar-y" is the vertical scrollbar. See [JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model).                                                          |
| TreeItem child components | "checkbox" is the list item's checkbox. "label" is the node (folder)'s text. "icon" is the list item's icon. See [JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model).                                    |
| TreeNode child components | "open" is the icon showing whether the row is expanded. "checkbox" is the node's checkbox. "label" is the node's text. See [JavaScript](https://docs.wisej.com/docs/concepts/javascript-object-model).                          |
| ToolContainer state       | "treeview", see [Embedded Tools](https://docs.wisej.com/docs/controls/general/embedded-tools).                                                                                                                                  |
| Source code               | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)                                                                                                             |