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

Kendo UI TreeList wrapper for React

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

# Data Binding

The TreeList 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.TreeListDataSource`](https://docs.telerik.com/kendo-ui/api/javascript/data/schedulerdatasource) DataSource type. The `TreeListDataSource` contains instances of a custom [`kendo.data.TreeListModel`](https://docs.telerik.com/kendo-ui/api/javascript/data/schedulerevent) which represents the event data items of the TreeList.

## Binding to Local Data Arrays

The following example demonstrates how to initialize the TreeList and bind it to a local data array. The data objects contain both an `id` and a `parentId` field which describe the hierarchy of items. You can change these field names by using the [`schema.model`](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema-model) definition.

```jsx-preview
class TreeListContainer extends React.Component {

    constructor(props) {
        super(props);
        this.columns = [
            { field: "Position" },
            { field: "Name" },
        ]
        this.data = [
                    { id: 1, parentId: null, Name: "Jane Smith", Position: "CEO" },
                    { id: 2, parentId: 1,    Name: "Alex Sells", Position: "EVP Sales" },
                    { id: 3, parentId: 1,    Name: "Bob Price",  Position: "EVP Marketing" }
        ]
        this.dataSource = new kendo.data.TreeListDataSource({
            data: this.data,
            schema: {
                model: {
                    id: "id",
                    expanded: true
                }
            }
        });

        }
    render() {
        return (
            <div>
                <TreeList height={200}
                    columns={this.columns}
                    dataSource={this.dataSource}
                />
            </div>
        );
    }
}
ReactDOM.render(
    <TreeListContainer/>,
    document.querySelector('my-app')
);
```

## Binding to Remote Data Services

You can also bind the `TreeListDataSource` to remote data which means that the TreeList will load its items from a web service. Remote data binding enables the retrieval of data from the server and the saving of the TreeList data items to the server database. For more information, refer to the article on the [Kendo UI DataSource](https://docs.telerik.com/kendo-ui/framework/datasource/overview).

```jsx
class TreeListContainer extends React.Component {

    constructor(props) {
        super(props);
        this.columns = [
            { field: "LastName", title: "Last Name" },
            { field: "Position" }
        ]
        this.serviceRoot = "https://demos.telerik.com/kendo-ui/service";
        this.dataSource = new kendo.data.TreeListDataSource({
                transport: {
                    // Define the remote end points
                    read:  {
                        url: this.serviceRoot + "/EmployeeDirectory/All",
                        dataType: "jsonp"
                    }
                },
                // Define the model schema
                schema: {
                    model: {
                        id: "EmployeeId",
                        fields: {
                            EmployeeId: { type: "number", editable: false, nullable: false },
                            parentId: { field: "ReportsTo", nullable: true },
                            FirstName: { validation: { required: true } },
                            LastName: { validation: { required: true } },
                            HireDate: { type: "date" },
                            Phone: { type: "string" },
                            HireDate: { type: "date" },
                            BirthDate: { type: "date" },
                            Extension: { type: "number", validation: { min: 0, required: true } },
                            Position: { type: "string" }
                        }
                    }
                }
            });

    }
    render() {
        return (
            <div>
                <TreeList height={300}
                    columns={this.columns}
                    dataSource={this.dataSource}
                />
            </div>
        );
    }
}
ReactDOM.render(
    <TreeListContainer/>,
    document.querySelector('my-app')
);
```

## Suggested Links

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