---
title: Overview
page_title: TreeView Overview - Components - Kendo UI Wrappers for React
description: "Get an overview of the features the Kendo UI TreeView wrapper for React delivers and use the component in React projects."
slug: overview_treeview
position: 0
---

# TreeView Overview

The TreeView displays hierarchical data in a traditional tree structure.

It supports user interaction through mouse or touch events and performs re-ordering operations by using the drag-and-drop functionality.

The TreeView wrapper for React is a client-side wrapper for the [Kendo UI TreeView](http://docs.telerik.com/kendo-ui/api/javascript/ui/treeview) widget.

## Basic Usage

The following example demonstrates the TreeView in action.

{% meta height:460 %}
```jsx-preview
class TreeViewContainer extends React.Component {

        constructor(props) {
            super(props);
            this.dataSource = [{
                id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                    {
                        id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                            { id: 3, text: "about.html", spriteCssClass: "html" },
                            { id: 4, text: "index.html", spriteCssClass: "html" },
                            { id: 5, text: "logo.png", spriteCssClass: "image" }
                        ]
                    },
                    {
                        id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
                            { id: 7, text: "mockup.jpg", spriteCssClass: "image" },
                            { id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
                        ]
                    },
                    {
                        id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                            { id: 10, text: "February.pdf", spriteCssClass: "pdf" },
                            { id: 11, text: "March.pdf", spriteCssClass: "pdf" },
                            { id: 12, text: "April.pdf", spriteCssClass: "pdf" }
                        ]
                    }
                ]
            }]
            this.checkedNodes = []
            this.state = {
                message: "",
            };
            this.onCheck = this.onCheck.bind(this);
            this.checkedNodeIds = this.checkedNodeIds.bind(this);
            this.checkboxes = {
                checkChildren: true
            }

        }

        onCheck = (e) => {
                this.checkedNodes = [];
                var treeView = $("[data-role='treeview']").data("kendoTreeView")

                this.checkedNodeIds(treeView.dataSource.view(), this.checkedNodes);

            if (this.checkedNodes.length > 0) {
                this.setState({
                   message : "IDs of checked nodes: " + this.checkedNodes.join(",")
                })
            } else {
                this.setState({
                    message : "No nodes checked."
                })

            }
        }

        checkedNodeIds = (nodes, checkedNodes) => {
            for (var i = 0; i < nodes.length; i++) {
                if (nodes[i].checked) {
                    this.checkedNodes.push(nodes[i].id);
                }

                if (nodes[i].hasChildren) {
                    this.checkedNodeIds(nodes[i].children.view(), this.checkedNodes);
                }
            }
        }

    render() {
        return (
            <div>
                <div>
                    <h4>Check nodes</h4>
                    <TreeView checkboxes={this.checkboxes}
                              check={this.onCheck}
                              dataSource={this.dataSource} />
                </div>
                <div>
                    <h4>Status</h4>
                    <p>{this.state.message}</p>
                </div>
            </div>
        );
     }
    }
ReactDOM.render(
    <TreeViewContainer/>,
    document.querySelector('my-app')
);
```
{% endmeta %}


## Installation

1. Download and install the package.

    ```sh
        npm install --save @progress/kendo-treeview-react-wrapper
    ```

2. Once installed, import the TreeView component from the package.

    ```sh
        import { TreeView } from '@progress/kendo-treeview-react-wrapper';
    ```

3. You are required to install one of the Kendo UI themes to style your components.

## Dependencies

The TreeView package requires you to install the following [peer dependencies](https://nodejs.org/en/blog/npm/peer-dependencies/) in your application:

* @progress/kendo-ui

## Features and Functionalities

* [Data binding]({% slug databinding_treeview %})
* [Dragging and dropping]({% slug drag_and_drop_treeview %})
* [Item properties]({% slug item_properties_treeview %})

## Events

The following example demonstrates basic TreeView events. You can subscribe to [all TreeView events](http://docs.telerik.com/kendo-ui/api/javascript/ui/treeview#events) by the handler name.

```jsx
class TreeViewContainer extends React.Component {

    constructor(props) {
        super(props);
        this.dataSource = [{
                id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
                    {
                        id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
                            { id: 3, text: "about.html", spriteCssClass: "html" },
                            { id: 4, text: "index.html", spriteCssClass: "html" },
                            { id: 5, text: "logo.png", spriteCssClass: "image" }
                        ]
                    },
                    {
                        id: 6, text: "New Web Site", expanded: true, spriteCssClass: "folder", items: [
                            { id: 7, text: "mockup.jpg", spriteCssClass: "image" },
                            { id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
                        ]
                    },
                    {
                        id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
                            { id: 10, text: "February.pdf", spriteCssClass: "pdf" },
                            { id: 11, text: "March.pdf", spriteCssClass: "pdf" },
                            { id: 12, text: "April.pdf", spriteCssClass: "pdf" }
                        ]
                    }
                ]
        }]
        this.onDataBound = this.onDataBound.bind(this);
        this.onSelect = this.onSelect.bind(this);
        this.onChange = this.onChange.bind(this);
    }

    onDataBound = (e) => {
         console.log("event :: dataBound");
         console.log(e);
    }

    onSelect = (e) => {
         console.log("event :: select");
         console.log(e);
    }

    onChange = (e) => {
         console.log("event :: change");
         console.log(e);
    }

    render() {
        return (
            <div>
                <TreeView select={this.onSelect}
                    change={this.onChange}
                    dataBound={this.onDataBound}
                    dataSource={this.dataSource}/>
            </div>
        );
    }
}
ReactDOM.render(
    <TreeViewContainer/>,
    document.querySelector('my-app')
);
```

## Suggested Links

* [Kendo UI TreeView for jQuery](https://docs.telerik.com/kendo-ui/controls/navigation/treeview/overview)
* [API Reference of the TreeView Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview)