Components / TreeView

Checkboxes

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

Setup

To implement node checkboxes, apply the built-in CheckDirective directive. It accepts the kendoTreeViewCheckable property, which enables you to control the built-in checkbox behavior, and both boolean and CheckableSettings parameters.

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

enabled—Determines if the checkbox feature is initially enabled. The default value is true.
mode—Sets the CheckMode of the checkbox feature. The default value is multiple.
checkChildren—Determines if the children checkboxes will get selected when the user selects the parent checkbox. The default value is true.
checkParents—Determines if the parent checkbox will get selected when the user selects all its children checkboxes. The default value is true. When checkParents is enabled, the TreeView displays the indeterminate state of the parent checkboxes too.
checkOnClick—Specifies if clicking the node will check or uncheck the item. The default value is false.

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

@Component({
    selector: 'my-app',
    styles: [`.right { margin-right: 5px }`],
    template: `
        <fieldset>
            <legend>Check Settings</legend>
            <div class="k-form-field" style="margin-bottom: 1em;">
                <span class="right"><strong>Mode:</strong></span>
                <input type="radio" name="checkMode" id="singleCheck" value="single" class="k-radio right"
                    [(ngModel)]="checkMode" />
                <label class="k-radio-label right" for="singleCheck">Single</label>
                <input type="radio" name="checkMode" id="multipleCheck" value="multiple" class="k-radio"
                    [(ngModel)]="checkMode" />
                <label class="k-radio-label" for="multipleCheck">Multiple</label>
            </div>
            <div  *ngIf="checkMode == 'multiple'">
                <label class="k-form-field right">
                    <input
                        type="checkbox"
                        id="enableCheck"
                        class="k-checkbox"
                        [(ngModel)]="enableCheck"
                    />
                    <label class="k-checkbox-label" for="enableCheck">Enable</label>
                </label>
                <label class="k-form-field right">
                    <input
                        type="checkbox"
                        id="checkChildren"
                        class="k-checkbox"
                        [(ngModel)]="checkChildren"
                    />
                    <label class="k-checkbox-label" for="checkChildren">Check all children</label>
                </label>
                <label class="k-form-field right">
                    <input
                        type="checkbox"
                        id="checkParents"
                        class="k-checkbox"
                        [(ngModel)]="checkParents"
                    />
                    <label class="k-checkbox-label" for="checkParents">Check all parents when children are checked</label>
                </label>
                <label class="k-form-field right">
                    <input
                        type="checkbox"
                        id="checkOnClick"
                        class="k-checkbox"
                        [(ngModel)]="checkOnClick"
                    />
                    <label class="k-checkbox-label" for="checkOnClick">Check the node on click</label>
                </label>
            </div>
        </fieldset>
        <br />
        <kendo-treeview
            [nodes]="data"
            [children]="children"
            [hasChildren]="hasChildren"
            textField="text"

            [kendoTreeViewCheckable]="checkableSettings"
            [(checkedKeys)]="checkedKeys"
        >
        </kendo-treeview>
        <div style="margin: 10px 0">
            <i>Press SPACE to check/uncheck the active node</i>
            <div class="example-config">
                Checked keys: {{checkedKeys.join(",")}}
            </div>
        </div>
  `
})
export class AppComponent {
    public checkedKeys: any[] = ['1'];

    public enableCheck = true;
    public checkChildren = true;
    public checkParents = true;
    public checkOnClick = false;
    public checkMode: any = 'multiple';
    public selectionMode: any = 'single';

    public get checkableSettings(): CheckableSettings {
        return {
            checkChildren: this.checkChildren,
            checkParents: this.checkParents,
            enabled: this.enableCheck,
            mode: this.checkMode,
            checkOnClick: this.checkOnClick
        };
    }

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

    public children = (dataItem: any): any[] => of(dataItem.items);
    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 { FormsModule } from '@angular/forms';
import { TreeViewModule } from '@progress/kendo-angular-treeview';

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

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, TreeViewModule, FormsModule]
})
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 CheckDirective provides the default TreeView implementation for the single check mode and the multiple check mode of items.

Single Check Mode

To enable the single check mode, use the kendoTreeViewCheckable property which sets the mode field to single.

The single check mode allows you to check items based on their:

