/** * @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 ( *
* value && value.id} * /> * * * ); * } * } * ReactDOM.render(, document.querySelector('my-app')); * ``` */ valueMap?: (value: any) => any; /** * Fires each time the popup of the DropDownTree is about to open. */ onOpen?: (event: DropDownTreeOpenEvent) => void; /** * Fires each time the popup of the DropDownTree is about to close. */ onClose?: (event: DropDownTreeCloseEvent) => void; /** * Fires each time the user focuses the DropDownTree. */ onFocus?: (event: DropDownTreeFocusEvent) => void; /** * Fires each time the DropDownTree gets blurred. */ onBlur?: (event: DropDownTreeBlurEvent) => void; /** * Fires each time the value of the DropDownTree is about to change ([see examples]({% slug overview_dropdowntree %})). */ onChange?: (event: DropDownTreeChangeEvent) => void; /** * Fires each time the user types in the filter input * ([see example]({% slug filtering_dropdowntree %}#toc-basic-configuration)). * You can filter the source based on the passed filtration value. */ onFilterChange?: (event: DropDownTreeFilterChangeEvent) => void; /** * Fires when the expanding or collapsing of an item is requested ([see examples]({% slug overview_dropdowntree %})). */ onExpandChange?: (event: any) => void; /** * Defines the slot that will be used for rendering each of the DropDownTree items * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)). */ item?: any; /** * Defines the slot that will be used for rendering the selected value * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)). */ valueRender?: any; /** * Defines the slot that will be used for header * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)). */ header?: any; /** * Defines the slot that will be used for footer * ([see example]({% slug customrendering_dropdowntree %}#toc-items-and-value-element)). */ footer?: any; /** * Defines the slot that will be rendered in the DropDownTree popup when no data is available * ([see example]({% slug customrendering_dropdowntree %}#toc-no-data)). */ listNoData?: any; /** * Configures the `size` of the DropDownTree. * * The available options are: * - small * - medium * - large * * @default undefined */ size?: 'small' | 'medium' | 'large'; /** * Configures the `roundness` of the DropDownTree. * * The available options are: * - none * - small * - medium * - large * - full * * @default undefined */ rounded?: 'none' | 'small' | 'medium' | 'large' | 'full'; /** * Configures the `fillMode` of the DropDownTree. * * The available options are: * - solid * - flat * - outline * * @default undefined */ fillMode?: 'solid' | 'flat' | 'outline'; /** * Provides different rendering of the popup element based on the screen dimensions. */ adaptive?: boolean; /** * Specifies the text that is rendered as title in the adaptive popup. */ adaptiveTitle?: string; }