All Components

Selection

The TreeView allows the user to select a single node or multiple nodes.

Setup

To enable the selection, apply the built-in SelectDirective directive. It accepts the kendoTreeViewSelectable property, which enables you to control the built-in selection behavior, and both boolean and SelectableSettings parameters.

If you use a SelectableSettings parameter, the TreeView enables you to specify the following options:

  • enabled—Determines if the selection is initially enabled. The default value is true.
  • mode—Sets the SelectionMode of the selection. The default value is single.
import { Component } from '@angular/core';
import { of } from 'rxjs/observable/of';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected keys: {{selectedKeys.join(",")}}
        </div>
        <kendo-treeview
            [nodes]="data"
            textField="text"
            [hasChildren]="hasChildren"
            [children]="fetchChildren"

            kendoTreeViewSelectable
            [(selectedKeys)]="selectedKeys"
        >
        </kendo-treeview>
  `
})
export class AppComponent {
    public selectedKeys: any[] = ['0_2'];

    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 hasChildren = (item: any) => item.items && item.items.length > 0;
    public fetchChildren = (item: any) => of(item.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);

Modes

The SelectDirective provides the default TreeView implementation for the single selection mode and the multiple selection mode of items.

Single Selection Mode

By default, the SelectDirective persists the selected item by utilizing its hierarchical index. To select a specific TreeView item by its hierarchical index, use the selectedKeys property.

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

import { of } from 'rxjs/observable/of';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected keys: {{selectedKeys.join(",")}}
        </div>
        <kendo-treeview
            [nodes]="data"
            textField="text"
            [hasChildren]="hasChildren"
            [children]="fetchChildren"

            kendoTreeViewExpandable
            [expandedKeys]="expandedKeys"

            kendoTreeViewSelectable
            [(selectedKeys)]="selectedKeys"
        >
        </kendo-treeview>
  `
})
export class AppComponent {
    public expandedKeys: any[] = ['0', '1'];
    public selectedKeys: any[] = ['0_1'];

    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 hasChildren = (item: any) => item.items && item.items.length > 0;
    public fetchChildren = (item: any) => of(item.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);

You can also persist the single selection state by an item field—for example, an id field. To select a specific TreeView item by its unique id field, use the selectedKeys property.

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

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected keys: {{selectedKeys.join(",")}}
        </div>
        <kendo-treeview
            [nodes]="data"
            textField="text"
            [hasChildren]="hasChildren"
            [children]="fetchChildren"

            kendoTreeViewExpandable
            [expandedKeys]="expandedKeys"

            kendoTreeViewSelectable
            [selectBy]="'text'"
            [(selectedKeys)]="selectedKeys"
        >
        </kendo-treeview>
  `
})
export class AppComponent {
    public expandedKeys: any[] = ['0', '1'];
    public selectedKeys: any[] = ['Sofas'];

    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 hasChildren = (item: any) => item.items && item.items.length > 0;
    public fetchChildren = (item: any) => of(item.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);

Multiple Selection Mode

To enable the multiple selection mode, use the kendoTreeViewSelectable property which sets the mode field to multiple.

By default, the SelectDirective persists the selected items by their hierarchical index. To display initially selected TreeView items, use the selectedKeys property and pass a list of hierarchical indices.

import { Component } from '@angular/core';
import { SelectableSettings } from '@progress/kendo-angular-treeview';

import { of } from 'rxjs/observable/of';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected keys: {{selectedKeys.join(",")}}
        </div>
        <kendo-treeview
            [nodes]="data"
            textField="text"
            [hasChildren]="hasChildren"
            [children]="fetchChildren"

            kendoTreeViewExpandable
            [expandedKeys]="expandedKeys"

            [kendoTreeViewSelectable]="selection"
            [(selectedKeys)]="selectedKeys"
        >
        </kendo-treeview>
  `
})
export class AppComponent {
    public expandedKeys: any[] = ['0', '1'];
    public selectedKeys: any[] = ['0_1'];

    public selection: SelectableSettings = { mode: 'multiple' };

    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 hasChildren = (item: any) => item.items && item.items.length > 0;
    public fetchChildren = (item: any) => of(item.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);

Similar to the single selection mode, you can also persist the multiple selection state by an item field—for example, an id field. To select TreeView items by their unique id fields, use the selectedKeys property and pass a list of the selected ids.

import { Component } from '@angular/core';
import { of } from 'rxjs/observable/of';
import { SelectableSetting } from '@progress/kendo-angular-treeview';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected keys: {{selectedKeys.join(",")}}
        </div>
        <kendo-treeview
            [nodes]="data"
            textField="text"
            [hasChildren]="hasChildren"
            [children]="fetchChildren"

            kendoTreeViewExpandable
            [expandedKeys]="expandedKeys"

            [kendoTreeViewSelectable]="selection"
            [selectBy]="'text'"
            [(selectedKeys)]="selectedKeys"
        >
        </kendo-treeview>
  `
})
export class AppComponent {
    public expandedKeys: any[] = ['0', '1'];
    public selectedKeys: any[] = ['Sofas'];

    public selection: SelectableSetting = { mode: 'multiple' };

    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 hasChildren = (item: any) => item.items && item.items.length > 0;
    public fetchChildren = (item: any) => of(item.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);

Modifying the Selection

When the user modifies the selection, the TreeView emits the selectionChange event. It contains the following information:

  • index—The index of the affected TreeView item.
  • dataItem—The data item of the selected TreeView item.

You can also render a specific item as selected by collecting the provided information and using the isSelected property.

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

/* tslint:disable: member-ordering */

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Selected keys: {{selectedKeys.join(",")}}
        </div>
        <kendo-treeview
            [nodes]="data"
            textField="text"
            [hasChildren]="hasChildren"
            [children]="fetchChildren"

            kendoTreeViewExpandable
            [expandedKeys]="expandedKeys"

            [isSelected]="isItemSelected"
            (selectionChange)="handleSelection($event)"
        >
        </kendo-treeview>
  `
})
export class AppComponent {
    public expandedKeys: any[] = ['0', '1'];

    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 hasChildren = (item: any) => item.items && item.items.length > 0;
    public fetchChildren = (item: any) => of(item.items);

    /* custom selection implementation below */

    public selectedKeys: any[] = ['0_1'];

    public isItemSelected = (_: any, index: string) => this.selectedKeys.indexOf(index) > -1;

    public handleSelection({ index }: any): void {
        this.selectedKeys = [index];
    }
}

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);
In this article