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

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:

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

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

Get the data from the server.

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

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

To retrieve the child nodes of a particular node from the remote service, initiate a server request with the corresponding index in fetchChildren callback.
ts
```
public fetchChildren = (item: Employee): Observable<Employee[]> => {
    return this.query(item.EmployeeID);
};
```

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

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

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

Change Theme

Theme

Loading ...

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.

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

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

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.

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

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.

public ngOnInit(): void {
    this.treelist.fetchChildren = this.fetchChildren.bind(this);
    this.treelist.hasChildren = this.hasChildren.bind(this);

    this.treelist.data = this.service.query();
}

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