/** * @license *------------------------------------------------------------------------------------------- * Copyright © 2026 Progress Software Corporation. All rights reserved. * Licensed under commercial license. See LICENSE.md in the package root for more information *------------------------------------------------------------------------------------------- */ import { FormComponentProps } from '@progress/kendo-vue-common'; import { ItemRenderProps } from '@progress/kendo-vue-treeview'; import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, DropdownEvent } from '../common/events'; import { DropDownsPopupSettings } from '../common/settings'; /** * Represents the Object which is passed to the */ export interface DropDownTreeHandle { /** * The current element or `null` if there is no one. */ element: HTMLElement | null; /** * The props of the DropDownTree component. */ props: DropDownTreeProps; /** * The focus function. */ focus: () => void; } /** * Represents the object of the `onFilterChange` DropDownTree event. */ export interface DropDownTreeFilterChangeEvent extends FilterChangeEvent { } /** * Represents the object of the `onChange` DropDownTree event. */ export interface DropDownTreeChangeEvent extends ChangeEvent { level: number[]; } /** * Represents the object of the `onOpen` DropDownTree event. */ export interface DropDownTreeOpenEvent extends OpenEvent { } /** * Represents the object of the `onClose` DropDownTree event. */ export interface DropDownTreeCloseEvent extends CloseEvent { } /** * Represents the object of the `onFocus` DropDownTree event. */ export interface DropDownTreeFocusEvent extends FocusEvent { } /** * Represents the object of the `onBlur` DropDownTree event. */ export interface DropDownTreeBlurEvent extends BlurEvent { } /** * Represents the object of the `onExpandChange` DropDownTree event. */ export interface DropDownTreeExpandEvent extends DropdownEvent { item: any; level: number[]; } /** * The props of component that will be used for rendering each of the DropDownTree items * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)). */ export interface ItemProps extends ItemRenderProps { } /** * The props of the `ListNoData` component ([see example]({% slug customrendering_dropdowntree %}#toc-no-data)). */ export interface ListNoDataProps { } /** * The props of the `ValueHolder` component ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)). */ export interface ValueHolderProps { item?: any; } /** * Represents the props of the [Kendo UI for Vue DropDownTree component]({% slug overview_dropdowntree %}). */ export interface DropDownTreeProps extends FormComponentProps { /** * Sets the data of the DropDownTree ([see example]({% slug overview_dropdowntree %})). */ dataItems?: any[]; /** * Sets the opened state of the DropDownTree. */ opened?: boolean; /** * Sets the value of the DropDownTree ([see example]({% slug overview_dropdowntree %})). * It can be an object from the data-tree. */ value?: any; modelValue?: any; /** * The hint that is displayed when the DropDownTree is empty. */ placeholder?: string; /** * Sets the key for comparing the data items of the DropDownTree ([see example]({% slug overview_dropdowntree %})). * If `dataItemKey` is not set, the DropDownTree compares the items by reference. */ dataItemKey: string; /** * Sets additional classes to the DropDownTree. */ className?: string; /** * Sets the disabled state of the DropDownTree. */ disabled?: boolean; /** * Represents the `dir` HTML attribute. */ dir?: string; /** * Renders a floating label for the DropDownTree. */ label?: string; /** * Specifies the id of the component. */ id?: string; /** * Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute). * For example these elements could contain error or hint message. */ ariaDescribedBy?: string; /** * Identifies the element(s) which will label the component. */ ariaLabelledBy?: string; /** * Defines the [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute of the component. */ ariaLabel?: string; /** * Enables the filtering functionality of the DropDownTree ([more information and examples]({% slug filtering_dropdowntree %})). */ filterable?: boolean; /** * Sets the value of filtering input. * Useful for making the filtering input a controlled component. */ filter?: string; /** * Sets the loading state of the DropDownTree ([see example]({% slug filtering_dropdowntree %}#toc-visualize-filtering)). */ loading?: boolean; /** * Specifies the `tabIndex` of the DropDownTree. */ tabIndex?: number; /** * Specifies the `accessKey` of the DropDownTree. */ accessKey?: string; /** * Sets the data item field that represents the item text ([see example]({% slug overview_dropdowntree %})). */ textField: string; /** * Specifies the name of the field which will provide a Boolean representation of the selected state of the item. */ selectField?: string; /** * Specifies the name of the field which will provide a Boolean representation of the expanded state of the item. */ expandField?: string; /** * Specifies the name of the field which will provide an array representation of the item subitems. * Defaults to 'items'. */ subItemsField?: string; /** * Configures the popup of the DropDownTree. */ popupSettings?: DropDownsPopupSettings; /** * Represents a callback function, which returns the value for submitting. The returned value will be rendered in an `option` of a hidden `select`. * * @example * ```jsx-no-run * class App extends React.Component { * render() { * return ( *
* ); * } * } * ReactDOM.render(