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

Binding the Angular TreeList to Remote Data

Updated on Jun 8, 2026

You can bind the Angular 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.

Manual Data Management

The manual data management approach is suitable for simple scenarios that require a straightforward binding of the TreeList to remote data. This approach requires more boilerplate code compared to using a custom directive, but it provides more control over the data operations and the communication with the server.

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

Change Theme

Theme

Loading ...

The following step-by-step guide shows how to bind the TreeList to remote data:

Initialize the root data as an observable that resolves asynchronously.

public rootData: Observable<SupplyChainNode[]>;

public ngOnInit(): void {
    this.rootData = of(supplyChain.filter((n) => n.parentId === null)).pipe(delay(600));
}

Set the data input property to the observable and pipe it through the async pipe.

html

<kendo-treelist
    [data]="rootData | async"
    [fetchChildren]="fetchChildren"
    [hasChildren]="hasChildren"
>
    <kendo-treelist-column [expandable]="true" field="name" title="Name"></kendo-treelist-column>
    ...
</kendo-treelist>

To retrieve the child nodes of a particular node, return an observable in the fetchChildren callback.

public fetchChildren = (node: SupplyChainNode): Observable<SupplyChainNode[]> => {
    return of(supplyChain.filter((n) => n.parentId === node.id)).pipe(delay(400));
};

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

public hasChildren = (node: SupplyChainNode): boolean => {
    return supplyChain.some((n) => n.parentId === node.id);
};

Using a Remote-Binding Directive

The remote data-binding directive abstracts away the communication between the TreeList and the remote data service. This approach is suitable for scenarios that require a more complex configuration of the data operations or when you want to reuse the same data-binding logic across multiple TreeLists in the application.

The following example demonstrates how to create a custom directive for remote data binding.

Change Theme

Theme

Loading ...

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.

@Injectable()
export class SupplyChainService {
    public getRoots(): Observable<SupplyChainNode[]> {
        return of(supplyChain.filter((n) => n.parentId === null)).pipe(delay(600));
    }

    public getChildren(parentId: number): Observable<SupplyChainNode[]> {
        return of(supplyChain.filter((n) => n.parentId === parentId)).pipe(delay(400));
    }

    public hasChildren(node: SupplyChainNode): boolean {
        return supplyChain.some((n) => n.parentId === node.id);
    }
}

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

@Directive({
    selector: '[supplyChainBinding]',
    standalone: true,
    providers: [SupplyChainService],
})
export class SupplyChainBindingDirective implements OnInit {
    constructor(
        private service: SupplyChainService,
        private treelist: TreeListComponent
    ) {}

    public fetchChildren = (node: SupplyChainNode): Observable<SupplyChainNode[]> => {
        return this.service.getChildren(node.id);
    };

    public hasChildren = (node: SupplyChainNode): boolean => {
        return this.service.hasChildren(node);
    };
}

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.getRoots();
}

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

html

<kendo-treelist supplyChainBinding>
    <kendo-treelist-column [expandable]="true" field="name" title="Name"></kendo-treelist-column>
    ...
</kendo-treelist>

Indicating Ongoing Data Operations

You can provide feedback to the user about ongoing data operations by showing loading indicators. The TreeList has a built-in loading property that you can set to true to display a loading indicator over the component. Additionally, you can use the Kendo UI for Angular Loader component to show a more customizable loading indicator.

The following example demonstrates how to integrate the Kendo UI Loader with the TreeList.

Change Theme

Theme

Loading ...

Binding the Angular TreeList to Remote Data

Manual Data Management

Using a Remote-Binding Directive

Indicating Ongoing Data Operations

Suggested Links