Hierarchical index
Item field

Single Check by Hierarchical Index

The CheckDirective persists the checked state of the checkbox by utilizing the hierarchical index of the item. To select a specific TreeView item by its hierarchical index, use the checkedKeys property.

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

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

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

            [kendoTreeViewCheckable]="{ mode: 'single' }"
            [(checkedKeys)]="checkedKeys"
        >
        </kendo-treeview>
        <i>Press SPACE to check/uncheck the active node</i>
  `
})
export class AppComponent {
    public checkedKeys: any[] = ['1'];

    public data: any[] = [
        {
          text: 'Furniture', items: [
            { text: 'Tables & Chairs' },
            { text: 'Sofas' }
          ]
        },
        { text: 'Decor' },
        { text: 'Outdoors' }
    ];

    public children = (dataItem: any): any[] => of(dataItem.items);
    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);

Single Check by Item Field

You can also persist the checked state of a single node by an item field—for example, a text field. To select a specific TreeView item by its unique text field, use the checkedKeys property.

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

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

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

            [kendoTreeViewCheckable]="{ mode: 'single' }"
            [checkBy]="'text'"
            [(checkedKeys)]="checkedKeys"
        >
        </kendo-treeview>

        <i>Press SPACE to check/uncheck the active node</i>
  `
})
export class AppComponent {
    public checkedKeys: any[] = ['Sofas'];

    public data: any[] = [
        {
          text: 'Furniture', items: [
            { text: 'Tables & Chairs' },
            { text: 'Sofas' }
          ]
        },
        { text: 'Decor' },
        { text: 'Outdoors' }
    ];

    public children = (dataItem: any): any[] => of(dataItem.items);
    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);

Multiple Check Mode

The multiple check mode is enabled by default.

The multiple check mode allows you to check items based on their:

Hierarchical index
Item field

Multiple Check by Hierarchical Index

The CheckDirective persists the checked state of the checkboxes by utilizing the hierarchical index of the items. To display initially checked TreeView items, use the checkedKeys property and pass a list of hierarchical indices.

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

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

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

            kendoTreeViewCheckable
            [(checkedKeys)]="checkedKeys"
        >
        </kendo-treeview>
        <i>Press SPACE to check/uncheck the active node</i>
  `
})
export class AppComponent {
    public checkedKeys: any[] = ['0_0', '1'];

    public data: any[] = [
        {
          text: 'Furniture', items: [
            { text: 'Tables & Chairs' },
            { text: 'Sofas' }
          ]
        },
        { text: 'Decor' },
        { text: 'Outdoors' }
    ];

    public children = (dataItem: any): any[] => of(dataItem.items);
    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);

Multiple Check by Item Field

Similar to the single check mode, you can also persist the checked state of multiple items by an item field—for example, a text field. To select specific TreeView items by their unique text fields, use the checkedKeys property and pass a list of the checked data item field values.

If you use an item field or a callback function, the indeterminate state will not be displayed. To mark a particular item with indeterminate state, define a custom isChecked callback.

import { Component } from '@angular/core';
import { CheckableSettings, CheckedState } from '@progress/kendo-angular-treeview';

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

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

            kendoTreeViewCheckable
            [(checkedKeys)]="checkedKeys"
            [checkBy]="key"
            [isChecked]="isChecked"
        >
        </kendo-treeview>

        <i>Press SPACE to check/uncheck the active node</i>
  `
})
export class AppComponent {
    public checkedKeys: any[] = ['Sofa 2', 'Decor'];
    public key = 'text';

    public data: any[] = [
        {
          text: 'Furniture', items: [
            { text: 'Tables & Chairs' },
            {
              text: 'Sofas', items: [
                { text: 'Sofa 1' },
                { text: 'Sofa 2' }
              ]
            }
          ]
        },
        { text: 'Decor' },
        { text: 'Outdoors' }
    ];

    public children = (dataItem: any): any[] => of(dataItem.items);
    public hasChildren = (dataItem: any): boolean => !!dataItem.items;

    // Custom logic handling Indeterminate state when custom data item property is persisted
    public isChecked = (dataItem: any, index: string): CheckedState => {
        if (this.containsItem(dataItem)) { return 'checked'; }

        if (this.isIndeterminate(dataItem.items)) { return 'indeterminate'; }

        return 'none';
    }

