devextreme
Version:
HTML5 JavaScript Component Suite for Responsive Web Development
1,542 lines (1,445 loc) • 49.1 kB
TypeScript
/**
* DevExtreme (ui/tree_list.d.ts)
* Version: 24.2.6
* Build date: Mon Mar 17 2025
*
* Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import {
UserDefinedElement,
DxElement,
UserDefinedElementsArray,
} from '../core/element';
import {
template,
DataStructure,
Mode,
ScrollMode,
SingleMultipleOrNone,
ToolbarItemLocation,
} from '../common';
import {
DxPromise,
} from '../core/utils/deferred';
import { DataSource } from '../common/data';
import {
Cancelable,
EventInfo,
NativeEventInfo,
InitializedEventInfo,
ChangedOptionInfo,
} from '../common/core/events';
import {
AdaptiveDetailRowPreparingInfo,
ColumnBase,
ColumnButtonBase,
DataChangeInfo,
DataErrorOccurredInfo,
DragDropInfo,
DragReorderInfo,
DragStartEventInfo,
EditingBase,
EditingTextsBase,
GridBase,
GridBaseOptions,
KeyDownInfo,
NewRowInfo,
PagingBase,
ReducedNativeEventInfo,
RowDraggingEventInfo,
RowDraggingTemplateData,
RowInsertedInfo,
RowInsertingInfo,
RowKeyInfo,
RowRemovedInfo,
RowRemovingInfo,
RowUpdatedInfo,
RowUpdatingInfo,
RowValidatingInfo,
SavingInfo,
ScrollingBase,
SelectionBase,
SelectionChangedInfo,
ToolbarPreparingInfo,
} from '../common/grids';
import { dxToolbarItem } from './toolbar';
import dxScrollable from './scroll_view/ui.scrollable';
import Widget from './widget/ui.widget';
/**
*
* @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 CellInfo<TRowData = any, TKey = any> {
/**
*
*/
readonly data: TRowData;
/**
*
*/
readonly key: TKey;
/**
*
*/
readonly value?: any;
/**
*
*/
readonly displayValue?: any;
/**
*
*/
readonly text: string;
/**
*
*/
readonly columnIndex: number;
/**
*
*/
readonly column: Column<TRowData, TKey>;
/**
*
*/
readonly rowIndex: number;
/**
*
*/
readonly rowType: string;
/**
*
*/
readonly cellElement: DxElement;
/**
*
*/
readonly row: Row<TRowData, TKey>;
}
export {
DisplayMode,
SearchMode,
} from '../common';
export {
ApplyFilterMode,
ColumnChooser,
ColumnChooserMode,
ColumnChooserSearchConfig,
ColumnChooserSelectionConfig,
ColumnCustomizeTextArg,
ColumnFixing,
ColumnFixingTexts,
ColumnHeaderFilter,
ColumnHeaderFilterSearchConfig,
ColumnLookup,
ColumnResizeMode,
DataChange,
DataChangeType,
DataRenderMode,
EnterKeyAction,
EnterKeyDirection,
FilterOperation,
FilterPanelTexts,
FilterRow,
FilterRowOperationDescriptions,
FilterType,
FixedPosition,
GridsEditMode,
GridsEditRefreshMode,
GroupExpandMode,
HeaderFilter,
HeaderFilterSearchConfig,
HeaderFilterGroupInterval,
HeaderFilterTexts,
KeyboardNavigation,
LoadPanel,
NewRowPosition,
Pager,
PagerPageSize,
RowDraggingTemplateData,
SearchPanel,
SelectedFilterOperation,
SelectionColumnDisplayMode,
Sorting,
StartEditAction,
StateStoreType,
StateStoring,
SummaryType,
} from '../common/grids';
export {
DataStructure,
Mode,
ScrollMode,
SingleMultipleOrNone,
ToolbarItemLocation,
};
export type TreeListPredefinedColumnButton = 'add' | 'cancel' | 'delete' | 'edit' | 'save' | 'undelete';
export type TreeListPredefinedToolbarItem = 'addRowButton' | 'applyFilterButton' | 'columnChooserButton' | 'revertButton' | 'saveButton' | 'searchPanel';
export type TreeListCommandColumnType = 'adaptive' | 'buttons' | 'drag';
export type TreeListFilterMode = 'fullBranch' | 'withAncestors' | 'matchOnly';
export type Scrollable = Omit<dxScrollable, '_templateManager' | '_cancelOptionChange' | '_getTemplate' | '_invalidate' | '_refresh' | '_notifyOptionChanged' | '_createElement'>;
/**
* The type of the adaptiveDetailRowPreparing event handler's argument.
*/
export type AdaptiveDetailRowPreparingEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & AdaptiveDetailRowPreparingInfo;
/**
* The type of the cellClick event handler's argument.
*/
export type CellClickEvent<TRowData = any, TKey = any> = NativeEventInfo<dxTreeList<TRowData, TKey>, PointerEvent | MouseEvent> & CellInfo<TRowData, TKey>;
/**
* The type of the cellDblClick event handler's argument.
*/
export type CellDblClickEvent<TRowData = any, TKey = any> = NativeEventInfo<dxTreeList<TRowData, TKey>, PointerEvent | MouseEvent> & CellInfo<TRowData, TKey>;
/**
* The type of the cellHoverChanged event handler's argument.
*/
export type CellHoverChangedEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & CellInfo<TRowData, TKey> & {
/**
*
*/
readonly eventType: string;
};
/**
* The type of the cellPrepared event handler's argument.
*/
export type CellPreparedEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & CellInfo<TRowData, TKey> & {
/**
*
*/
readonly isSelected?: boolean;
/**
*
*/
readonly isExpanded?: boolean;
/**
*
*/
readonly isNewRow?: boolean;
/**
*
*/
readonly watch?: Function;
/**
*
*/
readonly oldValue?: any;
};
/**
* The type of the contentReady event handler's argument.
*/
export type ContentReadyEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>>;
/**
* The type of the contextMenuPreparing event handler's argument.
*/
export type ContextMenuPreparingEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & {
/**
*
*/
items?: Array<any>;
/**
*
*/
readonly target: string;
/**
*
*/
readonly targetElement: DxElement;
/**
*
*/
readonly columnIndex: number;
/**
*
*/
readonly column?: Column<TRowData, TKey>;
/**
*
*/
readonly rowIndex: number;
/**
*
*/
readonly row?: Row<TRowData, TKey>;
};
/**
* The type of the dataErrorOccurred event handler's argument.
*/
export type DataErrorOccurredEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & DataErrorOccurredInfo;
/**
* The type of the disposing event handler's argument.
*/
export type DisposingEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>>;
/**
* The type of the editCanceled event handler's argument.
*/
export type EditCanceledEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & DataChangeInfo<TRowData, TKey>;
/**
* The type of the editCanceling event handler's argument.
*/
export type EditCancelingEvent<TRowData = any, TKey = any> = Cancelable & EventInfo<dxTreeList<TRowData, TKey>> & DataChangeInfo<TRowData, TKey>;
/**
* The type of the editingStart event handler's argument.
*/
export type EditingStartEvent<TRowData = any, TKey = any> = Cancelable & EventInfo<dxTreeList<TRowData, TKey>> & {
/**
*
*/
readonly data: TRowData;
/**
*
*/
readonly key: TKey;
/**
*
*/
readonly column: Column<TRowData, TKey>;
};
/**
* The type of the editorPrepared event handler's argument.
*/
export type EditorPreparedEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & {
/**
*
*/
readonly parentType: string;
/**
*
*/
readonly value?: any;
/**
*
*/
readonly setValue?: any;
/**
*
*/
readonly updateValueTimeout?: number;
/**
*
*/
readonly width?: number;
/**
*
*/
readonly disabled: boolean;
/**
*
*/
readonly rtlEnabled: boolean;
/**
*
*/
readonly editorElement: DxElement;
/**
*
*/
readonly readOnly: boolean;
/**
*
*/
readonly dataField?: string;
/**
*
*/
readonly row?: Row<TRowData, TKey>;
};
/**
* The type of the editorPreparing event handler's argument.
*/
export type EditorPreparingEvent<TRowData = any, TKey = any> = Cancelable & EventInfo<dxTreeList<TRowData, TKey>> & {
/**
*
*/
readonly parentType: string;
/**
*
*/
readonly value?: any;
/**
*
*/
readonly setValue?: any;
/**
*
*/
updateValueTimeout?: number;
/**
*
*/
readonly width?: number;
/**
*
*/
readonly disabled: boolean;
/**
*
*/
readonly rtlEnabled: boolean;
/**
*
*/
readonly editorElement: DxElement;
/**
*
*/
readonly readOnly: boolean;
/**
*
*/
editorName: string;
/**
*
*/
editorOptions: any;
/**
*
*/
readonly dataField?: string;
/**
*
*/
readonly row?: Row<TRowData, TKey>;
};
/**
* The type of the focusedCellChanged event handler's argument.
*/
export type FocusedCellChangedEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & {
/**
*
*/
readonly cellElement: DxElement;
/**
*
*/
readonly columnIndex: number;
/**
*
*/
readonly rowIndex: number;
/**
*
*/
readonly row: Row<TRowData, TKey>;
/**
*
*/
readonly column: Column<TRowData, TKey>;
};
/**
* The type of the focusedCellChanging event handler's argument.
*/
export type FocusedCellChangingEvent<TRowData = any, TKey = any> = Cancelable & NativeEventInfo<dxTreeList<TRowData, TKey>, KeyboardEvent | PointerEvent | MouseEvent | TouchEvent> & {
/**
*
*/
readonly cellElement: DxElement;
/**
*
*/
readonly prevColumnIndex: number;
/**
*
*/
readonly prevRowIndex: number;
/**
*
*/
newColumnIndex: number;
/**
*
*/
newRowIndex: number;
/**
*
*/
readonly rows: Array<Row<TRowData, TKey>>;
/**
*
*/
readonly columns: Array<Column<TRowData, TKey>>;
/**
*
*/
isHighlighted: boolean;
};
/**
* The type of the focusedRowChanged event handler's argument.
*/
export type FocusedRowChangedEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & {
/**
*
*/
readonly rowElement: DxElement;
/**
*
*/
readonly rowIndex: number;
/**
*
*/
readonly row: Row<TRowData, TKey>;
};
/**
* The type of the focusedRowChanging event handler's argument.
*/
export type FocusedRowChangingEvent<TRowData = any, TKey = any> = Cancelable & NativeEventInfo<dxTreeList<TRowData, TKey>, KeyboardEvent | PointerEvent | MouseEvent | TouchEvent> & {
/**
*
*/
readonly rowElement: DxElement;
/**
*
*/
readonly prevRowIndex: number;
/**
*
*/
newRowIndex: number;
/**
*
*/
readonly rows: Array<Row<TRowData, TKey>>;
};
/**
* The type of the initialized event handler's argument.
*/
export type InitializedEvent<TRowData = any, TKey = any> = InitializedEventInfo<dxTreeList<TRowData, TKey>>;
/**
* The type of the initNewRow event handler's argument.
*/
export type InitNewRowEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & NewRowInfo<TRowData>;
/**
* The type of the keyDown event handler's argument.
*/
export type KeyDownEvent<TRowData = any, TKey = any> = NativeEventInfo<dxTreeList<TRowData, TKey>, KeyboardEvent> & KeyDownInfo;
/**
* The type of the nodesInitialized event handler's argument.
*/
export type NodesInitializedEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & {
/**
*
*/
readonly root: Node<TRowData, TKey>;
};
/**
* The type of the optionChanged event handler's argument.
*/
export type OptionChangedEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & ChangedOptionInfo;
/**
* The type of the rowClick event handler's argument.
*/
export type RowClickEvent<TRowData = any, TKey = any> = NativeEventInfo<dxTreeList<TRowData, TKey>, PointerEvent | MouseEvent> & {
/**
*
*/
readonly data: TRowData;
/**
*
*/
readonly key: TKey;
/**
*
*/
readonly values: Array<any>;
/**
*
*/
readonly columns: Array<Column<TRowData, TKey>>;
/**
*
*/
readonly rowIndex: number;
/**
*
*/
readonly rowType: string;
/**
*
*/
readonly isSelected?: boolean;
/**
*
*/
readonly isExpanded?: boolean;
/**
*
*/
readonly isNewRow?: boolean;
/**
*
*/
readonly rowElement: DxElement;
/**
*
*/
readonly handled: boolean;
/**
*
*/
readonly node: Node<TRowData, TKey>;
/**
*
*/
readonly level: number;
};
/**
* The type of the rowCollapsed event handler's argument.
*/
export type RowCollapsedEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & RowKeyInfo<TKey>;
/**
* The type of the rowCollapsing event handler's argument.
*/
export type RowCollapsingEvent<TRowData = any, TKey = any> = Cancelable & EventInfo<dxTreeList<TRowData, TKey>> & RowKeyInfo<TKey>;
/**
* The type of the rowDblClick event handler's argument.
*/
export type RowDblClickEvent<TRowData = any, TKey = any> = NativeEventInfo<dxTreeList<TRowData, TKey>, PointerEvent | MouseEvent> & {
/**
*
*/
readonly data: TRowData;
/**
*
*/
readonly key: TKey;
/**
*
*/
readonly values: Array<any>;
/**
*
*/
readonly columns: Array<Column<TRowData, TKey>>;
/**
*
*/
readonly rowIndex: number;
/**
*
*/
readonly rowType: string;
/**
*
*/
readonly isSelected?: boolean;
/**
*
*/
readonly isExpanded?: boolean;
/**
*
*/
readonly isNewRow?: boolean;
/**
*
*/
readonly rowElement: DxElement;
};
/**
* The type of the rowExpanded event handler's argument.
*/
export type RowExpandedEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & RowKeyInfo<TKey>;
/**
* The type of the rowExpanding event handler's argument.
*/
export type RowExpandingEvent<TRowData = any, TKey = any> = Cancelable & EventInfo<dxTreeList<TRowData, TKey>> & RowKeyInfo<TKey>;
/**
* The type of the rowInserted event handler's argument.
*/
export type RowInsertedEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & RowInsertedInfo<TRowData, TKey>;
/**
* The type of the rowInserting event handler's argument.
*/
export type RowInsertingEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & RowInsertingInfo<TRowData>;
/**
* The type of the rowPrepared event handler's argument.
*/
export type RowPreparedEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & {
/**
*
*/
readonly data: TRowData;
/**
*
*/
readonly key: TKey;
/**
*
*/
readonly values: Array<any>;
/**
*
*/
readonly columns: Array<Column<TRowData, TKey>>;
/**
*
*/
readonly rowIndex: number;
/**
*
*/
readonly rowType: string;
/**
*
*/
readonly isSelected?: boolean;
/**
*
*/
readonly isExpanded?: boolean;
/**
*
*/
readonly isNewRow?: boolean;
/**
*
*/
readonly rowElement: DxElement;
/**
*
*/
readonly node: Node<TRowData, TKey>;
/**
*
*/
readonly level: number;
};
/**
* The type of the rowRemoved event handler's argument.
*/
export type RowRemovedEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & RowRemovedInfo<TRowData, TKey>;
/**
* The type of the rowRemoving event handler's argument.
*/
export type RowRemovingEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & RowRemovingInfo<TRowData, TKey>;
/**
* The type of the rowUpdated event handler's argument.
*/
export type RowUpdatedEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & RowUpdatedInfo<TRowData, TKey>;
/**
* The type of the rowUpdating event handler's argument.
*/
export type RowUpdatingEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & RowUpdatingInfo<TRowData, TKey>;
/**
* The type of the rowValidating event handler's argument.
*/
export type RowValidatingEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & RowValidatingInfo<TRowData, TKey>;
/**
* The type of the saved event handler's argument.
*/
export type SavedEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & DataChangeInfo<TRowData, TKey>;
/**
* The type of the saving event handler's argument.
*/
export type SavingEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & SavingInfo<TRowData, TKey>;
/**
* The type of the selectionChanged event handler's argument.
*/
export type SelectionChangedEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & SelectionChangedInfo<TRowData, TKey>;
/**
* The type of the toolbarPreparing event handler's argument.
*/
export type ToolbarPreparingEvent<TRowData = any, TKey = any> = EventInfo<dxTreeList<TRowData, TKey>> & ToolbarPreparingInfo;
export type RowDraggingAddEvent<TRowData = any, TKey = any> = ReducedNativeEventInfo<dxTreeList<TRowData, TKey>> & RowDraggingEventInfo<TRowData> & DragDropInfo;
export type RowDraggingChangeEvent<TRowData = any, TKey = any> = Cancelable & ReducedNativeEventInfo<dxTreeList<TRowData, TKey>> & RowDraggingEventInfo<TRowData> & DragDropInfo;
export type RowDraggingEndEvent<TRowData = any, TKey = any> = Cancelable & ReducedNativeEventInfo<dxTreeList<TRowData, TKey>> & RowDraggingEventInfo<TRowData> & DragDropInfo;
export type RowDraggingMoveEvent<TRowData = any, TKey = any> = Cancelable & ReducedNativeEventInfo<dxTreeList<TRowData, TKey>> & RowDraggingEventInfo<TRowData> & DragDropInfo;
export type RowDraggingStartEvent<TRowData = any, TKey = any> = Cancelable & ReducedNativeEventInfo<dxTreeList<TRowData, TKey>> & DragStartEventInfo<TRowData>;
export type RowDraggingRemoveEvent<TRowData = any, TKey = any> = ReducedNativeEventInfo<dxTreeList<TRowData, TKey>> & RowDraggingEventInfo<TRowData>;
export type RowDraggingReorderEvent<TRowData = any, TKey = any> = ReducedNativeEventInfo<dxTreeList<TRowData, TKey>> & RowDraggingEventInfo<TRowData> & DragReorderInfo;
export type ColumnButtonClickEvent<TRowData = any, TKey = any> = NativeEventInfo<dxTreeList<TRowData, TKey>, PointerEvent | MouseEvent> & {
row?: Row<TRowData, TKey>;
column?: Column<TRowData, TKey>;
};
export type ColumnButtonTemplateData<TRowData = any, TKey = any> = {
readonly component: dxTreeList<TRowData, TKey>;
readonly data: TRowData;
readonly key: TKey;
readonly columnIndex: number;
readonly column: Column<TRowData, TKey>;
readonly rowIndex: number;
readonly rowType: string;
readonly row: Row<TRowData, TKey>;
};
export type ColumnCellTemplateData<TRowData = any, TKey = any> = {
readonly data: TRowData;
readonly component: dxTreeList<TRowData, TKey>;
readonly value?: any;
readonly oldValue?: any;
readonly displayValue?: any;
readonly text: string;
readonly columnIndex: number;
readonly rowIndex: number;
readonly column: Column<TRowData, TKey>;
readonly row: Row<TRowData, TKey>;
readonly rowType: string;
readonly watch?: Function;
};
export type ColumnEditCellTemplateData<TRowData = any, TKey = any> = {
readonly setValue?: any;
readonly data: TRowData;
readonly component: dxTreeList<TRowData, TKey>;
readonly value?: any;
readonly displayValue?: any;
readonly text: string;
readonly columnIndex: number;
readonly rowIndex: number;
readonly column: Column<TRowData, TKey>;
readonly row: Row<TRowData, TKey>;
readonly rowType: string;
readonly watch?: Function;
};
/**
* @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 ColumnHeaderCellTemplateData<TRowData = any, TKey = any> = {
readonly component: dxTreeList<TRowData, TKey>;
readonly columnIndex: number;
readonly column: Column<TRowData, TKey>;
};
type OverriddenKeys = 'autoExpandAll' | 'columns' | 'customizeColumns' | 'dataStructure' | 'editing' | 'expandedRowKeys' | 'expandNodesOnFiltering' | 'filterMode' | 'hasItemsExpr' | 'itemsExpr' | 'keyExpr' | 'onCellClick' | 'onCellDblClick' | 'onCellHoverChanged' | 'onCellPrepared' | 'onContextMenuPreparing' | 'onEditingStart' | 'onEditorPrepared' | 'onEditorPreparing' | 'onFocusedCellChanged' | 'onFocusedCellChanging' | 'onFocusedRowChanged' | 'onFocusedRowChanging' | 'onNodesInitialized' | 'onRowClick' | 'onRowDblClick' | 'onRowPrepared' | 'paging' | 'parentIdExpr' | 'remoteOperations' | 'rootValue' | 'scrolling' | 'selection' | 'toolbar';
/**
*
* @deprecated
*/
export type dxTreeListOptions<TRowData = any, TKey = any> = Omit<GridBaseOptions<dxTreeList<TRowData, TKey>, TRowData, TKey>, OverriddenKeys> & {
/**
* Specifies whether all rows are expanded initially.
*/
autoExpandAll?: boolean;
/**
* Configures columns.
*/
columns?: Array<Column<TRowData, TKey> | string> | undefined;
/**
* Customizes columns after they are created.
*/
customizeColumns?: ((columns: Array<Column<TRowData, TKey>>) => void);
/**
* Notifies the UI component of the used data structure.
*/
dataStructure?: DataStructure;
/**
* Configures editing.
*/
editing?: Editing<TRowData, TKey>;
/**
* Specifies whether nodes appear expanded or collapsed after filtering is applied.
*/
expandNodesOnFiltering?: boolean;
/**
* Specifies keys of the initially expanded rows.
*/
expandedRowKeys?: Array<TKey>;
/**
* Specifies whether filter and search results should include matching rows only, matching rows with ancestors, or matching rows with ancestors and descendants (full branch).
*/
filterMode?: TreeListFilterMode;
/**
* Specifies which data field defines whether the node has children.
*/
hasItemsExpr?: string | Function;
/**
* Specifies which data field contains nested items. Set this property when your data has a hierarchical structure.
*/
itemsExpr?: string | Function;
/**
* Specifies the key property (or properties) that provide(s) key values to access data items. Each key value must be unique.
*/
keyExpr?: string | Function;
/**
* A function that is executed when a cell is clicked or tapped. Executed before onRowClick.
*/
onCellClick?: ((e: CellClickEvent<TRowData, TKey>) => void);
/**
* A function that is executed when a cell is double-clicked or double-tapped. Executed before onRowDblClick.
*/
onCellDblClick?: ((e: CellDblClickEvent<TRowData, TKey>) => void);
/**
* A function that is executed after the pointer enters or leaves a cell.
*/
onCellHoverChanged?: ((e: CellHoverChangedEvent<TRowData, TKey>) => void);
/**
* A function that is executed after a grid cell is created.
*/
onCellPrepared?: ((e: CellPreparedEvent<TRowData, TKey>) => void);
/**
* A function that is executed before the context menu is rendered.
*/
onContextMenuPreparing?: ((e: ContextMenuPreparingEvent<TRowData, TKey>) => void);
/**
* A function that is executed before a cell or row switches to the editing state.
*/
onEditingStart?: ((e: EditingStartEvent<TRowData, TKey>) => void);
/**
* A function that is executed after an editor is created. Not executed for cells with an editCellTemplate.
*/
onEditorPrepared?: ((options: EditorPreparedEvent<TRowData, TKey>) => void);
/**
* A function used to customize cell editors. Not executed for cells with an editCellTemplate.
*/
onEditorPreparing?: ((e: EditorPreparingEvent<TRowData, TKey>) => void);
/**
* A function that is executed after the focused cell changes. Applies only to cells in data rows.
*/
onFocusedCellChanged?: ((e: FocusedCellChangedEvent<TRowData, TKey>) => void);
/**
* A function that is executed before the focused cell changes. Applies only to cells in data rows.
*/
onFocusedCellChanging?: ((e: FocusedCellChangingEvent<TRowData, TKey>) => void);
/**
* A function that executed when the focused row changes. Applies only to data rows. focusedRowEnabled should be true.
*/
onFocusedRowChanged?: ((e: FocusedRowChangedEvent<TRowData, TKey>) => void);
/**
* A function that is executed before the focused row changes. Applies only to data rows. focusedRowEnabled should be true.
*/
onFocusedRowChanging?: ((e: FocusedRowChangingEvent<TRowData, TKey>) => void);
/**
* A function that is executed after the loaded nodes are initialized.
*/
onNodesInitialized?: ((e: NodesInitializedEvent<TRowData, TKey>) => void);
/**
* A function that is executed when a grid row is clicked or tapped.
*/
onRowClick?: ((e: RowClickEvent<TRowData, TKey>) => void);
/**
* A function that is executed when a row is double-clicked or double-tapped. Executed after onCellDblClick.
*/
onRowDblClick?: ((e: RowDblClickEvent<TRowData, TKey>) => void);
/**
* A function that is executed after a row is created.
*/
onRowPrepared?: ((e: RowPreparedEvent<TRowData, TKey>) => void);
/**
* Configures paging.
*/
paging?: Paging;
/**
* Specifies which data field provides parent keys.
*/
parentIdExpr?: string | Function;
/**
* Notifies the TreeList of the server's data processing operations. Applies only if data has a plain structure.
*/
remoteOperations?: {
/**
* Specifies whether filtering should be performed on the server.
*/
filtering?: boolean;
/**
* Specifies whether grouping should be performed on the server.
*/
grouping?: boolean;
/**
* Specifies whether sorting should be performed on the server.
*/
sorting?: boolean;
} | Mode;
/**
* Specifies the root node's identifier. Applies if dataStructure is 'plain'.
*/
rootValue?: TKey;
/**
* Configures scrolling.
*/
scrolling?: Scrolling;
/**
* Configures runtime selection.
*/
selection?: Selection;
/**
* Configures the toolbar.
*/
toolbar?: Toolbar | undefined;
};
/**
* @deprecated Use Editing 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 dxTreeListEditing<TRowData = any, TKey = any> = Editing<TRowData, TKey>;
/**
* Configures editing.
*/
export interface Editing<TRowData = any, TKey = any> extends EditingBase<TRowData, TKey> {
/**
* Specifies whether a user can add new rows. It is called for each data row when defined as a function.
*/
allowAdding?: boolean | ((options: { readonly component: dxTreeList<TRowData, TKey>; readonly row?: Row<TRowData, TKey> }) => boolean);
/**
* Specifies whether a user can delete rows. It is called for each data row when defined as a function.
*/
allowDeleting?: boolean | ((options: { readonly component: dxTreeList<TRowData, TKey>; readonly row?: Row<TRowData, TKey> }) => boolean);
/**
* Specifies whether a user can update rows. It is called for each data row when defined as a function
*/
allowUpdating?: boolean | ((options: { readonly component: dxTreeList<TRowData, TKey>; readonly row?: Row<TRowData, TKey> }) => boolean);
/**
* Contains properties that specify texts for editing-related UI elements.
*/
texts?: EditingTexts;
}
/**
* @deprecated Use EditingTexts 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 dxTreeListEditingTexts = EditingTexts;
/**
* Contains properties that specify texts for editing-related UI elements.
*/
export type EditingTexts = EditingTextsBase & {
/**
* Specifies text for the button that adds a new nested row. Applies if the editing.mode is 'batch' or 'cell'.
*/
addRowToNode?: string;
};
/**
* @deprecated Use Paging 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 dxTreeListPaging = Paging;
/**
* An object that configures paging.
*/
export type Paging = PagingBase & {
/**
* Specifies whether paging is enabled.
*/
enabled?: boolean;
};
/**
* @deprecated Use Scrolling 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 dxTreeListScrolling = Scrolling;
/**
* Configures scrolling.
*/
export interface Scrolling extends ScrollingBase {
/**
* Specifies the scrolling mode.
*/
mode?: ScrollMode;
}
/**
* @deprecated Use Selection 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 dxTreeListSelection = Selection;
/**
* Configures runtime selection.
*/
export interface Selection extends SelectionBase {
/**
* Specifies whether selection is recursive.
*/
recursive?: boolean;
}
/**
* The TreeList is a UI component that represents data from a local or remote source in the form of a multi-column tree view. This UI component offers such features as sorting, filtering, editing, selection, etc.
*/
export default class dxTreeList<TRowData = any, TKey = any> extends Widget<dxTreeListOptions<TRowData, TKey>> implements GridBase<TRowData, TKey> {
/**
* Adds a new column.
*/
addColumn(columnOptions: Column<TRowData, TKey> | string): void;
/**
* Adds an empty data row to the highest hierarchical level and switches it to the editing state.
*/
addRow(): DxPromise<void>;
/**
* Adds an empty data row to a specified parent row.
*/
addRow(parentId: TKey): DxPromise<void>;
/**
* Collapses a row with a specific key.
*/
collapseRow(key: TKey): DxPromise<void>;
/**
* Expands a row with a specific key.
*/
expandRow(key: TKey): DxPromise<void>;
/**
* Performs a pre-order tree traversal, executing a function on each visited node. Starts traversing from the top level nodes.
*/
forEachNode(callback: Function): void;
/**
* Performs a pre-order tree traversal, executing a function on each visited node. Starts traversing from the specified nodes.
*/
forEachNode(nodes: Array<Node<TRowData, TKey>>, callback: Function): void;
/**
* Gets a node with a specific key.
*/
getNodeByKey(key: TKey): Node<TRowData, TKey>;
/**
* Gets the root node.
*/
getRootNode(): Node<TRowData, TKey>;
/**
* Gets the keys of the rows selected explicitly via the API or via a click or tap.
*/
getSelectedRowKeys(): Array<TKey>;
/**
* Gets selected row keys.
*/
getSelectedRowKeys(mode: string): Array<TKey>;
/**
* Gets the data objects of the rows selected explicitly via the API or via a click or tap.
*/
getSelectedRowsData(): Array<TRowData>;
/**
* Gets selected row data objects.
*/
getSelectedRowsData(mode: string): Array<TRowData>;
/**
* Gets all visible columns.
*/
getVisibleColumns(): Array<Column<TRowData, TKey>>;
/**
* Gets all visible columns at a specific hierarchical level of column headers. Use it to access banded columns.
*/
getVisibleColumns(headerLevel: number): Array<Column<TRowData, TKey>>;
/**
* Gets currently rendered rows.
*/
getVisibleRows(): Array<Row<TRowData, TKey>>;
/**
* Checks whether a row is expanded or collapsed.
*/
isRowExpanded(key: TKey): boolean;
/**
* Loads all root node descendants (all data items). Takes effect only if data has the plain structure and remoteOperations.filtering is true.
*/
loadDescendants(): DxPromise<void>;
/**
* Loads a specific node's descendants. Takes effect only if data has the plain structure and remoteOperations.filtering is true.
*/
loadDescendants(keys: Array<TKey>): DxPromise<void>;
/**
* Loads all or only direct descendants of specific nodes. Takes effect only if data has the plain structure and remoteOperations.filtering is true.
*/
loadDescendants(keys: Array<TKey>, childrenOnly: boolean): DxPromise<void>;
beginCustomLoading(messageText: string): void;
byKey(key: TKey): DxPromise<TRowData>;
cancelEditData(): void;
cellValue(rowIndex: number, dataField: string): any;
cellValue(rowIndex: number, dataField: string, value: any): void;
cellValue(rowIndex: number, visibleColumnIndex: number): any;
cellValue(rowIndex: number, visibleColumnIndex: number, value: any): void;
clearFilter(): void;
clearFilter(filterName: string): void;
clearSelection(): void;
clearSorting(): void;
closeEditCell(): void;
collapseAdaptiveDetailRow(): void;
columnCount(): number;
columnOption(id: number | string): any;
columnOption(id: number | string, optionName: string): any;
columnOption(id: number | string, optionName: string, optionValue: any): void;
columnOption(id: number | string, options: any): void;
deleteColumn(id: number | string): void;
deleteRow(rowIndex: number): void;
deselectAll(): DxPromise<void>;
deselectRows(keys: Array<TKey>): DxPromise<Array<TRowData>>;
editCell(rowIndex: number, dataField: string): void;
editCell(rowIndex: number, visibleColumnIndex: number): void;
editRow(rowIndex: number): void;
endCustomLoading(): void;
expandAdaptiveDetailRow(key: TKey): void;
filter(): any;
filter(filterExpr: any): void;
focus(): void;
focus(element: UserDefinedElement): void;
getCellElement(rowIndex: number, dataField: string): DxElement | undefined;
getCellElement(rowIndex: number, visibleColumnIndex: number): DxElement | undefined;
getCombinedFilter(): any;
getCombinedFilter(returnDataField: boolean): any;
getDataSource(): DataSource<TRowData, TKey>;
getKeyByRowIndex(rowIndex: number): TKey | undefined;
getRowElement(rowIndex: number): UserDefinedElementsArray | undefined;
getRowIndexByKey(key: TKey): number;
getScrollable(): Scrollable;
getVisibleColumnIndex(id: number | string): number;
hasEditData(): boolean;
hideColumnChooser(): void;
isAdaptiveDetailRowExpanded(key: TKey): boolean;
isRowFocused(key: TKey): boolean;
isRowSelected(key: TKey): boolean;
keyOf(obj: TRowData): TKey;
navigateToRow(key: TKey): DxPromise<void>;
pageCount(): number;
pageIndex(): number;
pageIndex(newIndex: number): DxPromise<void>;
pageSize(): number;
pageSize(value: number): void;
refresh(): DxPromise<void>;
refresh(changesOnly: boolean): DxPromise<void>;
repaintRows(rowIndexes: Array<number>): void;
saveEditData(): DxPromise<void>;
searchByText(text: string): void;
selectAll(): DxPromise<void>;
selectRows(keys: Array<TKey>, preserve: boolean): DxPromise<Array<TRowData>>;
selectRowsByIndexes(indexes: Array<number>): DxPromise<Array<TRowData>>;
showColumnChooser(): void;
state(): any;
state(state: any): void;
undeleteRow(rowIndex: number): void;
updateDimensions(): void;
}
type DefaultToolbarItemName = 'addRowButton' | 'applyFilterButton' | 'columnChooserButton' | 'revertButton' | 'saveButton' | 'searchPanel';
/**
* @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 dxTreeListToolbar = Toolbar;
/**
* @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 dxTreeListToolbarItem = ToolbarItem;
/**
* Configures toolbar items.
* @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 ToolbarItem extends dxToolbarItem {
/**
* A name used to identify the toolbar item.
*/
name?: TreeListPredefinedToolbarItem | string;
/**
* Specifies a location for the item on the toolbar.
*/
location?: ToolbarItemLocation;
}
/**
* Configures the toolbar.
*/
export type Toolbar = {
/**
* Configures toolbar items.
*/
items?: Array<TreeListPredefinedToolbarItem | ToolbarItem>;
/**
* Specifies whether the toolbar is visible.
*/
visible?: boolean | undefined;
/**
* Specifies whether the toolbar responds to user interaction.
*/
disabled?: boolean;
};
export type Column<TRowData = any, TKey = any> = dxTreeListColumn<TRowData, TKey>;
/**
* @deprecated Use the Column type 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 dxTreeListColumn<TRowData = any, TKey = any> extends ColumnBase<TRowData> {
/**
* Allows you to customize buttons in the edit column or create a custom command column. Applies only if the column's type is 'buttons'.
*/
buttons?: Array<TreeListPredefinedColumnButton | ColumnButton<TRowData, TKey>>;
/**
* Specifies a custom template for data cells.
*/
cellTemplate?: template | ((cellElement: DxElement, cellInfo: ColumnCellTemplateData<TRowData, TKey>) => any);
/**
* Configures columns.
*/
columns?: Array<Column<TRowData, TKey> | string> | undefined;
/**
* Specifies a custom template for data cells in an editing state.
*/
editCellTemplate?: template | ((cellElement: DxElement, cellInfo: ColumnEditCellTemplateData<TRowData, TKey>) => any);
/**
* Specifies a custom template for column headers.
*/
headerCellTemplate?: template | ((columnHeader: DxElement, headerInfo: ColumnHeaderCellTemplateData<TRowData, TKey>) => any);
/**
* Specifies the command column that this object customizes.
*/
type?: TreeListCommandColumnType;
}
export type ColumnButton<TRowData = any, TKey = any> = dxTreeListColumnButton<TRowData, TKey>;
/**
* @deprecated Use the TreeList's ColumnButton type 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 dxTreeListColumnButton<TRowData = any, TKey = any> extends ColumnButtonBase {
/**
* The name used to identify a built-in button.
*/
name?: TreeListPredefinedColumnButton | string;
/**
* A function that is executed when the button is clicked or tapped.
*/
onClick?: ((e: ColumnButtonClickEvent<TRowData, TKey>) => void);
/**
* Specifies a custom button template.
*/
template?: template | ((cellElement: DxElement, cellInfo: ColumnButtonTemplateData<TRowData, TKey>) => string | UserDefinedElement);
/**
* Specifies the button's visibility.
*/
visible?: boolean | ((options: { readonly component: dxTreeList<TRowData, TKey>; readonly row?: Row<TRowData, TKey>; readonly column: Column<TRowData, TKey> }) => boolean);
/**
* Specifies whether the button is disabled.
*/
disabled?: boolean | ((options: { readonly component: dxTreeList<TRowData, TKey>; readonly row?: Row<TRowData, TKey>; readonly column: Column<TRowData, TKey> }) => boolean);
}
/**
* @deprecated Use Node 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 dxTreeListNode<TRowData = any, TKey = any> = Node<TRowData, TKey>;
/**
* A TreeList node's structure.
*/
export type Node<TRowData = any, TKey = any> = {
/**
* Contains all child nodes.
*/
children?: Array<Node<TRowData, TKey>>;
/**
* The node's data object.
*/
data?: TRowData;
/**
* Indicates whether the node has child nodes.
*/
hasChildren?: boolean;
/**
* The node's key.
*/
key: TKey;
/**
* The node's hierarchical level.
*/
level: number;
/**
* The parent node.
*/
parent?: Node<TRowData, TKey>;
/**
* Indicates whether the node is visualized as a row.
*/
visible?: boolean;
};
/**
* @deprecated Use Row 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 dxTreeListRowObject<TRowData = any, TKey = any> = Row<TRowData, TKey>;
/**
* A grid row.
*/
export type Row<TRowData = any, TKey = any> = {
/**
* Indicates whether the row is in the editing state.
*/
readonly isEditing?: boolean;
/**
* Indicates whether the row is expanded or collapsed. Available if rowType is 'data'.
*/
readonly isExpanded?: boolean;
/**
* Indicates that the row is added, but not yet saved. Available if rowType is 'data'.
*/
readonly isNewRow?: boolean;
/**
* Indicates whether the row is selected. Available if rowType is 'data' or 'detail'.
*/
readonly isSelected?: boolean;
/**
* The row's key. Available if rowType is 'data', 'detail' or 'detailAdaptive'.
*/
readonly key: TKey;
/**
* The row's hierarchical level. Available if rowType is 'data' or 'detail'.
*/
readonly level: number;
/**
* The row's node. Available if rowType is 'data' or 'detail'.
*/
readonly node: Node<TRowData, TKey>;
/**
* The row's visible index. This index is zero-based and available if rowType is 'data', 'detail' or 'detailAdaptive'.
*/
readonly rowIndex: number;
/**
* The row's type.
*/
readonly rowType: string;
/**
* Values displayed in the row's cells.
*/
readonly values: Array<any>;
/**
* A data object that the row visualizes.
*/
readonly data: TRowData;
};
export type ExplicitTypes<TRowData, TKey> = {
AdaptiveDetailRowPreparingEvent: AdaptiveDetailRowPreparingEvent<TRowData, TKey>;
CellClickEvent: CellClickEvent<TRowData, TKey>;
CellDblClickEvent: CellDblClickEvent<TRowData, TKey>;
CellHoverChangedEvent: CellHoverChangedEvent<TRowData, TKey>;
CellPreparedEvent: CellPreparedEvent<TRowData, TKey>;
ColumnButtonClickEvent: ColumnButtonClickEvent<TRowData, TKey>;
ColumnButtonTemplateData: ColumnButtonTemplateData<TRowData, TKey>;
ColumnCellTemplateData: ColumnCellTemplateData<TRowData, TKey>;
ColumnEditCellTemplateData: ColumnEditCellTemplateData<TRowData, TKey>;
ContentReadyEvent: ContentReadyEvent<TRowData, TKey>;
ContextMenuPreparingEvent: ContextMenuPreparingEvent<TRowData, TKey>;
DataErrorOccurredEvent: DataErrorOccurredEvent<TRowData, TKey>;
DisposingEvent: DisposingEvent<TRowData, TKey>;
EditCanceledEvent: EditCanceledEvent<TRowData, TKey>;
EditCancelingEvent: EditCancelingEvent<TRowData, TKey>;
Editing: Editing<TRowData, TKey>;
EditingStartEvent: EditingStartEvent<TRowData, TKey>;
EditorPreparedEvent: EditorPreparedEvent<TRowData, TKey>;
EditorPreparingEvent: EditorPreparingEvent<TRowData, TKey>;
FocusedCellChangedEvent: FocusedCellChangedEvent<TRowData, TKey>;
FocusedCellChangingEvent: FocusedCellChangingEvent<TRowData, TKey>;
FocusedRowChangedEvent: FocusedRowChangedEvent<TRowData, TKey>;
FocusedRowChangingEvent: FocusedRowChangingEvent<TRowData, TKey>;
InitializedEvent: InitializedEvent<TRowData, TKey>;
InitNewRowEvent: InitNewRowEvent<TRowData, TKey>;
KeyDownEvent: KeyDownEvent<TRowData, TKey>;
NodesInitializedEvent: NodesInitializedEvent<TRowData, TKey>;
OptionChangedEvent: OptionChangedEvent<TRowData, TKey>;
Properties: Properties<TRowData, TKey>;
RowClickEvent: RowClickEvent<TRowData, TKey>;
RowCollapsedEvent: RowCollapsedEvent<TRowData, TKey>;
RowCollapsingEvent: RowCollapsingEvent<TRowData, TKey>;
RowDblClickEvent: RowDblClickEvent<TRowData, TKey>;
RowDraggingAddEvent: RowDraggingAddEvent<TRowData, TKey>;
RowDraggingChangeEvent: RowDraggingChangeEvent<TRowData, TKey>;
RowDraggingEndEvent: RowDraggingEndEvent<TRowData, TKey>;
RowDraggingMoveEvent: RowDraggingMoveEvent<TRowData, TKey>;
RowDraggingRemoveEvent: RowDraggingRemoveEvent<TRowData, TKey>;
RowDraggingReorderEvent: RowDraggingReorderEvent<TRowData, TKey>;
RowDraggingStartEvent: RowDraggingStartEvent<TRowData, TKey>;
RowDraggingTemplateData: RowDraggingTemplateData<TRowData>;
RowExpandedEvent: RowExpandedEvent<TRowData, TKey>;
RowExpandingEvent: RowExpandingEvent<TRowData, TKey>;
RowInsertedEvent: RowInsertedEvent<TRowData, TKey>;
RowInsertingEvent: RowInsertingEvent<TRowData, TKey>;
RowPreparedEvent: RowPreparedEvent<TRowData, TKey>;
RowRemovedEvent: RowRemovedEvent<TRowData, TKey>;
RowRemovingEvent: RowRemovingEvent<TRowData, TKey>;
RowUpdatedEvent: RowUpdatedEvent<TRowData, TKey>;
RowUpdatingEvent: RowUpdatingEvent<TRowData, TKey>;
RowValidatingEvent: RowValidatingEvent<TRowData, TKey>;
SavedEvent: SavedEvent<TRowData, TKey>;
SavingEvent: SavingEvent<TRowData, TKey>;
Scrolling: Scrolling;
Selection: Selection;
SelectionChangedEvent: SelectionChangedEvent<TRowData, TKey>;
Toolbar: Toolbar;
ToolbarItem: ToolbarItem;
ToolbarPreparingEvent: ToolbarPreparingEvent<TRowData, TKey>;
};
export type Properties<TRowData = any, TKey = any> = dxTreeListOptions<TRowData, TKey>;
/**
* @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<TRowData = any, TKey = any> = dxTreeListOptions<TRowData, TKey>;