# Binding the Angular TreeList to OData

The [Kendo Angular TreeList](https://www.telerik.com/kendo-angular-ui/components/treelist) has representational functionality and is indifferent to where its data comes from and how it is retrieved and/or updated. This allows you to use any remote data source including the OData v4 protocol.

The following example demonstrates how to bind the TreeList by using the OData v4 protocol.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/treelist/data-binding/odata/source.txt)

## Setting Up OData Binding

The following steps show how to connect the TreeList to an OData v4 service and load hierarchical data on demand:

1. Create a method to fetch the parent and child nodes based on an index.

   ```ts
    public query(reportsTo: number): Observable<Employee[]> {
        if (reportsTo === 0) {
         return this.http
           .get(`${this.serviceUrl}/TopEmployees/`)
           .pipe(map((data: any) => <Employee[]>data.value));
       } else {
         return this.http
           .get(`${this.serviceUrl}/EmployeeSubordinates(${reportsTo})`)
           .pipe(map((data: any) => <Employee[]>data.value));
       }
   }
   ```

2. Get the data from the server and bind the TreeList to the obtained collection.

   ```ts
   public treelistData: Observable<Employee[]>;
   public ngOnInit(): void {
       this.treelistData = this.query(0);
   }
   ```

3. Set the [`data`](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent#data) input property of the component to an `Observable`. Once the data is received from an asynchronous source, pipe it through the `async` pipe.

   ```html
   <kendo-treelist
       [data]="treelistData | async"
       [fetchChildren]="fetchChildren" ... >
       <kendo-treelist-column field="FirstName" title="First Name"></kendo-treelist-column>
       ...
   </kendo-treelist>
   ```

4. To fetch the children nodes, initiate a server request with the corresponding index in `fetchChildren` callback.

   ```ts
   public fetchChildren = (item: Employee): Observable<Employee[]> => {
       return this.query(item.EmployeeID);
   };
   ```

> Create an editable TreeList using the OData v4 protocol by following the steps outlined in the [In-Cell Editing](https://www.telerik.com/kendo-angular-ui/components/treelist/editing/editing-in-cell) article.

## Suggested Links

* [Binding to Local Data](https://www.telerik.com/kendo-angular-ui/components/treelist/data-binding/local-data)
* [Binding to Remote Data](https://www.telerik.com/kendo-angular-ui/components/treelist/data-binding/remote-data)
* [API Reference of the TreeListComponent](https://www.telerik.com/kendo-angular-ui/components/treelist/api/treelistcomponent)
* [API Index of the TreeList](https://www.telerik.com/kendo-angular-ui/components/treelist/api)