All Components

Keyboard Navigation

The keyboard navigation of the TreeView is always available.

The TreeView supports the following keyboard shortcuts:

SHORTCUT DESCRIPTION
Up Arrow Moves the focus to the previous focusable node without opening or closing a node.
Down Arrow Moves the focus to the next focusable node without opening or closing a node.
Left Arrow
  • Closes an open, focused node.
  • Moves the focus from an end or closed child node to the parent node.
  • Does nothing when the focus is on an end or closed root node.
Right Arrow
  • Opens a closed, focused node. Does not move the focus.
  • Moves the focus from an open and focused node to its child node.
  • Does nothing when the focus is on an end node.
Home Moves the focus to the first node in the tree without opening or closing a node.
End Moves the focus to the last focusable node in the tree without opening or closing a node.
Enter Selects the focused node.
Space Checks the focused node.
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">
            <div>Checked keys: {{checkedKeys.join(",")}}</div>
            <div>Expanded keys: {{expandedKeys.join(",")}}</div>
            <div>Selected keys: {{selectedKeys.join(",")}}</div>
        </div>
        <kendo-treeview
            [nodes]="data"
            textField="text"
            [hasChildren]="hasChildren"
            [children]="fetchChildren"

            kendoTreeViewCheckable
            kendoTreeViewExpandable
            [kendoTreeViewSelectable]="selection"

            [(checkedKeys)]="checkedKeys"
            [(expandedKeys)]="expandedKeys"
            [(selectedKeys)]="selectedKeys"
        >
        </kendo-treeview>
  `
})
export class AppComponent {
    public checkedKeys: any[] = ['0_2'];
    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 './ng.module';

enableProdMode();

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