/** * DevExtreme (ui/tag_box.d.ts) * Version: 21.1.7 * Build date: Thu Aug 07 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, } from '../core/templates/template'; import { Cancelable, EventInfo, NativeEventInfo, InitializedEventInfo, ChangedOptionInfo, ItemInfo, } from '../events/index'; import { SelectionChangedInfo, } 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'; /** @public */ export type ChangeEvent = NativeEventInfo; /** @public */ export type ClosedEvent = EventInfo; /** @public */ export type ContentReadyEvent = EventInfo; /** @public */ export type CustomItemCreatingEvent = EventInfo & CustomItemCreatingInfo; /** @public */ export type DisposingEvent = EventInfo; /** @public */ export type EnterKeyEvent = NativeEventInfo; /** @public */ export type FocusInEvent = NativeEventInfo; /** @public */ export type FocusOutEvent = NativeEventInfo; /** @public */ export type InitializedEvent = InitializedEventInfo; /** @public */ export type InputEvent = NativeEventInfo; /** @public */ export type ItemClickEvent = NativeEventInfo & ItemInfo; /** @public */ export type KeyDownEvent = NativeEventInfo; /** @public */ export type KeyPressEvent = NativeEventInfo; /** @public */ export type KeyUpEvent = NativeEventInfo; /** @public */ export type MultiTagPreparingEvent = Cancelable & EventInfo & { readonly multiTagElement: DxElement; readonly selectedItems?: Array; text?: string; }; /** @public */ export type OpenedEvent = EventInfo; /** @public */ export type OptionChangedEvent = EventInfo & ChangedOptionInfo; /** @public */ export type SelectAllValueChangedEvent = EventInfo & { readonly value: boolean; }; /** @public */ export type SelectionChangedEvent = EventInfo & SelectionChangedInfo; /** @public */ export type ValueChangedEvent = NativeEventInfo & ValueChangedInfo; /** @public */ export type DropDownButtonTemplateData = DropDownButtonTemplateDataModel; /** * @deprecated use Properties instead * @namespace DevExpress.ui */ export interface dxTagBoxOptions extends Pick, Exclude, 'onSelectionChanged'>> { /** * @docid * @type Enums.EditorApplyValueMode * @default "instantly" * @public */ applyValueMode?: 'instantly' | 'useButtons'; /** * @docid * @default false * @public */ hideSelectedItems?: boolean; /** * @docid * @default undefined * @public */ maxDisplayedTags?: number; /** * @docid * @default true * @public */ multiline?: boolean; /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field4 multiTagElement:DxElement * @type_function_param1_field5 selectedItems:Array * @type_function_param1_field6 text:string * @type_function_param1_field7 cancel:boolean * @type_function_param1_field1 component:dxTagBox * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @action * @public */ onMultiTagPreparing?: ((e: MultiTagPreparingEvent) => void); /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field4 value:boolean * @type_function_param1_field1 component:dxTagBox * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @action * @public */ onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent) => void); /** * @docid * @default null * @type_function_param1 e:object * @type_function_param1_field4 addedItems:Array * @type_function_param1_field5 removedItems:Array * @type_function_param1_field1 component:dxTagBox * @type_function_param1_field2 element:DxElement * @type_function_param1_field3 model:any * @action * @public */ onSelectionChanged?: ((e: SelectionChangedEvent) => void); /** * @docid * @type Enums.SelectAllMode * @default 'page' * @public */ selectAllMode?: 'allPages' | 'page'; /** * @docid * @readonly * @public */ selectedItems?: Array; /** * @docid * @default false * @public */ showDropDownButton?: boolean; /** * @docid * @default 1500 * @public */ maxFilterQueryLength?: number; /** * @docid * @default true * @public */ showMultiTagOnly?: boolean; /** * @docid * @default "tag" * @type_function_param1 itemData:object * @type_function_return string|Element|jQuery * @public */ tagTemplate?: template | ((itemData: any, itemElement: DxElement) => string | UserDefinedElement); /** * @docid * @default [] * @public */ value?: Array; } /** * @docid * @isEditor * @inherits dxSelectBox * @namespace DevExpress.ui * @public */ export default class dxTagBox extends dxSelectBox { constructor(element: UserDefinedElement, options?: dxTagBoxOptions) } /** @public */ export type Properties = dxTagBoxOptions; /** @deprecated use Properties instead */ export type Options = dxTagBoxOptions; /** @deprecated use Properties instead */ export type IOptions = dxTagBoxOptions;