/** * DevExtreme (ui/list.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 { DataSourceLike } from '../data/data_source'; import { UserDefinedElement, DxElement, } from '../core/element'; import { template, SelectAllMode, ScrollbarMode, PageLoadMode, SingleMultipleAllOrNone, } from '../common'; import { DxPromise, } from '../core/utils/deferred'; import { EventInfo, NativeEventInfo, InitializedEventInfo, ChangedOptionInfo, ItemInfo, PointerInteractionEvent, } from '../events'; import CollectionWidget, { CollectionWidgetItem, CollectionWidgetOptions, SelectionChangeInfo, SelectionChangingEventBase, } from './collection/ui.collection_widget.base'; import { dxSortableOptions, } from './sortable'; import { SearchBoxMixinOptions, } from './widget/ui.search_box_mixin'; export { SelectAllMode, ScrollbarMode, PageLoadMode, }; type ItemLike = string | Item | any; /** * * @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 ListItemInfo { /** * */ readonly itemData?: TItem; /** * */ readonly itemElement: DxElement; /** * */ readonly itemIndex: number | { group: number; item: number }; } export type ItemDeleteMode = 'context' | 'slideButton' | 'slideItem' | 'static' | 'swipe' | 'toggle'; export type ListMenuMode = 'context' | 'slide'; /** * * @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 ScrollInfo { /** * */ readonly scrollOffset?: any; /** * */ readonly reachedLeft: boolean; /** * */ readonly reachedRight: boolean; /** * */ readonly reachedTop: boolean; /** * */ readonly reachedBottom: boolean; } /** * The type of the contentReady event handler's argument. */ export type ContentReadyEvent = EventInfo>; /** * The type of the disposing event handler's argument. */ export type DisposingEvent = EventInfo>; /** * The type of the groupRendered event handler's argument. */ export type GroupRenderedEvent = EventInfo> & { /** * */ readonly groupData?: any; /** * */ readonly groupElement?: DxElement; /** * */ readonly groupIndex?: number; }; /** * The type of the initialized event handler's argument. */ export type InitializedEvent = InitializedEventInfo>; /** * The type of the itemClick event handler's argument. */ export type ItemClickEvent = NativeEventInfo, KeyboardEvent | MouseEvent | PointerEvent> & ListItemInfo; /** * The type of the itemContextMenu event handler's argument. */ export type ItemContextMenuEvent = NativeEventInfo, PointerInteractionEvent> & ListItemInfo; /** * The type of the itemDeleted event handler's argument. */ export type ItemDeletedEvent = EventInfo> & ListItemInfo; /** * The type of the itemDeleting event handler's argument. */ export type ItemDeletingEvent = EventInfo> & ListItemInfo & { /** * */ cancel?: boolean | PromiseLike | PromiseLike; }; /** * The type of the itemHold event handler's argument. */ export type ItemHoldEvent = NativeEventInfo, PointerInteractionEvent> & ListItemInfo; /** * The type of the itemRendered event handler's argument. */ export type ItemRenderedEvent = EventInfo> & ItemInfo; /** * The type of the itemReordered event handler's argument. */ export type ItemReorderedEvent = EventInfo> & ListItemInfo & { /** * */ readonly fromIndex: number; /** * */ readonly toIndex: number; }; /** * The type of the itemSwipe event handler's argument. */ export type ItemSwipeEvent = NativeEventInfo, PointerInteractionEvent> & ListItemInfo & { /** * */ readonly direction: string; }; /** * The type of the optionChanged event handler's argument. */ export type OptionChangedEvent = EventInfo> & ChangedOptionInfo; /** * The type of the pageLoading event handler's argument. */ export type PageLoadingEvent = EventInfo>; /** * The type of the pullRefresh event handler's argument. */ export type PullRefreshEvent = EventInfo>; /** * The type of the scroll event handler's argument. */ export type ScrollEvent = NativeEventInfo, Event> & ScrollInfo; /** * The type of the selectAllValueChanged event handler's argument. */ export type SelectAllValueChangedEvent = EventInfo> & { /** * */ readonly value: boolean; }; /** * The type of the selectionChanging event handler's argument. */ export type SelectionChangingEvent = SelectionChangingEventBase>; /** * The type of the selectionChanged event handler's argument. */ export type SelectionChangedEvent = EventInfo> & SelectionChangeInfo; /** * * @deprecated */ export interface dxListOptions< TItem extends ItemLike = any, TKey = any, > extends CollectionWidgetOptions, TItem, TKey>, SearchBoxMixinOptions { /** * Specifies whether the UI component changes its visual state as a result of user interaction. */ activeStateEnabled?: boolean; /** * Specifies whether or not an end user can delete list items. */ allowItemDeleting?: boolean; /** * A Boolean value specifying whether to enable or disable the bounce-back effect. */ bounceEnabled?: boolean; /** * Specifies whether or not an end user can collapse groups. */ collapsibleGroups?: boolean; /** * Binds the UI component to data. */ dataSource?: DataSourceLike | null; /** * Specifies the data field whose values should be displayed. Defaults to 'text' when the data source contains objects. */ displayExpr?: string | ((item: TItem) => string) | undefined; /** * Specifies whether the UI component can be focused using keyboard navigation. */ focusStateEnabled?: boolean; /** * Specifies a custom template for group captions. */ groupTemplate?: template | ((groupData: any, groupIndex: number, groupElement: DxElement) => string | UserDefinedElement); /** * Specifies whether data items should be grouped. */ grouped?: boolean; /** * Specifies whether the UI component changes its state when a user pauses on it. */ hoverStateEnabled?: boolean; /** * Specifies whether or not to show the loading panel when the DataSource bound to the UI component is loading data. */ indicateLoading?: boolean; /** * Specifies the way a user can delete items from the list. */ itemDeleteMode?: ItemDeleteMode; /** * Configures item reordering using drag and drop gestures. */ itemDragging?: dxSortableOptions; /** * An array of items displayed by the UI component. */ items?: Array; /** * Specifies the array of items for a context menu called for a list item. */ menuItems?: Array<{ /** * Holds on a function called when the item is clicked. */ action?: ((itemElement: DxElement, itemData: TItem) => any); /** * Specifies the menu item text. */ text?: string; }>; /** * Specifies whether an item context menu is shown when a user holds or swipes an item. */ menuMode?: ListMenuMode; /** * The text displayed on the button used to load the next page from the data source. */ nextButtonText?: string; /** * A function that is executed when a group element is rendered. */ onGroupRendered?: ((e: GroupRenderedEvent) => void); /** * A function that is executed when a collection item is clicked or tapped. */ onItemClick?: ((e: ItemClickEvent) => void) | string; /** * A function that is executed when a collection item is right-clicked or pressed. */ onItemContextMenu?: ((e: ItemContextMenuEvent) => void); /** * A function that is executed after a list item is deleted from the data source. */ onItemDeleted?: ((e: ItemDeletedEvent) => void); /** * A function that is executed before a collection item is deleted from the data source. */ onItemDeleting?: ((e: ItemDeletingEvent) => void); /** * A function that is executed when a collection item has been held for a specified period. */ onItemHold?: ((e: ItemHoldEvent) => void); /** * A function that is executed after a list item is moved to another position. */ onItemReordered?: ((e: ItemReorderedEvent) => void); /** * A function that is executed when a list item is swiped. */ onItemSwipe?: ((e: ItemSwipeEvent) => void); /** * A function that is executed before the next page is loaded. */ onPageLoading?: ((e: PageLoadingEvent) => void); /** * A function that is executed when the 'pull to refresh' gesture is performed. Supported on mobile devices only. */ onPullRefresh?: ((e: PullRefreshEvent) => void); /** * A function that is executed on each scroll gesture. */ onScroll?: ((e: ScrollEvent) => void); /** * A function that is executed when the 'Select All' check box value is changed. Applies only if the selectionMode is 'all'. */ onSelectAllValueChanged?: ((e: SelectAllValueChangedEvent) => void); /** * Specifies whether the next page is loaded when a user scrolls the UI component to the bottom or when the 'next' button is clicked. */ pageLoadMode?: PageLoadMode; /** * Specifies the text shown in the pullDown panel, which is displayed when the list is scrolled to the bottom. */ pageLoadingText?: string; /** * A Boolean value specifying whether or not the UI component supports the 'pull down to refresh' gesture. */ pullRefreshEnabled?: boolean; /** * Specifies the text displayed in the pullDown panel when the list is pulled below the refresh threshold. */ pulledDownText?: string; /** * Specifies the text shown in the pullDown panel while the list is being pulled down to the refresh threshold. */ pullingDownText?: string; /** * Specifies the text displayed in the pullDown panel while the list is being refreshed. */ refreshingText?: string; /** * Specifies whether to repaint only those elements whose data changed. */ repaintChangesOnly?: boolean; /** * A Boolean value specifying if the list is scrolled by content. */ scrollByContent?: boolean; /** * Specifies whether a user can scroll the content with the scrollbar. Applies only if useNativeScrolling is false. */ scrollByThumb?: boolean; /** * A Boolean value specifying whether to enable or disable list scrolling. */ scrollingEnabled?: boolean; /** * Specifies the mode in which all items are selected. */ selectAllMode?: SelectAllMode; /** * Specifies whether an item is selected if a user clicks it. */ selectByClick?: boolean; /** * Specifies item selection mode. */ selectionMode?: SingleMultipleAllOrNone; /** * Specifies when the UI component shows the scrollbar. */ showScrollbar?: ScrollbarMode; /** * Specifies whether or not to display controls used to select list items. Not available if selectionMode is set to 'none'. */ showSelectionControls?: boolean; /** * Specifies the text displayed at the 'Select All' check box. */ selectAllText?: string; /** * Specifies whether or not the UI component uses native scrolling. */ useNativeScrolling?: boolean; } /** * The List is a UI component that represents a collection of items in a scrollable list. */ export default class dxList< TItem extends ItemLike = any, TKey = any, > extends CollectionWidget, TItem, TKey> { /** * Gets the UI component's height in pixels. */ clientHeight(): number; /** * Collapses a group with a specific index. */ collapseGroup(groupIndex: number): DxPromise; /** * Removes an item found using its DOM node. */ deleteItem(itemElement: Element): DxPromise; /** * Removes an item with a specific index. */ deleteItem(itemIndex: number | any): DxPromise; /** * Expands a group with a specific index. */ expandGroup(groupIndex: number): DxPromise; /** * Checks whether an item found using its DOM node is selected. */ isItemSelected(itemElement: Element): boolean; /** * Checks whether an item with a specific index is selected. */ isItemSelected(itemIndex: number | any): boolean; /** * Reloads list data. */ reload(): void; /** * Reorders items found using their DOM nodes. */ reorderItem(itemElement: Element, toItemElement: Element): DxPromise; /** * Reorders items with specific indexes. */ reorderItem(itemIndex: number | any, toItemIndex: number | any): DxPromise; /** * Scrolls the content by a specified distance. */ scrollBy(distance: number): void; /** * Gets the content's height in pixels. */ scrollHeight(): number; /** * Scrolls the content to a specific position. */ scrollTo(location: number): void; /** * Scrolls the content to an item found using its DOM node. */ scrollToItem(itemElement: Element): void; /** * Scrolls the content to an item with a specific index. */ scrollToItem(itemIndex: number | any): void; /** * Gets the top scroll offset. */ scrollTop(): number; /** * Selects all items. */ selectAll(): void; /** * Selects an item found using its DOM node. */ selectItem(itemElement: Element): void; /** * Selects an item with a specific index. */ selectItem(itemIndex: number | any): void; /** * Cancels the selection of all items. */ unselectAll(): void; /** * Cancels the selection of an item found using its DOM node. */ unselectItem(itemElement: Element): void; /** * Cancels the selection of an item with a specific index. */ unselectItem(itemIndex: number | any): void; /** * Updates the UI component scrollbar according to UI component content size. */ updateDimensions(): DxPromise; } export type Item = dxListItem; /** * @deprecated Use Item 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 interface dxListItem extends CollectionWidgetItem { /** * Specifies the text of a badge displayed for the list item. */ badge?: string; /** * Specifies the list item's icon. */ icon?: string; /** * Specifies the name of the list items group in a grouped list. */ key?: string; /** * Specifies whether or not to display a chevron for the list item. */ showChevron?: boolean; } export type ExplicitTypes< TItem extends ItemLike, TKey, > = { Properties: Properties; ContentReadyEvent: ContentReadyEvent; DisposingEvent: DisposingEvent; GroupRenderedEvent: GroupRenderedEvent; InitializedEvent: InitializedEvent; ItemClickEvent: ItemClickEvent; ItemContextMenuEvent: ItemContextMenuEvent; ItemDeletedEvent: ItemDeletedEvent; ItemDeletingEvent: ItemDeletingEvent; ItemHoldEvent: ItemHoldEvent; ItemRenderedEvent: ItemRenderedEvent; ItemReorderedEvent: ItemReorderedEvent; ItemSwipeEvent: ItemSwipeEvent; OptionChangedEvent: OptionChangedEvent; PageLoadingEvent: PageLoadingEvent; PullRefreshEvent: PullRefreshEvent; ScrollEvent: ScrollEvent; SelectAllValueChangedEvent: SelectAllValueChangedEvent; SelectionChangingEvent: SelectionChangingEvent; SelectionChangedEvent: SelectionChangedEvent; }; export type Properties< TItem extends ItemLike = any, TKey = any, > = dxListOptions; /** * @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< TItem extends ItemLike = any, TKey = any, > = Properties;