Binding the Angular TreeList to OData

Updated on Jun 8, 2026

The Kendo Angular 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.

Change Theme

Theme

Loading ...

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 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 article.

Suggested Links

• Binding to Local Data
• Binding to Remote Data
• API Reference of the TreeListComponent
• API Index of the TreeList