/** * DevExtreme (ui/tag_box.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 { UserDefinedElement, DxElement, } from '../core/element'; import { template, ApplyValueMode, SelectAllMode, } from '../common'; import { Cancelable, EventInfo, NativeEventInfo, InitializedEventInfo, ChangedOptionInfo, ItemInfo, } from '../events'; import { SelectionChangeInfo, } from './collection/ui.collection_widget.base'; import { DropDownButtonTemplateDataModel, } from './drop_down_editor/ui.drop_down_editor'; import { ValueChangedInfo, } from './editor/editor'; import dxSelectBox, { dxSelectBoxOptions, CustomItemCreatingInfo, } from './select_box'; /** * The type of the change event handler's argument. */ export type ChangeEvent = NativeEventInfo; /** * The type of the closed event handler's argument. */ export type ClosedEvent = EventInfo; /** * The type of the contentReady event handler's argument. */ export type ContentReadyEvent = EventInfo; /** * The type of the customItemCreating event handler's argument. */ export type CustomItemCreatingEvent = EventInfo & CustomItemCreatingInfo; /** * The type of the disposing event handler's argument. */ export type DisposingEvent = EventInfo; /** * The type of the enterKey event handler's argument. */ export type EnterKeyEvent = NativeEventInfo; /** * The type of the focusIn event handler's argument. */ export type FocusInEvent = NativeEventInfo; /** * The type of the focusOut event handler's argument. */ export type FocusOutEvent = NativeEventInfo; /** * The type of the initialized event handler's argument. */ export type InitializedEvent = InitializedEventInfo; /** * The type of the input event handler's argument. */ export type InputEvent = NativeEventInfo; /** * The type of the itemClick event handler's argument. */ export type ItemClickEvent = NativeEventInfo & ItemInfo; /** * The type of the keyDown event handler's argument. */ export type KeyDownEvent = NativeEventInfo; export type KeyPressEvent = NativeEventInfo; /** * The type of the keyUp event handler's argument. */ export type KeyUpEvent = NativeEventInfo; /** * The type of the multiTagPreparing event handler's argument. */ export type MultiTagPreparingEvent = Cancelable & EventInfo & { /** * */ readonly multiTagElement: DxElement; /** * */ readonly selectedItems?: Array; /** * */ text?: string; }; /** * The type of the opened event handler's argument. */ export type OpenedEvent = EventInfo; /** * 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; }; /** * The type of the selectionChanged event handler's argument. */ export type SelectionChangedEvent = EventInfo & SelectionChangeInfo; /** * The type of the valueChanged event handler's argument. */ export type ValueChangedEvent = NativeEventInfo & ValueChangedInfo; export type DropDownButtonTemplateData = DropDownButtonTemplateDataModel; /** * * @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 dxTagBoxOptions extends Pick, Exclude, 'onSelectionChanged'>> { /** * Specifies how the UI component applies values. */ applyValueMode?: ApplyValueMode; /** * A Boolean value specifying whether or not to hide selected items. */ hideSelectedItems?: boolean; /** * Specifies the limit on displayed tags. On exceeding it, the UI component replaces all tags with a single multi-tag that displays the number of selected items. */ maxDisplayedTags?: number | undefined; /** * A Boolean value specifying whether or not the UI component is multiline. */ multiline?: boolean; /** * A function that is executed before the multi-tag is rendered. */ onMultiTagPreparing?: ((e: MultiTagPreparingEvent) => void); /** * A function that is executed when the 'Select All' check box value is changed. Applies only if showSelectionControls is true. */ onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent) => void); /** * A function that is executed when a list item is selected or selection is canceled. */ onSelectionChanged?: ((e: SelectionChangedEvent) => void); /** * Specifies the mode in which all items are selected. */ selectAllMode?: SelectAllMode; /** * Gets the currently selected items. */ selectedItems?: Array; /** * Specifies the text displayed at the 'Select All' check box. */ selectAllText?: string; /** * Specifies whether the drop-down button is visible. */ showDropDownButton?: boolean; /** * Specifies the maximum filter query length in characters. */ maxFilterQueryLength?: number; /** * Specifies whether the multi-tag is shown without ordinary tags. */ showMultiTagOnly?: boolean; /** * Specifies a custom template for tags. */ tagTemplate?: template | ((itemData: any, itemElement: DxElement) => string | UserDefinedElement); /** * Specifies the selected items. */ value?: Array; } /** * The TagBox UI component is an editor that allows an end user to select multiple items from a drop-down list. */ export default class dxTagBox extends dxSelectBox { /** * Resets the value property to the value passed as an argument. */ reset(value?: Properties['value']): void; } export type Properties = dxTagBoxOptions; /** * @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 = dxTagBoxOptions;