    private containsItem(item: any): boolean {
        return this.checkedKeys.indexOf(item[this.key]) > -1;
    }

    private isIndeterminate(items: any[] = []): boolean {
      let idx = 0;
      let item;

      while (item = items[idx]) {
        if (this.isIndeterminate(item.items) || this.containsItem(item)) {
          return true;
        }

        idx += 1;
      }

      return false;
    }
}

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);

Check-All Feature

The CheckDirective is designed to check all children nodes that are available in the TreeView. If the checked item has children which are not loaded yet, they will not appear in the checkedKeys collection. Once the node is expanded, the children will be dynamically added.

Because the item indices are unavailable beforehand, the checkedKeys will be dynamically added when the nodes get expanded.

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

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

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Checked keys: {{checkedKeys.join(",")}}
        </div>
        <i>Expand the first node to see dynamic checked keys addition.</i>
        <kendo-treeview
            [nodes]="data"
            textField="text"

            kendoTreeViewExpandable
            [children]="fetchChildren.bind(this)"
            [hasChildren]="hasChildren"

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

    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 parent node's items collection 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;
    }
}

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 Checked State

When the user selects an item by its checkbox, the TreeView emits the checkedChange event. The passed argument is of TreeItemLookup type and contains the following information:

item—The index and the data item of the affected TreeView item.
parent—The parent TreeView item of the affected TreeView item.
children—The children TreeView items of the affected TreeView item.

You can also render a specific checkbox as checked by collecting the provided information and using the isChecked property.

To display a checkbox next to each TreeView item, set the checkboxes property to true.

Custom Single-Check Directive

The following example demonstrates how to implement a custom single-check directive.

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

/* tslint:disable: member-ordering */

@Component({
    selector: 'my-app',
    template: `
        <div class="example-config">
            Checked keys: {{checkedKeys.join(",")}}
        </div>
        <kendo-treeview
            [nodes]="data"

            [children]="children"
            [hasChildren]="hasChildren"

            [isChecked]="isItemChecked"
            (checkedChange)="handleChecking($event)"
            textField="text"
        >
        </kendo-treeview>
        <i>Press SPACE to check/uncheck the active node</i>
  `
})
export class AppComponent {
    public data: any[] = [
        {
          text: 'Furniture', items: [
            { text: 'Tables & Chairs' },
            { text: 'Sofas' }
          ]
        },
        { text: 'Decor' },
        { text: 'Outdoors' }
    ];

    public children = (dataItem: any): any[] => of(dataItem.items);
    public hasChildren = (dataItem: any): boolean => !!dataItem.items;

    /* custom check implementation below */

    public checkedKeys: any[] = ['0_0'];

    public isItemChecked = (_: any, index: string) => {
        return this.checkedKeys.indexOf(index) > -1 ? 'checked' : 'none';
    }

