@progress/kendo-angular-treeview
Version:
Kendo UI TreeView for Angular
432 lines (431 loc) • 19.2 kB
TypeScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { ElementRef, EventEmitter, NgZone, OnChanges, OnDestroy, OnInit, Renderer2, ViewContainerRef, TrackByFunction, SimpleChanges, ChangeDetectorRef, AfterViewInit } from '@angular/core';
import { LocalizationService } from '@progress/kendo-angular-l10n';
import { BehaviorSubject, Observable } from 'rxjs';
import { CheckedState } from './checkbox/checked-state';
import { DataChangeNotificationService } from './data-change-notification.service';
import { ExpandStateService } from './expand-state.service';
import { NavigationService } from './navigation/navigation.service';
import { NodeChildrenService } from './node-children.service';
import { NodeClickEvent } from './node-click-event.interface';
import { NodeTemplateDirective } from './node-template.directive';
import { LoadMoreButtonTemplateDirective } from './load-more/load-more-button-template.directive';
import { DataBoundComponent } from './data-bound-component';
import { SelectionService } from './selection/selection.service';
import { TreeItemLookup } from './treeitem-lookup.interface';
import { TreeItem } from './treeitem.interface';
import { TreeViewLookupService } from './treeview-lookup.service';
import { LoadMoreService } from './load-more/load-more.service';
import { TreeItemDropEvent, TreeItemAddRemoveArgs, EditService, TreeItemDragEvent, TreeItemDragStartEvent } from './drag-and-drop/models';
import { FilterState } from './filter-state.interface';
import { TreeViewSize } from './size';
import { SVGIcon } from '@progress/kendo-svg-icons';
import { TextBoxComponent } from '@progress/kendo-angular-inputs';
import * as i0 from "@angular/core";
/**
* Represents the [Kendo UI TreeView component for Angular]({% slug overview_treeview %}).
*
*/
export declare class TreeViewComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy, DataBoundComponent {
element: ElementRef<HTMLElement>;
changeDetectorRef: ChangeDetectorRef;
protected expandService: ExpandStateService;
protected navigationService: NavigationService;
protected nodeChildrenService: NodeChildrenService;
protected selectionService: SelectionService;
protected treeViewLookupService: TreeViewLookupService;
private ngZone;
private renderer;
private dataChangeNotification;
private localization;
/**
* @hidden
*/
searchIcon: SVGIcon;
classNames: boolean;
/** @hidden */
get direction(): string;
/**
* @hidden
*/
assetsContainer: ViewContainerRef;
/**
* @hidden
*/
searchbox: TextBoxComponent;
/**
* The hint which is displayed when the component is empty.
*/
filterInputPlaceholder: string;
/**
* Determines whether to allow expanding disabled nodes.
* @default false
*/
expandDisabledNodes: boolean;
/**
* Determines whether the content animation is enabled.
*/
set animate(value: boolean);
get animate(): boolean;
/** @hidden */
fetchNodes: () => BehaviorSubject<any[]>;
/**
* Fires when the children of the expanded node are loaded.
*/
childrenLoaded: EventEmitter<{
children: TreeItem[];
item: TreeItem;
}>;
/**
* Fires when the user blurs the component.
*/
onBlur: EventEmitter<any>;
/**
* Fires when the user focuses the component.
*/
onFocus: EventEmitter<any>;
/**
* Fires when the user expands a TreeView node.
*/
expand: EventEmitter<TreeItem>;
/**
* Fires when the user collapses a TreeView node.
*/
collapse: EventEmitter<TreeItem>;
/**
* Fires just before the dragging of the node starts ([see example]({% slug draganddrop_treeview %}#toc-setup)). 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.
*/
nodeDragStart: EventEmitter<TreeItemDragStartEvent>;
/**
* Fires when an item is being dragged ([see example]({% slug draganddrop_treeview %}#toc-setup)).
*/
nodeDrag: EventEmitter<TreeItemDragEvent>;
/**
* Emits when the built-in filtering mechanism in the data-binding directives updates the node's visibility.
* Used for the built-in auto-expand functionalities of the component and available for custom implementations.
*/
filterStateChange: EventEmitter<FilterState>;
/**
* Fires on the target TreeView when a dragged item is dropped ([see example]({% slug draganddrop_treeview %}#toc-setup)).
* 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.
*/
nodeDrop: EventEmitter<TreeItemDropEvent>;
/**
* Fires on the source TreeView after the dragged item has been dropped ([see example]({% slug draganddrop_treeview %}#toc-setup)).
*/
nodeDragEnd: EventEmitter<TreeItemDragEvent>;
/**
* Fires after a dragged item is dropped ([see example]({% slug draganddrop_treeview %}#toc-setup)).
* Called on the TreeView where the item is dropped.
*/
addItem: EventEmitter<TreeItemAddRemoveArgs>;
/**
* Fires after a dragged item is dropped ([see example]({% slug draganddrop_treeview %}#toc-setup)).
* Called on the TreeView from where the item is dragged.
*/
removeItem: EventEmitter<TreeItemAddRemoveArgs>;
/**
* Fires when the user selects a TreeView node checkbox
* ([see example]({% slug checkboxes_treeview %}#toc-modifying-the-checked-state)).
*/
checkedChange: EventEmitter<TreeItemLookup>;
/**
* Fires when the user selects a TreeView node
* ([see example]({% slug selection_treeview %}#toc-modifying-the-selection)).
*/
selectionChange: EventEmitter<TreeItem>;
/**
* Fires when the value of the built-in filter input element changes.
*/
filterChange: EventEmitter<string>;
/**
* Fires when the user clicks a TreeView node.
*/
nodeClick: EventEmitter<NodeClickEvent>;
/**
* Fires when the user double clicks a TreeView node.
*/
nodeDblClick: EventEmitter<NodeClickEvent>;
/**
* @hidden
*
* Queries the template for a node template declaration.
* Ignored if a `[nodeTemplate]` value is explicitly provided.
*/
nodeTemplateQuery: NodeTemplateDirective;
/**
* @hidden
*
* Defines the template for each node.
* Takes precedence over nested templates in the TreeView tag.
*/
set nodeTemplateRef(template: NodeTemplateDirective);
get nodeTemplateRef(): NodeTemplateDirective;
/**
* @hidden
*
* Queries the template for a load-more button template declaration.
* Ignored if a `[loadMoreButtonTemplate]` value is explicitly provided.
*/
loadMoreButtonTemplateQuery: LoadMoreButtonTemplateDirective;
/**
* @hidden
*
* Defines the template for each load-more button.
* Takes precedence over nested templates in the TreeView tag.
*/
set loadMoreButtonTemplateRef(template: LoadMoreButtonTemplateDirective);
get loadMoreButtonTemplateRef(): LoadMoreButtonTemplateDirective;
/**
* A function that defines how to track node changes.
* By default, the TreeView tracks the nodes by data item object reference.
*
* @example
* ```ts
* @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;
* }
* }
* ```
*/
trackBy: TrackByFunction<object>;
/**
* The nodes which will be displayed by the TreeView
* ([see example]({% slug databinding_treeview %})).
*/
set nodes(value: any[]);
get nodes(): any[];
/**
* The fields of the data item that provide the text content of the nodes
* ([see example]({% slug databinding_treeview %})). 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.
*/
textField: string | string[];
/**
* A function which determines if a specific node has child nodes
* ([see example]({% slug databinding_treeview %})).
*/
get hasChildren(): (item: object) => boolean;
set hasChildren(callback: (item: object) => boolean);
/**
* A function which determines if a specific node is checked
* ([see example]({% slug checkboxes_treeview %}#toc-modifying-the-checked-state)).
*/
get isChecked(): (item: object, index: string) => CheckedState;
set isChecked(callback: (item: object, index: string) => CheckedState);
/**
* A function which determines if a specific node is disabled.
*/
isDisabled: (item: object, index: string) => boolean;
/**
* A function which determines if a specific node has a checkbox.
*
* > If there is no checkbox for a node, then this node is not checkable and is excluded from any built-in check functionality.
*/
hasCheckbox: (item: object, index: string) => boolean;
/**
* A function which determines if a specific node is expanded.
*/
get isExpanded(): (item: object, index: string) => boolean;
set isExpanded(callback: (item: object, index: string) => boolean);
/**
* A function which determines if a specific node is selected
* ([see example]({% slug selection_treeview %}#toc-modifying-the-selection)).
*/
get isSelected(): (item: object, index: string) => boolean;
set isSelected(callback: (item: object, index: string) => boolean);
/**
* A callback which determines whether a TreeView node should be rendered as hidden. The utility .k-hidden class is used to hide the nodes.
* Useful for custom filtering implementations.
*/
isVisible: (item: object, index: string) => boolean;
/**
* Determines whether the TreeView keyboard navigable is enabled.
*/
navigable: boolean;
/**
* A function which provides the child nodes for a given parent node
* ([see example]({% slug databinding_treeview %})).
*/
children: (item: object) => Observable<object[]>;
/**
* Indicates whether the child nodes will be fetched on node expand or will be initially prefetched.
* @default true
*/
loadOnDemand: boolean;
/**
* Renders the built-in input element for filtering the TreeView.
* If set to `true`, the component emits the `filterChange` event, which can be used to [filter the TreeView manually]({% slug filtering_treeview %}#toc-manual-filtering).
* A built-in filtering implementation is available to use with the [`kendoTreeViewHierarchyBinding`]({% slug api_treeview_hierarchybindingdirective %}) and [`kendoTreeViewFlatDataBinding`]({% slug api_treeview_flatdatabindingdirective %}) directives.
*/
filterable: boolean;
/**
* Sets an initial value of the built-in input element used for filtering.
*/
filter: string;
/**
* Sets the size of the component.
*
* The possible values are:
* * `small`
* * `medium` (default)
* * `large`
* * `none`
*/
set size(size: TreeViewSize);
get size(): TreeViewSize;
get isActive(): boolean;
/**
* @hidden
*/
get treeviewId(): string;
/**
* Indicates whether only parent nodes should be disabled or their child nodes as well
* @default false
*/
disableParentNodesOnly: boolean;
/**
* @hidden
*/
loadMoreService: LoadMoreService;
/**
* @hidden
*/
editService: EditService;
checkboxes: boolean;
expandIcons: boolean;
selectable: boolean;
touchActions: boolean;
data: BehaviorSubject<any[]>;
private _animate;
private _isChecked;
private _isExpanded;
private _isSelected;
private _hasChildren;
private _nodeTemplateRef;
private _loadMoreButtonTemplateRef;
private _size;
private subscriptions;
private domSubscriptions;
private _nextId;
constructor(element: ElementRef<HTMLElement>, changeDetectorRef: ChangeDetectorRef, expandService: ExpandStateService, navigationService: NavigationService, nodeChildrenService: NodeChildrenService, selectionService: SelectionService, treeViewLookupService: TreeViewLookupService, ngZone: NgZone, renderer: Renderer2, dataChangeNotification: DataChangeNotificationService, localization: LocalizationService);
ngOnChanges(changes: SimpleChanges): void;
ngOnDestroy(): void;
ngOnInit(): void;
ngAfterViewInit(): void;
/**
* Blurs the focused TreeView item.
*/
blur(): void;
/**
* Focuses the first focusable item in the TreeView component if no hierarchical index is provided.
*
* @example
* ```ts
* 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" }
* ];
* }
* ```
*/
focus(index?: string): void;
/**
* Based on the specified index, returns the TreeItemLookup node.
*
* @param index - The index of the node.
* @returns {TreeItemLookup} - The item that was searched (looked up).
*/
itemLookup(index: string): TreeItemLookup;
/**
* Triggers the [`children`]({% slug api_treeview_treeviewcomponent %}#toc-children) function for every expanded node,
* causing all rendered child nodes to be fetched again.
*/
rebindChildren(): void;
/**
* Triggers the `expand` event for the provided node and displays it's loading indicator.
*/
expandNode(item: any, index: string): void;
/**
* Triggers the `collapse` event for the provided node.
*/
collapseNode(item: any, index: string): void;
/**
* Gets the current page size of the checked data item children collection
* ([see example]({% slug loadmorebutton_treeview %}#toc-managing-page-sizes)).
*
* > Since the root nodes collection is not associated with any parent data item, pass `null` as `dataItem` param to get its page size.
*
* @param dataItem {any} - The parent data item of the targeted collection.
* @returns {number} - The page size of the checked data item children collection.
*/
getNodePageSize(dataItem: any): number;
/**
* Sets the page size of the targeted data item children collection
* ([see example]({% slug loadmorebutton_treeview %}#toc-managing-page-sizes)).
*
* > Since the root nodes collection is not associated with any parent data item, pass `null` as `dataItem` param to target its page size.
*
* @param dataItem {any} - The parent data item of the targeted collection.
* @param pageSize {number} - The new page size.
*/
setNodePageSize(dataItem: any, pageSize: number): void;
/**
* @hidden
*
* Clears the current TreeViewLookupService node map and re-registers all nodes anew.
* Child nodes are acquired through the provided `children` callback.
*/
preloadChildNodes(): void;
private attachDomHandlers;
private focusHandler;
private blurHandler;
private clickHandler;
private keydownHandler;
private verifyLoadMoreService;
private registerLookupItems;
static ɵfac: i0.ɵɵFactoryDeclaration<TreeViewComponent, never>;
static ɵcmp: i0.ɵɵComponentDeclaration<TreeViewComponent, "kendo-treeview", ["kendoTreeView"], { "filterInputPlaceholder": { "alias": "filterInputPlaceholder"; "required": false; }; "expandDisabledNodes": { "alias": "expandDisabledNodes"; "required": false; }; "animate": { "alias": "animate"; "required": false; }; "nodeTemplateRef": { "alias": "nodeTemplate"; "required": false; }; "loadMoreButtonTemplateRef": { "alias": "loadMoreButtonTemplate"; "required": false; }; "trackBy": { "alias": "trackBy"; "required": false; }; "nodes": { "alias": "nodes"; "required": false; }; "textField": { "alias": "textField"; "required": false; }; "hasChildren": { "alias": "hasChildren"; "required": false; }; "isChecked": { "alias": "isChecked"; "required": false; }; "isDisabled": { "alias": "isDisabled"; "required": false; }; "hasCheckbox": { "alias": "hasCheckbox"; "required": false; }; "isExpanded": { "alias": "isExpanded"; "required": false; }; "isSelected": { "alias": "isSelected"; "required": false; }; "isVisible": { "alias": "isVisible"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; "children": { "alias": "children"; "required": false; }; "loadOnDemand": { "alias": "loadOnDemand"; "required": false; }; "filterable": { "alias": "filterable"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disableParentNodesOnly": { "alias": "disableParentNodesOnly"; "required": false; }; }, { "childrenLoaded": "childrenLoaded"; "onBlur": "blur"; "onFocus": "focus"; "expand": "expand"; "collapse": "collapse"; "nodeDragStart": "nodeDragStart"; "nodeDrag": "nodeDrag"; "filterStateChange": "filterStateChange"; "nodeDrop": "nodeDrop"; "nodeDragEnd": "nodeDragEnd"; "addItem": "addItem"; "removeItem": "removeItem"; "checkedChange": "checkedChange"; "selectionChange": "selectionChange"; "filterChange": "filterChange"; "nodeClick": "nodeClick"; "nodeDblClick": "nodeDblClick"; }, ["nodeTemplateQuery", "loadMoreButtonTemplateQuery"], never, true, never>;
}