Binding the Angular TreeList to Remote Data

You can bind the TreeList to server-side (remote) data and display the data in tabular form. This approach is suitable for scenarios that involve remote data services and server-side data operations.

The Kendo Angular TreeList has representational functionality and isn't affected by the way how the data gets updated and where it comes from. This allows you to use any remote data source. Once the data is received from the server, it can be loaded in two ways. Choose the appropriate approach based on the specific configuration requirements:

• Use manual binding through the data property—Provides more control when implementing data operations.
• Provide a custom data-binding directive—Suitable for abstracting away the communication with the remote data service.

Using Manual Binding

The manual binding provides the most straightforward way of binding an array of items to the TreeList. To bind the TreeList to remote data:

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

   Copy Codepublic query(reportsTo: number = null): Observable<Employee[]> {
       return this.http.jsonp<Employee[]>(
           `${this.serviceUrl}?id=${reportsTo}`,
           'callback'
       );
   }

2. Get the data from the server.

   Copy Codepublic rootData: Observable<Employee[]>;
   public ngOnInit(): void {
       this.rootData = this.query();
   }

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

4. To retrieve the child nodes of a particular node from the remote service, initiate a server request with the corresponding index in fetchChildren callback.

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

5. Declare a hasChildren function that checks if a node is expandable.

   Copy Codepublic hasChildren = (item: Employee): boolean => {
       return item.hasChildren;
   };

The following example demonstrates how to bind the TreeList to remote data.

Using a Remote-Binding Directive

A remote data-binding directive is suitable for reducing the boilerplate code required for the communication between the TreeList and the remote data service. The directive can be also reused across multiple TreeLists throughout the application as necessary.

The following step-by-step guide shows how to create a remote data-binding directive.

1. Create an Angular service to encapsulate the logic for fetching the data from the remote service.

   Copy Code@Injectable()
   export class EmployeesService {
       private url: string = defaultUrl;
   
       constructor(private http: HttpClient) {}
   
       public query(reportsTo: number = null): Observable<Employee[]> {
           return this.http.jsonp<Employee[]>(
               `${this.url}?id=${reportsTo}`,
               'callback'
           );
       }
   }

2. Create a custom directive and use dependency injection to provide the instance of the EmployeesService and the TreeListComponent. Declare the fetchChildren and hasChildren callback functions.

   Copy Code@Directive({
       selector: '[employeesBinding]'
   })
   export class EmployeesBindingDirective {
       constructor(
           private service: EmployeesService,
           private treelist: TreeListComponent
       ) {}
   
       public fetchChildren = (item: Employee): Observable<Employee[]> => {
           return this.service.query(item.EmployeeId);
       }
   
       public hasChildren = (item: Employee): boolean => {
           return item.hasChildren;
       }
   }

3. To maintain the this reference, hook up the fetchChildren and hasChildren callbacks by using bind() inside OnInit lifecycle hook. Assign the observable of root nodes to data property of the TreeList component reference.

   Copy Codepublic ngOnInit(): void {
       this.treelist.fetchChildren = this.fetchChildren.bind(this);
       this.treelist.hasChildren = this.hasChildren.bind(this);
   
       this.treelist.data = this.service.query();
   }

4. Now you can use the custom directive on the TreeList instance.

   Copy Code<kendo-treelist employeesBinding>
       <kendo-treelist-column title="Name"> </kendo-treelist-column>
       ...
   </kendo-treelist>

The following example demonstrates how to implement a remote data binding directive in TreeList.

Suggested Links

• Overview of Data Binding
• API Reference of the TreeListComponent
• API Index of the TreeList