/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import { ComponentOptionsMixin } from 'vue';
import { ComponentProvideOptions } from 'vue';
import { DefineComponent } from 'vue';
import { ExtractPropTypes } from 'vue';
import { PropType } from 'vue';
import { PublicProps } from 'vue';
import { SVGIcon } from '@progress/kendo-svg-icons';
/**
* @hidden
*/
declare class FieldsService {
focusIdField: string | undefined;
private expandField;
private selectField;
private childrenField;
private hasChildrenField;
private textField;
private disableField;
private checkField;
private checkIndeterminateField;
constructor(treeViewProps: TreeViewProps);
expanded(item: any): boolean | undefined;
selected(item: any): boolean | undefined;
text(item: any): string | undefined;
disabled(item: any): boolean | undefined;
hasChildren(item: any): boolean | undefined;
children(item: any): any[];
checked(item: any): boolean | undefined;
checkIndeterminate(item: any): boolean | undefined;
focusId(item: any): any;
getChildrenField(): string;
}
/**
*
* A helper function which updates the check descriptor.
*
* {% meta height:650 %}
* {% embed_file checkbox/checkbox-helper/main.vue preview %}
* {% embed_file checkbox/checkbox-helper/main.js %}
* {% endmeta %}
*
* #### Parameters
* ##### event <span class='code'>[TreeViewExpandChangeEvent]({% slug api_treeview_treeviewexpandchangeevent %})</span>
* The event that triggered the change.
*
* ##### check <span class='code'>string[] | [TreeViewCheckDescriptor]({% slug api_treeview_treeviewcheckdescriptor %})</span>
* The check descriptor that will be updated.
*
* ##### data? <span class='code'>any[] | null</span>
* The TreeView items.
*
* ##### settings <span class='code'>[TreeViewCheckChangeSettings]({% slug api_treeview_treeviewcheckchangesettings %})</span>
* The additional settings that configure the update of the check descriptor.
*
* ##### childrenField? <span class='code'>string</span>
* The field that points to the dataItem sub items. Defaults to `items`.
* The default behavior allows the selection of multiple items.
*
* #### Returns
* <span class='code'>any</span> - The updated copy of the input check descriptor.
*/
export declare function handleTreeViewCheckChange(event: TreeViewCheckChangeEvent, check: string[] | TreeViewCheckDescriptor, data?: any[] | null, settings?: TreeViewCheckChangeSettings, childrenField?: string): any;
/**
* The props of the ItemRender component ([see example]({% slug rendering_treeview %})).
*/
export declare interface ItemRenderProps {
/**
* The item that is rendered.
*/
item: any;
/**
* The hierarchical index of the item. The indices are zero-based. The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
*/
itemHierarchicalIndex: string;
}
/**
* A helper function which moves a TreeView item in an immutable way.
*
* {% meta height:400 %}
* {% embed_file drag/single/main.vue preview %}
* {% embed_file drag/single/main.js %}
* {% endmeta %}
*
* #### Parameters
* ##### sourceItemHierarchicalIndex <span class='code'>string</span>
* The hierarchical index of the item that will be moved.
*
* ##### sourceData <span class='code'>any[] | null | undefined</span>
* The tree which contains the item that will be moved.
*
* ##### operation <span class='code'>"before" | "after" | "child"</span>
* The specific move operation.
*
* The available options are:
* * `before`—Indicates that the source item will become the previous sibling of the target item.
* * `after`—Indicates that the source item will become the next sibling of the target item.
* * `child`—Indicates that the source item will become a child of the target item.
*
* ##### targetItemHierarchicalIndex <span class='code'>string</span>
* The hierarchical index of the item next to which the source item will be moved.
*
* ##### targetData? <span class='code'>any[] | null</span>
* The tree which contains the target item.
* If the argument is skipped, then the move operation will be executed within the same tree.
* Setting the `sourceData` and `targetData` arguments to the same tree is also supported.
*
* ##### childrenField? <span class='code'>string</span>
* The field that points to the dataItem sub items. Defaults to `items`.
*
* #### Returns
* <span class='code'>any[] | { sourceData: any[]; targetData: any[]; }</span> - The updated copies of the `sourceData` and `targetData` input arguments.
* If `targetData` is not passed, then only the updated copy of the `sourceData` will be returned.
*/
export declare const moveTreeViewItem: (sourceItemHierarchicalIndex: string, sourceData: any[] | null | undefined, operation: 'before' | 'after' | 'child', targetItemHierarchicalIndex: string, targetData?: any[] | null, childrenField?: string) => any[] | {
sourceData: any[];
targetData: any[];
};
/**
* A helper function which applies the specified operation descriptors to the data.
* [Expanding and collapsing items]({% slug expansion_ways_treeview %}#toc-using-a-helper-function)
* [Selecting and deselecting items]({% slug selection_ways_treeview %}#toc-using-a-helper-function)
* [Checking and unchecking items]({% slug check_helper_funcs_treeview %})
*
* {% meta height:350 %}
* {% embed_file select/selection-update-helper-function/main.vue preview %}
* {% embed_file select/selection-update-helper-function/main.js %}
* {% endmeta %}
*
* #### Parameters
* ##### data <span class='code'>any[] | null | undefined</span>
* The data that will be processed.
*
* ##### operations <span class='code'>[TreeViewOperationDescriptors]({% slug api_treeview_treeviewoperationdescriptors %})</span>
* The operation descriptors that will be applied to the data.
*
* #### Returns
* <span class='code'>any[]</span> - The processed copy of the input data.
*/
export declare const processTreeViewItems: (data: any[] | null | undefined, operations: TreeViewOperationDescriptors) => any[];
/**
*
*
* Represents the [Kendo UI for Vue Native TreeView component]({% slug overview_treeview %}).
*
* ```jsx
* <template>
* <div>
* <TreeView :dataItems="tree" />
* </div>
* </template>
*
* <script>
* import { TreeView } from '@progress/kendo-vue-treeview';
*
* export default {
* components: {
* TreeView,
* },
* data() {
* return {
* tree: [
* {
* text: 'Furniture',
* expanded: true,
* items: [
* {
* text: 'Tables & Chairs',
* },
* {
* text: 'Sofas',
* },
* {
* text: 'Occasional Furniture',
* },
* ],
* },
* {
* text: 'Decor',
* expanded: true,
* items: [
* {
* text: 'Bed Linen',
* },
* {
* text: 'Curtains & Blinds',
* },
* {
* text: 'Carpets',
* },
* ],
* },
* ],
* };
* },
* };
* </script>
* ```
*
*
*
* ### props <span class='code'>Readonly<[TreeViewProps]({% slug api_treeview_treeviewprops %})></span>
* The props of the TreeView component.
*
* ### guid <span class='code'>string</span>
* Returns the `guid` which is associated with the TreeView.
*/
export declare const TreeView: DefineComponent<ExtractPropTypes< {
dataItems: PropType<any[]>;
animate: {
type: PropType<boolean>;
default: boolean;
};
id: PropType<string>;
draggable: PropType<boolean>;
tabIndex: PropType<number>;
focusIdField: PropType<string>;
getFocusHierarchicalIndex: PropType<(itemId: any) => string>;
expandField: {
type: PropType<string>;
default: string;
};
selectField: {
type: PropType<string>;
default: string;
};
childrenField: {
type: PropType<string>;
default: string;
};
hasChildrenField: {
type: PropType<string>;
default: string;
};
expandIcons: PropType<boolean>;
checkboxes: PropType<boolean>;
textField: {
type: PropType<string>;
default: string;
};
disableField: {
type: PropType<string>;
default: string;
};
checkField: {
type: PropType<string>;
default: string;
};
checkIndeterminateField: {
type: PropType<string>;
default: string;
};
item: PropType<any>;
ariaMultiSelectable: PropType<string | boolean>;
ariaLabel: PropType<string>;
ariaLabelledby: PropType<string>;
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
}>, {}, {
currentRtl: boolean;
focusedItemId: any;
focusedItemPublicId: any;
tabbableItemId: string;
}, {
treeGuid(): string;
}, {
onFocusDomElNeeded(domItem: any): void;
onCheckChange(event: any, item: any, itemId: string): void;
onExpandChange(event: any, item: any, itemId: string): void;
onPress(_event: any, item: any, itemId: string): void;
onDrag(event: any, item: any, itemId: string): void;
onRelease(event: any, item: any, itemId: string): void;
onItemClick(event: any, item: any, itemId: string): void;
onFocus(e: any): void;
onBlur(e: any): void;
onKeyDown(event: any): void;
dispatchEventsOnKeyDown(event: any, focusedItem: any): void;
setFocus(focusedItemId?: string): void;
getFocusedItem(): any;
getItemById(itemId: string): any;
dispatchCheckChange(dispatchedEvent: any, item: any, itemId: string): void;
dispatchExpandChange(dispatchedEvent: any, item: any, itemId: string): void;
dispatchItemClick(dispatchedEvent: any, item: any, itemId: string): void;
refocusDueToFocusIdField(): void;
focusDomItem(domItem: any): void;
guid(): string;
}, ComponentOptionsMixin, ComponentOptionsMixin, {
blur: any;
focus: any;
itemdragstart: any;
itemdragover: any;
itemdragend: any;
keydown: any;
itemclick: any;
expandchange: any;
checkchange: any;
}, string, PublicProps, Readonly<ExtractPropTypes< {
dataItems: PropType<any[]>;
animate: {
type: PropType<boolean>;
default: boolean;
};
id: PropType<string>;
draggable: PropType<boolean>;
tabIndex: PropType<number>;
focusIdField: PropType<string>;
getFocusHierarchicalIndex: PropType<(itemId: any) => string>;
expandField: {
type: PropType<string>;
default: string;
};
selectField: {
type: PropType<string>;
default: string;
};
childrenField: {
type: PropType<string>;
default: string;
};
hasChildrenField: {
type: PropType<string>;
default: string;
};
expandIcons: PropType<boolean>;
checkboxes: PropType<boolean>;
textField: {
type: PropType<string>;
default: string;
};
disableField: {
type: PropType<string>;
default: string;
};
checkField: {
type: PropType<string>;
default: string;
};
checkIndeterminateField: {
type: PropType<string>;
default: string;
};
item: PropType<any>;
ariaMultiSelectable: PropType<string | boolean>;
ariaLabel: PropType<string>;
ariaLabelledby: PropType<string>;
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
}>> & Readonly<{
onBlur?: (...args: any[] | unknown[]) => any;
onFocus?: (...args: any[] | unknown[]) => any;
onKeydown?: (...args: any[] | unknown[]) => any;
onItemdragstart?: (...args: any[] | unknown[]) => any;
onItemdragover?: (...args: any[] | unknown[]) => any;
onItemdragend?: (...args: any[] | unknown[]) => any;
onItemclick?: (...args: any[] | unknown[]) => any;
onExpandchange?: (...args: any[] | unknown[]) => any;
onCheckchange?: (...args: any[] | unknown[]) => any;
}>, {
size: string;
animate: boolean;
checkIndeterminateField: string;
expandField: string;
selectField: string;
childrenField: string;
hasChildrenField: string;
textField: string;
disableField: string;
checkField: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the object of the `onCheckChange` event ([see example]({% slug check_helper_funcs_treeview %})).
*/
export declare interface TreeViewCheckChangeEvent {
/**
* The item that is selected or deselected.
*/
item: any;
/**
* The hierarchical index of the item. The indices are zero-based.
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
*/
itemHierarchicalIndex: string;
}
/**
* The settings that configure the update of the check descriptor.
*/
export declare interface TreeViewCheckChangeSettings {
/**
* Determines a selection of a single node at a time.
*/
singleMode?: boolean;
/**
* Determines if the children checkboxes will be selected when the user selects the parent checkbox.
*/
checkChildren?: boolean;
/**
* Determines if the parent checkbox will be selected when the user selects all its children checkboxes.
*/
checkParents?: boolean;
}
/**
* The descriptor which is used for checking.
*/
export declare interface TreeViewCheckDescriptor extends TreeViewOperationDescriptor {
/**
* Determines if a parent item will have an indeterminate state when not all its children are checked.
*/
applyCheckIndeterminate?: boolean;
/**
* The name of the field which will provide a Boolean representation for the indeterminate state of a parent item.
* Defaults to `checkIndeterminate`.
*/
checkIndeterminateField?: string;
}
/**
* A class which provides an API for analyzing the `drag` events
* of the TreeView.
*
* {% meta height:400 %}
* {% embed_file drag/single/main.vue preview %}
* {% embed_file drag/single/main.js %}
* {% endmeta %}
*
* ### destinationMeta <span class='code'>{ itemHierarchicalIndex: string; treeViewGuid: string; }</span>
* Returns an object which contains:
* * The `itemHierarchicalIndex` of the destination item (the item below the dragged item) and
* * The `guid` of the destination TreeView (the TreeView which renders the destination item).
*
* ### isDropAllowed <span class='code'>boolean</span>
* Returns `true` if dropping is allowed. Otherwise, returns `false`.
*/
export declare class TreeViewDragAnalyzer {
private event;
private itemId;
private treeViewGuid;
private initialized;
private destDomNodeWithMeta;
private destItemId;
private destTreeViewGuid;
/**
* @param event - The event that will be analyzed.
*/
constructor(event: TreeViewItemDragOverEvent | TreeViewItemDragEndEvent);
/**
* The method which initializes the analyzer.
* Invoke the method before you call any other methods.
*
* @returns - The analyzer object of the `drag` event.
*/
init(): this;
/**
* Returns `true` if dropping is allowed. Otherwise, returns `false`.
*/
get isDropAllowed(): boolean;
/**
* Returns an object which contains:
* * The `itemHierarchicalIndex` of the destination item (the item below the dragged item) and
* * The `guid` of the destination TreeView (the TreeView which renders the destination item).
*/
get destinationMeta(): {
itemHierarchicalIndex: string;
treeViewGuid: string;
};
/**
* Returns the specific drop operation.
*
* @returns - The following values are returned:
* * `before`—Indicates that the dragged item is positioned at the beginning of the destination item.
* * `after`—Indicates that the dragged item is positioned at the end of the destination item.
* * `child`—Indicates that the dragged item is positioned in the middle of the destination item.
* * `undefined`—Indicates that dropping is not allowed.
*/
getDropOperation(): "child" | "before" | "after";
private setDestimationMeta;
}
/**
* Represents the Kendo UI for Vue Native TreeViewDragClue component which renders a clue when an item is dragged.
*
* {% meta height:400 %}
* {% embed_file drag/single/main.vue preview %}
* {% embed_file drag/single/main.js %}
* {% endmeta %}
*
* ## Methods
*
* ### hide
* Hides the TreeViewDragClue component.
*
* ### show
* Displays the TreeViewDragClue component.
*
* #### Parameters
* ##### top <span class='code'>number</span>
* The `top` CSS position of the component.
*
* ##### left <span class='code'>number</span>
* The `left` CSS position of the component.
*
* ##### text <span class='code'>string</span>
* The text of the component.
*
* ##### operationClassName <span class='code'>string</span>
* The CSS class name which is related to the specific drop operation.
*/
export declare const TreeViewDragClue: DefineComponent< {}, {}, {
visible: boolean;
top: number;
left: number;
text: string;
operationIconName: string;
operationSvg: SVGIcon;
}, {}, {
show(top: number, left: number, text: string, operationIconName: string | object): void;
hide(): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the object of the `onExpandChange` event ([see example]({% slug overview_treeview %})).
*/
export declare interface TreeViewExpandChangeEvent {
/**
* The ItemClick event.
*/
event: any;
/**
* The item that is expanded or collapsed.
*/
item: any;
/**
* The hierarchical index of the item. The indices are zero-based. The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
*/
itemHierarchicalIndex: string;
}
/**
* @hidden
*/
export declare const TreeViewItem: DefineComponent<ExtractPropTypes< {
item: PropType<any>;
itemId: PropType<string>;
treeGuid: PropType<string>;
animate: PropType<boolean>;
focusedItemId: PropType<string>;
tabbableItemId: PropType<string>;
fieldsService: PropType<FieldsService>;
itemUI: PropType<any>;
ariaMultiSelectable: PropType<boolean>;
expandIcons: PropType<boolean>;
checkboxes: PropType<boolean>;
onFocusDomElNeeded: PropType<any>;
draggable: PropType<boolean>;
isRtl: PropType<boolean>;
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
disabled: PropType<boolean>;
ariaLevel: PropType<number>;
onItemClick: PropType<any>;
onExpandChange: PropType<any>;
onCheckChange: PropType<any>;
onPress: PropType<any>;
onDrag: PropType<any>;
onRelease: PropType<any>;
onFocusdomelneeded: PropType<any>;
}>, {}, {
isMounted: boolean;
}, {
fieldsSvc(): any;
currentTabIndex(): number;
ariaExpanded(): boolean | undefined;
ariaChecked(): string | boolean | undefined;
ariaSelected(): boolean | undefined;
computedDisabled(): any;
}, {
handleCheckChange(e: any, subItem: any, subItemId: string): void;
handleExpandChange(e: any, subItem: any, subItemId: string): void;
handleItemClick(e: any, subItem: any, subItemId: string): void;
handlePress(e: any, subItem: any, subItemId: string): void;
handleDrag(e: any, subItem: any, subItemId: string): void;
handleRelease(e: any, subItem: any, subItemId: string): void;
handleFocusDomElNeeded(e: any): void;
getIconClassName(): "loading" | "caret-alt-down" | "caret-alt-left" | "caret-alt-right";
getIconSVG(): SVGIcon;
getContentClassName(): string;
assignDraggableMeta(element: any): void;
}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes< {
item: PropType<any>;
itemId: PropType<string>;
treeGuid: PropType<string>;
animate: PropType<boolean>;
focusedItemId: PropType<string>;
tabbableItemId: PropType<string>;
fieldsService: PropType<FieldsService>;
itemUI: PropType<any>;
ariaMultiSelectable: PropType<boolean>;
expandIcons: PropType<boolean>;
checkboxes: PropType<boolean>;
onFocusDomElNeeded: PropType<any>;
draggable: PropType<boolean>;
isRtl: PropType<boolean>;
size: {
type: PropType<string>;
default: string;
validator: (value: any) => any;
};
disabled: PropType<boolean>;
ariaLevel: PropType<number>;
onItemClick: PropType<any>;
onExpandChange: PropType<any>;
onCheckChange: PropType<any>;
onPress: PropType<any>;
onDrag: PropType<any>;
onRelease: PropType<any>;
onFocusdomelneeded: PropType<any>;
}>> & Readonly<{}>, {
size: string;
}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
/**
* Represents the object of the `onItemClick` event ([see example]({% slug overview_treeview %})).
*/
export declare interface TreeViewItemClickEvent {
/**
* The ItemClick event.
*/
event: any;
/**
* The item that is clicked.
*/
item: any;
/**
* The hierarchical index of the item. The indices are zero-based.
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
*/
itemHierarchicalIndex: string;
}
/**
* Represents the object of the `onItemDragEnd` event ([see example]({% slug dragdrop_treeview %})).
*/
export declare interface TreeViewItemDragEndEvent {
/**
* The target that is associated with the dragged item.
*/
target: any;
/**
* The item that is dragged.
*/
item: any;
/**
* The hierarchical index of the dragged item. The indices are zero-based.
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
*/
itemHierarchicalIndex: string;
/**
* The X (horizontal) coordinate (in pixels) at which the event occured that is relative to the left edge of the entire document.
* `pageX` includes any portion of the document that is not currently visible.
*/
pageX: number;
/**
* The Y (vertical) coordinate (in pixels) at which the event occured that is relative to the whole document.
* `pageY` observes any vertical scrolling of the page.
*/
pageY: number;
/**
* Provides the horizontal coordinate within the client area of the application at which the event occurred
* (as opposed to the coordinate within the page).
*/
clientX: number;
/**
* Provides the vertical coordinate within the client area of the application at which the event occurred
* (as opposed to the coordinate within the page).
*/
clientY: number;
}
/**
* Represents the object of the `onItemDragOver` event ([see example]({% slug dragdrop_treeview %})).
*/
export declare interface TreeViewItemDragOverEvent {
/**
* The target that is associated with the dragged item.
*/
target: any;
/**
* The item that is dragged.
*/
item: any;
/**
* The hierarchical index of the dragged item. The indices are zero-based.
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
*/
itemHierarchicalIndex: string;
/**
* The X (horizontal) coordinate (in pixels) at which the event occurred that is relative to the left edge of the entire document.
* Includes any portion of the document which is not currently visible.
*/
pageX: number;
/**
* The Y (vertical) coordinate (in pixels) at which the event occurred that is relative to the whole document.
* `pageY` observes any vertical scrolling of the page.
*/
pageY: number;
/**
* Provides the horizontal coordinate within the client area of the application at which the event occurred
* (as opposed to the coordinate within the page).
*/
clientX: number;
/**
* Provides the vertical coordinate within the client area of the application at which the event occurred
* (as opposed to the coordinate within the page).
*/
clientY: number;
}
/**
* Represents the object of the `onItemDragStart` event.
*/
export declare interface TreeViewItemDragStartEvent {
/**
* An event target.
*/
target: any;
/**
* The item that is dragged.
*/
item: any;
/**
* The hierarchical index of the dragged item. The indices are zero-based.
* The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
*/
itemHierarchicalIndex: string;
}
/**
* The descriptor which is used for expanding, selecting, and checking.
*/
export declare interface TreeViewOperationDescriptor {
/**
* The IDs of the items to which the operation will be applied. By default, the TreeView applies the hierarchical indices of the items. These indices are zero-based. The first root item has a `0` (zero) index. If the first root item has children, the first child acquires a `0_0` index and the second acquires a `0_1` index.
*/
ids?: any[];
/**
* The name of the field which will provide a Boolean representation for the operation state of the item.
*
* The default fields are:
* * `expanded`—Indicates that an item is expanded.
* * `selected`—Indicates that an item is selected.
* * `checked`—Indicates that an item is checked.
*/
operationField?: string;
/**
* The name of the field which will uniquely describe an item as an alternative to its hierarchical index.
*/
idField?: string;
}
/**
* The descriptors of the data operations which are applied to the TreeView component.
*/
export declare interface TreeViewOperationDescriptors {
/**
* The hierarchical indices of the items to which the expand operation will be applied, or the descriptor of the operation.
*/
expand?: string[] | TreeViewOperationDescriptor;
/**
* The hierarchical indices of the items to which the select operation will be applied, or the descriptor of the operation.
*/
select?: string[] | TreeViewOperationDescriptor;
/**
* The hierarchical indices of the items to which the check operation will be applied, or the descriptor of the operation.
*/
check?: string[] | TreeViewCheckDescriptor;
/**
* When the operations are applied, the corresponding items and their parents are cloned.
* For performance reasons, TreeView items are cloned only once.
* The name of the field which provides a Boolean representation of whether an item is already cloned.
* Defaults to `cloned`.
*/
cloneField?: string;
/**
* The expand field of the item.
*/
expandField?: string;
/**
* The select field of the item.
*/
selectField?: string;
/**
* The check field of the item.
*/
checkField?: string;
/**
* The children field of the item.
*/
childrenField?: string;
}
/**
* Represents the props of the [Kendo UI for Vue TreeView component]({% slug overview_treeview %}).
*/
export declare interface TreeViewProps {
/**
* Sets the data of the TreeView ([more information and examples]({% slug databinding_treeview %})).
*/
dataItems?: any[] | null;
/**
* Controls the animation. By default, the expand and collapse animations are enabled.
*/
animate?: boolean;
/**
* Sets a tabIndex of the TreeView DOM element.
*/
tabIndex?: number;
/**
* The TreeView has a built-in implementation of focusing and keyboard navigation. By default, the component uses hierarchical indices to uniquely match the focused item. You can use the `focusIdField` prop for specifying the name of the field which will uniquely describe an item as an alternative to its hierarchical index.
*/
focusIdField?: string;
/**
* When `focusIdField` is set, the TreeView executes a depth-first search on the data to find the currently focused item. The `getFocusHierarchicalIndex` prop specifies the function that will be used as an alternative to the default search algorithm.
*/
getFocusHierarchicalIndex?: (itemId: any) => string | undefined;
/**
* Controls the rendering of the expand (collapse) icons. By default, the icons are not rendered ([see example]({% slug expansion_ways_treeview %})).
*/
expandIcons?: boolean;
/**
* Fires when the expanding or collapsing of an item is requested ([see example]({% slug expansion_ways_treeview %})).
*/
onExpandChange?: (event: TreeViewExpandChangeEvent) => void;
/**
* Fires when an item is clicked or when `Enter` is pressed on a focused item ([see example]({% slug selection_ways_treeview %})).
*/
onItemClick?: (event: TreeViewItemClickEvent) => void;
/**
* Specifies the name of the field which will provide a Boolean representation for the expanded state of the item. Defaults to `expanded`.
*/
expandField?: string;
/**
* Specifies the name of the field which will provide a Boolean representation for the selected state of the item. Defaults to `selected`.
*/
selectField?: string;
/**
* Specifies the name of the field which indicates to the TreeView that an item has children even if the children are not initially passed. Used for implementing the load-on-demand feature ([see example]({% slug databinding_treeview %}#toc-loading-data-on-demand)). Defaults to `hasChildren`.
*/
hasChildrenField?: string;
/**
* Specifies the name of the field which will provide an array representation of the item children.
*/
childrenField?: string;
/**
* Specifies the name of the field which will provide a text representation for the item. Defaults to `text`.
*/
textField?: string;
/**
* Specifies the name of the field which will provide a Boolean representation for the disabled state of the item. Defaults to `disabled`.
*/
disableField?: string;
/**
* Defines the component that will be used for rendering each of the TreeView items ([see example]({% slug rendering_treeview %})).
*/
item?: any;
/**
* Indicates that the user can select more than one TreeView items. If the TreeView is in a multiple selection mode, set the `aria-multiselectable` prop to `true` ([more on accessibility by the TreeView]({% slug accessibility_treeview %})).
*/
ariaMultiSelectable?: boolean | 'false' | 'true' | string;
/**
* Defines a string value that labels the TreeView ([more on accessibility by the TreeView]({% slug accessibility_treeview %})).
*/
ariaLabel?: string;
/**
* Identifies the element or elements which will label the TreeView ([more on accessibility by the TreeView]({% slug accessibility_treeview %})).
*/
ariaLabelledby?: string;
/**
* Controls the rendering of checkboxes. By default, the checkboxes are not rendered ([see example]({% slug checkboxes_treeview %})).
*/
checkboxes?: boolean;
/**
* Specifies the name of the field which will provide a Boolean representation for the checked state of the item. Defaults to `checked`.
*/
checkField?: string;
/**
* Specifies the name of the field which will provide a Boolean representation for the check indeterminate state of the item. Defaults to `checkIndeterminate`.
*/
checkIndeterminateField?: string;
/**
* Fires when a checkbox is clicked or when `Space` is pressed on a focused item ([see example]({% slug checkboxes_treeview %})).
*/
onCheckChange?: (event: TreeViewCheckChangeEvent) => void;
/**
* Controls the unique id of the TreeView component.
*/
id?: string;
/**
* Controls the dispatching of the `drag` events. By default, the `drag` events are not dispatched ([see example]({% slug dragdrop_treeview %})).
*/
draggable?: boolean;
/**
* Fires when the dragging of an item has started.
*/
onItemDragStart?: (event: TreeViewItemDragStartEvent) => void;
/**
* Fires when a dragged item changes its position ([see example]({% slug dragdrop_treeview %})).
*/
onItemDragOver?: (event: TreeViewItemDragOverEvent) => void;
/**
* Fires when a dragged item is dropped ([see example]({% slug dragdrop_treeview %})).
*/
onItemDragEnd?: (event: TreeViewItemDragEndEvent) => void;
/**
* Configures the `size` of the TreeView.
*
* The available options are:
* - small
* - medium
* - large
* - null—Does not set a size `className`.
*
* @default `medium`
*/
size?: null | 'small' | 'medium' | 'large' | string;
}
export { }