@progress/kendo-treeview-react-wrapper/docs/data-binding.md

Kendo UI TreeView wrapper for React

---
title: Data Binding
page_title: Data Binding - TreeView - Kendo UI Wrappers for React
description: "Bind the Kendo UI TreeView wrapper for React to local data arrays or remote data services."
slug: databinding_treeview
position: 2
---

# Data Binding

The TreeView requires a data source to bind it to local or remote data and retrieve the data for display.

To bind the component to data, use the special [`kendo.data.TreeViewDataSource`](https://docs.telerik.com/kendo-ui/api/javascript/data/hierarchicaldatasource) DataSource type.

## Binding to Local Data Arrays

The following example demonstrates how to create a TreeView and bind it to a local data source.

{% meta height:400 %}
```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" }
                        ]
                    }
                ]
            }]
        }

    render() {
        return (
            <div>
                <TreeView dataSource={this.dataSource} />
            </div>
        );
     }
    }
ReactDOM.render(
    <TreeViewContainer/>,
    document.querySelector('my-app')
);
```
{% endmeta %}

## Binding to Remote Data Services

The following example demonstrates how to create a TreeView and bind it to a remote HierarchicalDataSource.

```jsx
class TreeViewContainer extends React.Component {

        constructor(props) {
            super(props);
            this.dataSource = {
                transport: {
                    read: {
                        url: "https://demos.telerik.com/kendo-ui/service/Employees",
                        dataType: "jsonp"
                    }
                },
                schema: {
                    model: {
                        id: "EmployeeId",
                        hasChildren: "HasEmployees"
                    }
                }       
            }
        }

    render() {
        return (
            <div>
                <TreeView dataSource={this.dataSource}
                    dataTextField={"FullName"}/>
            </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)