Binding the Angular Data TreeList to OData

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 step-by-step guide shows how to bind the TreeList by using the OData v4 protocol:

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

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

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

   Copy Codepublic 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.

   Copy Code<kendo-treelist
       [data]="treelistDataData | 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.

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

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

Suggested Links

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