All Components

Data Binding

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

Basics

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 } from 'rxjs/Observable';
  import { of } from 'rxjs/observable/of';

  @Component({
      selector: 'my-app',
      template: `
      <kendo-treeview
          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.
          >
      </kendo-treeview>
  `
  })
  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.

import { Component } from '@angular/core';
import { of } from 'rxjs/observable/of';

@Component({
    selector: 'my-app',
    template: `
     <kendo-treeview
         textField="text"
         [nodes]="data"
         [children]="children"
         [hasChildren]="hasChildren"
     >
     </kendo-treeview>
 `
})
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' }
            ]
        }
    ];

    /**
     * A function that returns an observable instance which contains the
     * [child nodes](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-children)
     * for a given parent node.
     */
    public children = (dataitem: any): any[] => of(dataitem.items);

    /**
     * A function that determines whether a given node
     * [has children](https://www.telerik.com/kendo-angular-ui/components/treeview/api/TreeViewComponent/#toc-haschildren).
     */
    public hasChildren = (dataitem: any): boolean => !!dataitem.items;
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TreeViewModule } from '@progress/kendo-angular-treeview';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, TreeViewModule]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <kendo-treeview
        [nodes]="treeNodes"
        [textField]="[ 'categoryName', 'subCategoryName' ]"
        kendoTreeViewExpandable

        kendoTreeViewHierarchyBinding
        childrenField="subCategories">
    </kendo-treeview>
  `
})
export class AppComponent {
    public treeNodes: any[] = [
        {
            categoryName: 'Storage', subCategories: [
                { subCategoryName: 'Wall Shelving' },
                { subCategoryName: 'Floor Shelving' },
                { subCategoryName: 'Kids Storage' }
            ]
        },
        {
            categoryName: 'Lights', subCategories: [
                { subCategoryName: 'Ceiling' },
                { subCategoryName: 'Table' },
                { subCategoryName: 'Floor' }
            ]
        }
    ];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TreeViewModule } from '@progress/kendo-angular-treeview';

import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, TreeViewModule]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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.

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { CategoriesService } from './categories.service';

@Component({
    selector: 'my-app',
    styles: [`
        :host {
            height: 600px;
            overflow: auto;
        }
    `],
    template: `
     <kendo-treeview
        [nodes]="categories | async"
        [textField]="['CategoryName', 'ProductName']"
        kendoTreeViewExpandable

        [hasChildren]="hasChildren"
        [children]="fetchChildren"
      >
    </kendo-treeview>
  `
})
export class AppComponent implements OnInit {
    public categories: Observable<any[]>;

    constructor(private categoryService: CategoriesService) { }

    public ngOnInit(): void {
        this.categories = this.categoryService.fetchCategories();
    }

    public hasChildren = (item: any) => 'CategoryName' in item;

    public fetchChildren = (item: any) => this.categoryService.fetchProducts(item.CategoryID);

}
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import { map } from 'rxjs/operators/map';

@Injectable()
export class CategoriesService {

  private BASE_URL = 'https://odatasampleservices.azurewebsites.net/V4/Northwind/Northwind.svc';

  constructor(private http: HttpClient) { }

  public fetchCategories(): Observable<any[]> {
    return this.fetch(`${this.BASE_URL}/Categories`);
  }

  public fetchProducts(categoryID: number): any {
    return this.fetch(`${this.BASE_URL}/Categories(${categoryID})/Products`);
  }

  private fetch(url: string): Observable<any[]> {
    return this.http
      .get(url)
      .pipe(map((response: any) => response.value));
  }
}

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TreeViewModule } from '@progress/kendo-angular-treeview';

import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { CategoriesService } from './categories.service';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, TreeViewModule, HttpClientModule],
  providers: [CategoriesService]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <kendo-treeview
        [nodes]="treeNodes"
        textField="desc"

        kendoTreeViewExpandable

        kendoTreeViewFlatDataBinding
        idField="id"
        parentIdField="parentId">
    </kendo-treeview>
  `
})
export class AppComponent {
    public treeNodes: any[] = [
        {
          id: 1,
          desc: 'Root Node 1'
        }, {
          id: 2,
          desc: 'Root Node 2'
        }, {
          id: 3,
          parentId: 2,
          desc: 'Child node of Root Node 2'
        }
    ];
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TreeViewModule } from '@progress/kendo-angular-treeview';

import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, TreeViewModule]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article