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

Data Binding

The TreeView provides core settings for data binding scenarios and enables you to work with various types of data.


The TreeView exposes the following core data-binding options:

  • nodes (field)—Renders the collection which will be visualized as a top-most level.
  • textField (field)—Determines the node field that will be displayed.
  • hasChildren (function)—Determines if a given node has children.
  • children (function)—Supplies the child node based on the provided parent.
   import { Component } from '@angular/core';
   import { Observable, of } from 'rxjs';

       selector: 'my-app',
       template: `
           kendoTreeViewExpandable <-- Manages the expand-collapse state.

           [nodes]="data" <-- The nodes are in the data field of the host component.
           textField="text" <-- The text field of the node will be displayed.

           [children]="fetchChildren"  <-- The fetchChildren function will provide the child nodes.
           [hasChildren]="hasChildren" <-- Use the fetchChildren function to check if a node has children.
   export class AppComponent {

       public data: any[] = [{
               text: "Furniture", items: [
                   { text: "Tables & Chairs" },
                   { text: "Sofas" },
                   { text: "Occasional Furniture" }
           }, {
               text: "Decor", items: [
                   { text: "Bed Linen" },
                   { text: "Curtains & Blinds" },
                   { text: "Carpets" }

       public fetchChildren(node: any): Observable<any[]> {
           //Return the items collection of the parent node as children.
           return of(node.items);

       public hasChildren(node: any): boolean {
           //Check if the parent node has children.
           return node.items && node.items.length > 0;

Hierarchical Data Binding

To render a hierarchical set of data, implement the children and hasChildren functions.

View Source
Change Theme:

Built-in Directives

The built-in data-binding directives provide specialized implementations of required callbacks and events, simplify data binding, minimize boilerplate code, and support flat or heterogeneous data.

The TreeView supports the following built-in directives:

  • kendoTreeViewHierarchyBinding—Handles the binding to hierarchical data.
  • kendoTreeViewFlatDataBinding—Handles the binding to flat data by mapping the data to a hierarchical structure and by using the configured parent-child relation.

Types of Data

The TreeView provides options for binding it to:

Local Heterogeneous Data

The following example demonstrates how to use kendoTreeViewHierarchyBinding to bind the TreeView to local data. The childrenField option indicates which field of the parent node contains the children. Setting the textField to an array allows you to have separate field names for each level.

View Source
Change Theme:

Remote Heterogeneous Data

The following example demonstrates how to fetch remote data and bind the TreeView to it. While the function that is assigned to the hasChildren setting signals if the given parent node has child nodes, the children option fetches and supplies the data for the child nodes.

View Source
Change Theme:

Flat Data

The following example demonstrates how to use kendoTreeViewFlatDataBinding to bind the TreeView to flat data. By using the idField and parentIdField to configure the relation between parent and child nodes, you can convert flat data to hierarchal structure.

View Source
Change Theme: