/** * DevExtreme (ui/tree_view.d.ts) * Version: 25.1.7 * Build date: Mon Nov 10 2025 * * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/ */ import { DataSourceLike } from '../data/data_source'; import { DxElement, } from '../core/element'; import { DxPromise, } from '../core/utils/deferred'; import { EventInfo, NativeEventInfo, InitializedEventInfo, ChangedOptionInfo, PointerInteractionEvent, } from '../events'; import { CollectionWidgetItem, } from './collection/ui.collection_widget.base'; import HierarchicalCollectionWidget, { HierarchicalCollectionWidgetOptions, } from './hierarchical_collection/ui.hierarchical_collection_widget'; import { SearchBoxMixinOptions, } from './widget/ui.search_box_mixin'; import { DataStructure, SingleOrMultiple, ScrollDirection, } from '../common'; import dxScrollable from './scroll_view/ui.scrollable'; /** * * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface ItemInfo { /** * */ readonly itemData?: Item; /** * */ readonly itemElement?: DxElement; /** * */ readonly itemIndex?: number; /** * */ readonly node?: Node; } export { DataStructure, SingleOrMultiple, ScrollDirection, }; export type TreeViewCheckBoxMode = 'none' | 'normal' | 'selectAll'; export type TreeViewExpandEvent = 'dblclick' | 'click'; /** * The type of the contentReady event handler's argument. */ export type ContentReadyEvent = EventInfo>; /** * The type of the disposing event handler's argument. */ export type DisposingEvent = EventInfo>; /** * The type of the initialized event handler's argument. */ export type InitializedEvent = InitializedEventInfo>; /** * The type of the itemClick event handler's argument. */ export type ItemClickEvent = NativeEventInfo, KeyboardEvent | MouseEvent | PointerEvent> & ItemInfo; /** * The type of the itemCollapsed event handler's argument. */ export type ItemCollapsedEvent = NativeEventInfo, MouseEvent | PointerEvent> & ItemInfo; /** * The type of the itemContextMenu event handler's argument. */ export type ItemContextMenuEvent = NativeEventInfo, PointerInteractionEvent> & ItemInfo; /** * The type of the itemExpanded event handler's argument. */ export type ItemExpandedEvent = NativeEventInfo, MouseEvent | PointerEvent> & ItemInfo; /** * The type of the itemHold event handler's argument. */ export type ItemHoldEvent = NativeEventInfo, PointerInteractionEvent> & ItemInfo; /** * The type of the itemRendered event handler's argument. */ export type ItemRenderedEvent = EventInfo> & ItemInfo; /** * The type of the itemSelectionChanged event handler's argument. */ export type ItemSelectionChangedEvent = EventInfo> & ItemInfo; /** * The type of the optionChanged event handler's argument. */ export type OptionChangedEvent = EventInfo> & ChangedOptionInfo; /** * The type of the selectAllValueChanged event handler's argument. */ export type SelectAllValueChangedEvent = EventInfo> & { /** * */ readonly value?: boolean | undefined; }; /** * The type of the selectionChanged event handler's argument. */ export type SelectionChangedEvent = EventInfo>; /** * * @deprecated */ export interface dxTreeViewOptions extends Omit, dxTreeViewItem, TKey>, 'dataSource'>, SearchBoxMixinOptions { /** * Specifies whether or not to animate item collapsing and expanding. */ animationEnabled?: boolean; /** * Allows you to load nodes on demand. */ createChildren?: ((parentNode: Node) => PromiseLike | Array); /** * Binds the UI component to data. */ dataSource?: DataSourceLike | null; /** * Notifies the UI component of the data structure in use. */ dataStructure?: DataStructure; /** * Specifies whether or not a user can expand all tree view items by the '*' hot key. */ expandAllEnabled?: boolean; /** * Specifies the event on which to expand/collapse a node. */ expandEvent?: TreeViewExpandEvent; /** * Specifies whether or not all parent nodes of an initially expanded node are displayed expanded. */ expandNodesRecursive?: boolean; /** * Specifies which data source field specifies whether an item is expanded. */ expandedExpr?: string | Function; /** * Specifies the name of the data source item field whose value defines whether or not the corresponding node includes child nodes. */ hasItemsExpr?: string | Function; /** * An array of items displayed by the UI component. */ items?: Array; /** * A function that is executed when a collection item is clicked or tapped. */ onItemClick?: ((e: ItemClickEvent) => void); /** * A function that is executed when a tree view item is collapsed. */ onItemCollapsed?: ((e: ItemCollapsedEvent) => void); /** * A function that is executed when a collection item is right-clicked or pressed. */ onItemContextMenu?: ((e: ItemContextMenuEvent) => void); /** * A function that is executed when a tree view item is expanded. */ onItemExpanded?: ((e: ItemExpandedEvent) => void); /** * A function that is executed when a collection item has been held for a specified period. */ onItemHold?: ((e: ItemHoldEvent) => void); /** * A function that is executed after a collection item is rendered. */ onItemRendered?: ((e: ItemRenderedEvent) => void); /** * A function that is executed when a single TreeView item is selected or selection is canceled. */ onItemSelectionChanged?: ((e: ItemSelectionChangedEvent) => void); /** * A function that is executed when the 'Select All' check box value is changed. Applies only if showCheckBoxesMode is 'selectAll' and selectionMode is 'multiple'. */ onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent) => void); /** * A function that is executed when a TreeView item is selected or selection is canceled. */ onSelectionChanged?: ((e: SelectionChangedEvent) => void); /** * Specifies the name of the data source item field for holding the parent key of the corresponding node. */ parentIdExpr?: string | Function; /** * Specifies the root key. */ rootValue?: any; /** * A string value specifying available scrolling directions. */ scrollDirection?: ScrollDirection; /** * Specifies the text displayed at the 'Select All' check box. */ selectAllText?: string; /** * Specifies whether an item is selected if a user clicks it. */ selectByClick?: boolean; /** * Specifies whether all child nodes should be selected when their parent node is selected. Applies only if the selectionMode is 'multiple'. */ selectNodesRecursive?: boolean; /** * Specifies item selection mode. Applies only if selection is enabled. */ selectionMode?: SingleOrMultiple; /** * Specifies the checkbox display mode. */ showCheckBoxesMode?: TreeViewCheckBoxMode; /** * Specifies a custom collapse icon. */ collapseIcon?: string | null; /** * Specifies a custom expand icon. */ expandIcon?: string | null; /** * Enables the virtual mode in which nodes are loaded on demand. Use it to enhance the performance on large datasets. */ virtualModeEnabled?: boolean; /** * Specifies whether or not the UI component uses native scrolling. */ useNativeScrolling?: boolean; } /** * The TreeView UI component is a tree-like representation of textual data. */ export default class dxTreeView extends HierarchicalCollectionWidget, dxTreeViewItem, TKey> { /** * Collapses all items. */ collapseAll(): void; /** * Collapses an item with a specific key. */ collapseItem(itemData: Item): DxPromise; /** * Collapses an item found using its DOM node. */ collapseItem(itemElement: Element): DxPromise; /** * Collapses an item with a specific key. */ collapseItem(key: TKey): DxPromise; /** * Expands all items. If you load items on demand, this method expands only the loaded items. */ expandAll(): void; /** * Expands an item found using its data object. */ expandItem(itemData: Item): DxPromise; /** * Expands an item found using its DOM node. */ expandItem(itemElement: Element): DxPromise; /** * Expands an item with a specific key. */ expandItem(key: TKey): DxPromise; /** * Gets all nodes. */ getNodes(): Array>; /** * Gets selected nodes. */ getSelectedNodes(): Array>; /** * Gets the keys of selected nodes. */ getSelectedNodeKeys(): Array; /** * Selects all nodes. */ selectAll(): void; /** * Gets the instance of the UI component's scrollable part. */ getScrollable(): Scrollable; /** * Selects a node found using its data object. */ selectItem(itemData: Item): boolean; /** * Selects a TreeView node found using its DOM node. */ selectItem(itemElement: Element): boolean; /** * Selects a node with a specific key. */ selectItem(key: TKey): boolean; /** * Cancels the selection of all nodes. */ unselectAll(): void; /** * Cancels the selection of a node found using its data object. */ unselectItem(itemData: Item): boolean; /** * Cancels the selection of a TreeView node found using its DOM node. */ unselectItem(itemElement: Element): boolean; /** * Cancels the selection of a node with a specific key. */ unselectItem(key: TKey): boolean; /** * Updates the tree view scrollbars according to the current size of the UI component content. */ updateDimensions(): DxPromise; /** * Scrolls the content to an item found using its data. */ scrollToItem(itemData: Item): DxPromise; /** * Scrolls the content to an item found using its DOM node. */ scrollToItem(itemElement: Element): DxPromise; /** * Scrolls the content to an item found using its key. */ scrollToItem(key: TKey): DxPromise; } export type Item = dxTreeViewItem; /** * @deprecated Use Item instead * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface dxTreeViewItem extends CollectionWidgetItem { /** * Specifies whether or not the tree view item is displayed expanded. */ expanded?: boolean; /** * Specifies whether or not the tree view item has children. */ hasItems?: boolean | undefined; /** * Specifies the tree view item's icon. */ icon?: string; /** * Specifies nested tree view items. */ items?: Array; /** * Holds the unique key of an item. */ id?: number | string | undefined; /** * Holds the key of the parent item. */ parentId?: number | string | undefined; /** * Specifies whether the TreeView item should be displayed as selected. */ selected?: boolean; [key: string]: any; } /** * A TreeView node. */ export type Node = dxTreeViewNode; /** * A TreeView node. * @deprecated * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export interface dxTreeViewNode { /** * Contains all the child nodes of the current node. */ children?: Array>; /** * Equals to true if the node is disabled; otherwise false. */ disabled?: boolean; /** * Equals true if the node is expanded; false if collapsed. */ expanded?: boolean; /** * Contains the data source object corresponding to the node. */ itemData?: Item; /** * Contains the key value of the node. */ key?: TKey; /** * Refers to the parent node of the current node. */ parent?: dxTreeViewNode; /** * Equals to true if the node is selected; false if not. */ selected?: boolean; /** * Contains the text displayed by the node. */ text?: string; } export type Scrollable = Omit; export type ExplicitTypes = { Properties: Properties; Node: Node; ContentReadyEvent: ContentReadyEvent; DisposingEvent: DisposingEvent; InitializedEvent: InitializedEvent; ItemClickEvent: ItemClickEvent; ItemCollapsedEvent: ItemCollapsedEvent; ItemContextMenuEvent: ItemContextMenuEvent; ItemExpandedEvent: ItemExpandedEvent; ItemHoldEvent: ItemHoldEvent; ItemRenderedEvent: ItemRenderedEvent; ItemSelectionChangedEvent: ItemSelectionChangedEvent; OptionChangedEvent: OptionChangedEvent; SelectAllValueChangedEvent: SelectAllValueChangedEvent; SelectionChangedEvent: SelectionChangedEvent; }; export type Properties = dxTreeViewOptions; /** * @deprecated use Properties instead * @deprecated Attention! This type is for internal purposes only. If you used it previously, please submit a ticket to our {@link https://supportcenter.devexpress.com/ticket/create Support Center}. We will check if there is an alternative solution. */ export type Options = Properties;