    public handleChecking(itemLookup: TreeItemLookup): void {
        this.checkedKeys = [itemLookup.item.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);

Custom Multi-Check Directive

The following example demonstrates how to use a more complex approach and implement a custom multi-check directive.

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

/* tslint:disable:member-ordering */

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

            kendoTreeViewExpandable
            [children]="children"
            [hasChildren]="hasChildren"

            customCheck
            [(checkedKeys)]="checkedKeys">
        </kendo-treeview>
        <i>Press SPACE to check/uncheck the active node</i>
  `
})
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 children = (dataItem: any): any[] => of(dataItem.items);
    public hasChildren = (dataItem: any): boolean => !!dataItem.items;

    public checkedKeys: any[] = ['0_1', '1'];
}

import { ChangeDetectorRef, Directive, OnDestroy, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { TreeViewComponent, CheckableSettings, CheckedState, TreeItemLookup } from '@progress/kendo-angular-treeview';
import { Subscription } from 'rxjs/Subscription';

const indexChecked = (keys, index) => keys.filter(k => k === index).length > 0;

/**
 * A directive which manages the node in-memory checked state of the TreeView.
 */
@Directive({ selector: '[customCheck]' })
export class CustomCheckDirective implements OnInit, OnDestroy {
    /**
     * @hidden
     */
    @Input() public set isChecked(value: <T>(item: T, index: string) => CheckedState) {
        this.treeView.isChecked = value;
    }

    /**
     * Defines the collection that will store the checked keys.
     */
    @Input() public checkedKeys: any[] = [];

    /**
     * Fires when the `checkedKeys` collection was updated.
     */
    @Output() public checkedKeysChange: EventEmitter<string[]> = new EventEmitter<string[]>();

    protected subscriptions: Subscription = new Subscription(() => {/**/ });
    protected resolvedPromise: Promise<any> = Promise.resolve(null);

    constructor(protected treeView: TreeViewComponent, private cdr: ChangeDetectorRef) { }

    public ngOnInit(): void {
        this.subscriptions.add(
            this.treeView.checkedChange
                .subscribe((e) => this.checkMultiple(e))
        );

        this.subscriptions.add(
            this.treeView.childrenLoaded
                .subscribe((e) => {
                    this.resolvedPromise.then(() => {
                        this.addChildrenKeys(e);
                        this.cdr.detectChanges();
                    });
                })
        );

        this.treeView.isChecked = this.isItemChecked.bind(this);
    }

    public ngOnDestroy(): void {
        this.subscriptions.unsubscribe();
    }

    protected isItemChecked(_: any, index: string): CheckedState {
        const checkedKeys = this.checkedKeys.filter((k) => k.indexOf(index) === 0);

        if (indexChecked(checkedKeys, index)) {
            return 'checked';
        }

        if (checkedKeys.length) {
            return 'indeterminate';
        }

        return 'none';
    }

    protected checkMultiple(node: TreeItemLookup): void {
        this.checkNode(node);
        this.checkParents(node.parent);
        this.notify();
    }

    private checkNode(node: TreeItemLookup, check?: boolean): void {
        const key = node.item.index;
        const idx = this.checkedKeys.indexOf(key);

        const isChecked = idx > -1;
        const shouldCheck = check === undefined ? !isChecked : check;
        const isKeyPresent = key !== undefined && key !== null;

        if (!isKeyPresent || (isChecked && check)) { return; }

        if (isChecked) {
            this.checkedKeys.splice(idx, 1);
        } else {
            this.checkedKeys.push(key);
        }

        node.children.map(n => this.checkNode(n, shouldCheck));
    }

    private checkParents(parent: any): void {
        let currentParent = parent;

        while (currentParent) {
            const parentKey = currentParent.item.index;
            const parentIndex = this.checkedKeys.indexOf(parentKey);

            if (this.allChildrenSelected(currentParent.children)) {
                if (parentIndex === -1) {
                    this.checkedKeys.push(parentKey);
                }
            } else if (parentIndex > -1) {
                this.checkedKeys.splice(parentIndex, 1);
            }

            currentParent = currentParent.parent;
        }
    }

    private allChildrenSelected(children: any[]): boolean {
        const isCheckedReducer = (checked, item) => (
            checked && this.isItemChecked(item.dataItem, item.index) === 'checked'
        );

        return children.reduce(isCheckedReducer, true);
    }

    private addChildrenKeys(args: any): void {
        if (this.checkedKeys.indexOf(args.item.index) === -1) {
            return;
        }

        const keys = args.children.reduce((acc, item) => {
            const existingKey = this.checkedKeys.find(key => item.index === key);

            if (!existingKey) {
                acc.push(item.index);
            }

            return acc;
        }, []);

        if (keys.length) {
            this.checkedKeys = this.checkedKeys.concat(keys);
            this.notify();
        }
    }

    private notify(): void {
        this.checkedKeysChange.emit(this.checkedKeys.slice());
    }
}

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';
import { CustomCheckDirective } from './check.directive';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent, CustomCheckDirective ],
  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);

Checkboxes

Setup

Modes

Single Check Mode

Single Check by Hierarchical Index

Single Check by Item Field

Multiple Check Mode

Multiple Check by Hierarchical Index

Multiple Check by Item Field

Check-All Feature

Modifying the Checked State

Custom Single-Check Directive

Custom Multi-Check Directive

Suggested Links

Was this article helpful?

Give article feedback

Kendo UI for Angular

Community

Web App Development

Complete .net Toolbox