New to Kendo UI for Angular? Start a free 30-day trial

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:

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

 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));
    }
}

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

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

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]="treelistDataData | async"
    [fetchChildren]="fetchChildren" ... >
    <kendo-treelist-column field="FirstName" title="First Name"></kendo-treelist-column>
    ...
</kendo-treelist>

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

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

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

Change Theme

Theme

Loading ...

Binding the Angular Data TreeList to OData

Suggested Links