Components / TreeView / API

TreeViewComponent

Represents the Kendo UI TreeView component for Angular.

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

 @Component({
     selector: 'my-app',
     template: `
     <kendo-treeview
         [nodes]="data"
         textField="text"
         kendoTreeViewCheckable
         kendoTreeViewExpandable
         kendoTreeViewSelectable

         kendoTreeViewHierarchyBinding
         childrenField="items">
     </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" }
             ]
         }
     ];
 }

Export Name

Accessible in templates as #kendoTreeViewInstance="kendoTreeView"

Inputs

isDisabled (item: T, index: string) => boolean

A function which determines if a specific node is disabled.

navigable boolean

Determines whether the TreeView keyboard navigable is enabled.

textField string | string[]

The fields of the data item that provide the text content of the nodes
(see example). If the textField input is set
to an array, each hierarchical level uses the field that corresponds to the same
index in the array, or the last item in the array.

animate boolean

Determines whether the content animation is enabled.

hasChildren (item: T) => boolean

A function which determines if a specific node has child nodes
(see example).

isChecked (item: T, index: string) => CheckedState

A function which determines if a specific node is selected
(see example).

isExpanded (item: T, index: string) => boolean

A function which determines if a specific node is expanded.

isSelected (item: T, index: string) => boolean

A function which determines if a specific node is selected
(see example).

nodes any[]

The nodes which will be displayed by the TreeView
(see example).

children () => Observable

A function which provides the child nodes for a given parent node
(see example).

Events

checkedChange EventEmitter<TreeItemLookup>

Fires when the user selects a TreeView node checkbox
(see example).

childrenLoaded EventEmitter<{ children: TreeItem[]; item: TreeItem; }>

Fires when the children of the expanded node are loaded.

collapse EventEmitter<TreeItem>

Fires when the user collapses a TreeView node.

expand EventEmitter<TreeItem>

Fires when the user expands a TreeView node.

nodeClick EventEmitter<NodeClickEvent>

Fires when the user clicks a TreeView node.

nodeDblClick EventEmitter<NodeClickEvent>

Fires when the user double clicks a TreeView node.

blur EventEmitter

Fires when the user blurs the component.

focus EventEmitter

Fires when the user focuses the component.

selectionChange EventEmitter<TreeItem>

Fires when the user selects a TreeView node
(see example).

Methods

blur

Blurs the focused TreeView item.

focus

Focuses the first focusable item in the TreeView component if no hierarchical index is provided.

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

 @Component({
     selector: 'my-app',
     template: `
     <button (click)="treeview.focus('1')">Focuses the second node</button>
     <kendo-treeview
         #treeview
         [nodes]="data"
         textField="text"
     >
     </kendo-treeview>
 `
 })
 export class AppComponent {
     public data: any[] = [
         { text: "Furniture" },
         { text: "Decor" }
     ];
 }

TreeViewComponent

Selector