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" }
             ]
         }
     ];
 }

Selector

kendo-treeview

Export Name

Accessible in templates as #kendoTreeViewInstance="kendoTreeView"

Inputs

isDisabled (item: object, 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.

trackBy TrackByFunction<object>

A function that defines how to track node changes.
By default, the TreeView tracks the nodes by data item object reference.

@Component({
     selector: 'my-app',
     template: `
         <kendo-treeview
             [nodes]="data"
             [textField]="'text'"
             [trackBy]="trackBy"
         >
         </kendo-treeview>
     `
 })
 export class AppComponent {
     public data: any[] = [
         { text: "Furniture" },
         { text: "Decor" }
     ];

     public trackBy(index: number, item: any): any {
         return item.text;
     }
 }

animate boolean

Determines whether the content animation is enabled.

hasChildren (item: object) => boolean

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

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

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

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

A function which determines if a specific node is expanded.

isSelected (item: object, 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<any[]>

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

Events

addItem EventEmitter<TreeItemAddRemoveArgs>

Fires after a dragged item is dropped (see example).
Called on the TreeView where the item is dropped.

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.

nodeDrag EventEmitter<TreeItemDragEvent>

Fires when an item is being dragged (see example).

nodeDragEnd EventEmitter<TreeItemDragEvent>

Fires on the source TreeView after the dragged item has been dropped (see example).

nodeDragStart EventEmitter<TreeItemDragStartEvent>

Fires just before the dragging of the node starts (see example). This event is preventable.
If you prevent the event default, no drag hint will be created and the subsequent drag-related events will not be fired.

nodeDrop EventEmitter<TreeItemDropEvent>

Fires on the target TreeView when a dragged item is dropped (see example).
This event is preventable. If you prevent the event default (event.preventDefualt()) or invalidate its state (event.setValid(false)),
the addItem and removeItem events will not be triggered.

Both operations cancel the default drop operation, but the indication to the user is different. event.setValid(false) indicates that the operation was
unsuccessful by animating the drag clue to its original position. event.preventDefault() simply removes the clue, as if it has been dropped successfully.
As a general rule, use preventDefault to manually handle the add and remove operations, and setValid(false) to indicate the operation was unsuccessful.

blur EventEmitter<any>

Fires when the user blurs the component.

focus EventEmitter<any>

Fires when the user focuses the component.

removeItem EventEmitter<TreeItemAddRemoveArgs>

Fires after a dragged item is dropped (see example).
Called on the TreeView from where the item is dragged.

selectionChange EventEmitter<TreeItem>

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

Methods

blur

Blurs the focused TreeView item.

collapseNode

Triggers the collapse event for the provided node.

Parameters

item any

index string

expandNode

Triggers the expand event for the provided node and displays it's loading indicator.

Parameters

item any

index string

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" }
     ];
 }

Parameters

index? string

getNodePageSize

Gets the current page size of the checked data item children collection
(see example).

Since the root nodes collection is not associated with any parent data item, pass null as dataItem param to get its page size.

Parameters

dataItem any

The parent data item of the targeted collection.

Returns

number - The page size of the checked data item children collection.

itemLookup

Based on the specified index, returns the TreeItemLookup node.

Parameters

index string

The index of the node.

Returns

TreeItemLookup - The item that was searched (looked up).

rebindChildren

Triggers the children function for every expanded node,
causing all rendered child nodes to be fetched again.

setNodePageSize

Sets the page size of the targeted data item children collection
(see example).

Since the root nodes collection is not associated with any parent data item, pass null as dataItem param to target its page size.

Parameters

dataItem any

The parent data item of the targeted collection.

pageSize number

The new page size.