# 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="/files/-MQZAPH6fyWY0P4s4rml" 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="/pages/-MIuBURD4h5aGmPxmesZ" %}
[TreeView](/docs/controls/lists/treeview.md)
{% 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](/docs/concepts/javascript-object-model.md).                                                                             |
| 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](/docs/concepts/javascript-object-model.md).                                                       |
| 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](/docs/concepts/javascript-object-model.md).                                             |
| ToolContainer state       | "treeview", see [Embedded Tools](/docs/controls/general/embedded-tools.md).                                                                                                                                                     |
| Source code               | [https://github.com/iceteagroup/wisej-js](https://github.com/iceteagroup/wisej-js/blob/master/wisej.web.TextBox.js)                                                                                                             |


---

# 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.wisej.com/docs/controls/lists/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.