devextreme-angular

/*! * devextreme-angular * Version: 25.2.3 * Build date: Fri Dec 12 2025 * * Copyright (c) 2012 - 2025 Developer Express Inc. ALL RIGHTS RESERVED * * This software may be modified and distributed under the terms * of the MIT license. See the LICENSE file in the root of the project for details. * * https://github.com/DevExpress/devextreme-angular */ import { TransferState, ElementRef, NgZone, OnDestroy, EventEmitter, OnChanges, DoCheck, SimpleChanges, QueryList } from '@angular/core'; import DataSource from 'devextreme/data/data_source'; import dxDataGrid from 'devextreme/ui/data_grid'; import dxSortable from 'devextreme/ui/sortable'; import dxDraggable from 'devextreme/ui/draggable'; import { AIIntegration } from 'devextreme/common/ai-integration'; import { ColumnChooser, ColumnResizeMode, DataChange, GridsEditMode, NewRowPosition, GridsEditRefreshMode, StartEditAction, FilterPanel, ApplyFilterMode, GroupExpandMode, HeaderFilter, EnterKeyAction, EnterKeyDirection, Pager, GridBase, DataRenderMode, SearchPanel, SelectionColumnDisplayMode, Sorting, StateStoreType, SummaryType } from 'devextreme/common/grids'; import { dxDataGridColumn, dxDataGridRowObject, DataGridExportFormat, AdaptiveDetailRowPreparingEvent, AIColumnRequestCreatingEvent, CellClickEvent, CellDblClickEvent, CellHoverChangedEvent, CellPreparedEvent, ContentReadyEvent, ContextMenuPreparingEvent, DataErrorOccurredEvent, DisposingEvent, EditCanceledEvent, EditCancelingEvent, EditingStartEvent, EditorPreparedEvent, EditorPreparingEvent, ExportingEvent, FocusedCellChangedEvent, FocusedCellChangingEvent, FocusedRowChangedEvent, FocusedRowChangingEvent, InitializedEvent, InitNewRowEvent, KeyDownEvent, OptionChangedEvent, RowClickEvent, RowCollapsedEvent, RowCollapsingEvent, RowDblClickEvent, RowExpandedEvent, RowExpandingEvent, RowInsertedEvent, RowInsertingEvent, RowPreparedEvent, RowRemovedEvent, RowRemovingEvent, RowUpdatedEvent, RowUpdatingEvent, RowValidatingEvent, SavedEvent, SavingEvent, SelectionChangedEvent, ToolbarPreparingEvent, DataGridScrollMode, SelectionSensitivity, dxDataGridToolbar } from 'devextreme/ui/data_grid'; import { Mode, DragDirection, DragHighlight, ScrollbarMode, SingleMultipleOrNone, SelectAllMode, SortOrder, HorizontalAlignment } from 'devextreme/common'; import { DataSourceOptions } from 'devextreme/data/data_source'; import { Store } from 'devextreme/data/store'; import { dxFormOptions } from 'devextreme/ui/form'; import { dxPopupOptions } from 'devextreme/ui/popup'; import { dxFilterBuilderOptions } from 'devextreme/ui/filter_builder'; import { LoadPanelIndicatorProperties } from 'devextreme/ui/load_panel'; import { event } from 'devextreme/events/events.types'; import { Format } from 'devextreme/common/core/localization'; import DxDataGrid from 'devextreme/ui/data_grid'; import { DxComponent, DxTemplateHost, NestedOptionHost, IterableDifferHelper, WatcherHelper, CollectionNestedOption } from 'devextreme-angular/core'; import type * as DxDataGridTypes from "devextreme/ui/data_grid_types"; import * as i0 from "@angular/core"; import * as i1 from "devextreme-angular/ui/nested"; import * as i2 from "devextreme-angular/ui/data-grid/nested"; import * as i3 from "devextreme-angular/core"; export { ExplicitTypes } from 'devextreme/ui/data_grid'; /** * The DataGrid is a UI component that represents data from a local or remote source in the form of a grid. This UI component offers such basic features as sorting, grouping, filtering, as well as more advanced capabilities, like state storing, client-side exporting, master-detail interface, and many others. */ export declare class DxDataGridComponent<TRowData = any, TKey = any> extends DxComponent implements OnDestroy, OnChanges, DoCheck { private _watcherHelper; private _idh; set _validationRulesContentChildren(value: QueryList<CollectionNestedOption>); set _buttonsContentChildren(value: QueryList<CollectionNestedOption>); set _changesContentChildren(value: QueryList<CollectionNestedOption>); set _columnsContentChildren(value: QueryList<CollectionNestedOption>); set _customOperationsContentChildren(value: QueryList<CollectionNestedOption>); set _fieldsContentChildren(value: QueryList<CollectionNestedOption>); set _groupItemsContentChildren(value: QueryList<CollectionNestedOption>); set _itemsContentChildren(value: QueryList<CollectionNestedOption>); set _sortByGroupSummaryInfoContentChildren(value: QueryList<CollectionNestedOption>); set _toolbarItemsContentChildren(value: QueryList<CollectionNestedOption>); set _totalItemsContentChildren(value: QueryList<CollectionNestedOption>); set _tabsContentChildren(value: QueryList<CollectionNestedOption>); instance: DxDataGrid<TRowData, TKey>; /** * Specifies the shortcut key that sets focus on the UI component. */ get accessKey(): string | undefined; set accessKey(value: string | undefined); /** * Specifies whether the UI component changes its visual state as a result of user interaction. */ get activeStateEnabled(): boolean; set activeStateEnabled(value: boolean); /** * Binds the widget to an AI service. */ get aiIntegration(): AIIntegration | undefined; set aiIntegration(value: AIIntegration | undefined); /** * Specifies whether a user can reorder columns. */ get allowColumnReordering(): boolean; set allowColumnReordering(value: boolean); /** * Specifies whether a user can resize columns. */ get allowColumnResizing(): boolean; set allowColumnResizing(value: boolean); /** * Automatically scrolls the component to the focused row when the focusedRowKey is changed. */ get autoNavigateToFocusedRow(): boolean; set autoNavigateToFocusedRow(value: boolean); /** * Specifies whether data should be cached. */ get cacheEnabled(): boolean; set cacheEnabled(value: boolean); /** * Enables a hint that appears when a user hovers the mouse pointer over a cell with truncated content. */ get cellHintEnabled(): boolean; set cellHintEnabled(value: boolean); /** * Specifies if the component adjusts column widths to fit content. */ get columnAutoWidth(): boolean; set columnAutoWidth(value: boolean); /** * Configures the column chooser. */ get columnChooser(): ColumnChooser; set columnChooser(value: ColumnChooser); /** * Configures column fixing. */ get columnFixing(): { enabled?: boolean; icons?: { fix?: string; leftPosition?: string; rightPosition?: string; stickyPosition?: string; unfix?: string; }; texts?: { fix?: string; leftPosition?: string; rightPosition?: string; stickyPosition?: string; unfix?: string; }; }; set columnFixing(value: { enabled?: boolean; icons?: { fix?: string; leftPosition?: string; rightPosition?: string; stickyPosition?: string; unfix?: string; }; texts?: { fix?: string; leftPosition?: string; rightPosition?: string; stickyPosition?: string; unfix?: string; }; }); /** * Specifies whether the UI component hides columns to adapt to the screen or container size. Ignored if allowColumnResizing is `true` and columnResizingMode is 'widget'. */ get columnHidingEnabled(): boolean; set columnHidingEnabled(value: boolean); /** * Specifies the minimum width of columns. */ get columnMinWidth(): number | undefined; set columnMinWidth(value: number | undefined); /** * Specifies how the UI component resizes columns. Applies only if allowColumnResizing is true. */ get columnResizingMode(): ColumnResizeMode; set columnResizingMode(value: ColumnResizeMode); /** * An array of grid columns. */ get columns(): Array<dxDataGridColumn | string>; set columns(value: Array<dxDataGridColumn | string>); /** * Specifies the width for all data columns. Has a lower priority than the column.width property. */ get columnWidth(): Mode | number | undefined; set columnWidth(value: Mode | number | undefined); /** * Customizes columns after they are created. */ get customizeColumns(): ((columns: Array<dxDataGridColumn>) => void); set customizeColumns(value: ((columns: Array<dxDataGridColumn>) => void)); /** * Specifies a custom template for data rows. */ get dataRowTemplate(): any; set dataRowTemplate(value: any); /** * Binds the UI component to data. */ get dataSource(): Array<any> | DataSource | DataSourceOptions | null | Store | string; set dataSource(value: Array<any> | DataSource | DataSourceOptions | null | Store | string); /** * Specifies the format in which date-time values should be sent to the server. */ get dateSerializationFormat(): string; set dateSerializationFormat(value: string); /** * Specifies whether the UI component responds to user interaction. */ get disabled(): boolean; set disabled(value: boolean); /** * Configures editing. */ get editing(): { allowAdding?: boolean; allowDeleting?: boolean | ((options: { component: dxDataGrid; row: dxDataGridRowObject; }) => boolean); allowUpdating?: boolean | ((options: { component: dxDataGrid; row: dxDataGridRowObject; }) => boolean); changes?: Array<DataChange>; confirmDelete?: boolean; editColumnName?: string; editRowKey?: any; form?: dxFormOptions; mode?: GridsEditMode; newRowPosition?: NewRowPosition; popup?: dxPopupOptions<any>; refreshMode?: GridsEditRefreshMode; selectTextOnEditStart?: boolean; startEditAction?: StartEditAction; texts?: any | { addRow?: string; cancelAllChanges?: string; cancelRowChanges?: string; confirmDeleteMessage?: string; confirmDeleteTitle?: string; deleteRow?: string; editRow?: string; saveAllChanges?: string; saveRowChanges?: string; undeleteRow?: string; validationCancelChanges?: string; }; useIcons?: boolean; }; set editing(value: { allowAdding?: boolean; allowDeleting?: boolean | ((options: { component: dxDataGrid; row: dxDataGridRowObject; }) => boolean); allowUpdating?: boolean | ((options: { component: dxDataGrid; row: dxDataGridRowObject; }) => boolean); changes?: Array<DataChange>; confirmDelete?: boolean; editColumnName?: string; editRowKey?: any; form?: dxFormOptions; mode?: GridsEditMode; newRowPosition?: NewRowPosition; popup?: dxPopupOptions<any>; refreshMode?: GridsEditRefreshMode; selectTextOnEditStart?: boolean; startEditAction?: StartEditAction; texts?: any | { addRow?: string; cancelAllChanges?: string; cancelRowChanges?: string; confirmDeleteMessage?: string; confirmDeleteTitle?: string; deleteRow?: string; editRow?: string; saveAllChanges?: string; saveRowChanges?: string; undeleteRow?: string; validationCancelChanges?: string; }; useIcons?: boolean; }); /** * Specifies the global attributes to be attached to the UI component's container element. */ get elementAttr(): Record<string, any>; set elementAttr(value: Record<string, any>); /** * Indicates whether to show the error row. */ get errorRowEnabled(): boolean; set errorRowEnabled(value: boolean); /** * Configures client-side exporting. */ get export(): { allowExportSelectedData?: boolean; enabled?: boolean; formats?: Array<DataGridExportFormat | string>; texts?: { exportAll?: string; exportSelectedRows?: string; exportTo?: string; }; }; set export(value: { allowExportSelectedData?: boolean; enabled?: boolean; formats?: Array<DataGridExportFormat | string>; texts?: { exportAll?: string; exportSelectedRows?: string; exportTo?: string; }; }); /** * Configures the integrated filter builder. */ get filterBuilder(): dxFilterBuilderOptions; set filterBuilder(value: dxFilterBuilderOptions); /** * Configures the popup in which the integrated filter builder is shown. */ get filterBuilderPopup(): dxPopupOptions<any>; set filterBuilderPopup(value: dxPopupOptions<any>); /** * Configures the filter panel. */ get filterPanel(): FilterPanel; set filterPanel(value: FilterPanel); /** * Configures the filter row. */ get filterRow(): { applyFilter?: ApplyFilterMode; applyFilterText?: string; betweenEndText?: string; betweenStartText?: string; operationDescriptions?: { between?: string; contains?: string; endsWith?: string; equal?: string; greaterThan?: string; greaterThanOrEqual?: string; lessThan?: string; lessThanOrEqual?: string; notContains?: string; notEqual?: string; startsWith?: string; }; resetOperationText?: string; showAllText?: string; showOperationChooser?: boolean; visible?: boolean; }; set filterRow(value: { applyFilter?: ApplyFilterMode; applyFilterText?: string; betweenEndText?: string; betweenStartText?: string; operationDescriptions?: { between?: string; contains?: string; endsWith?: string; equal?: string; greaterThan?: string; greaterThanOrEqual?: string; lessThan?: string; lessThanOrEqual?: string; notContains?: string; notEqual?: string; startsWith?: string; }; resetOperationText?: string; showAllText?: string; showOperationChooser?: boolean; visible?: boolean; }); /** * Specifies whether to synchronize the filter row, header filter, and filter builder. The synchronized filter expression is stored in the filterValue property. */ get filterSyncEnabled(): boolean | Mode; set filterSyncEnabled(value: boolean | Mode); /** * Specifies a filter expression. */ get filterValue(): Array<any> | Function | string; set filterValue(value: Array<any> | Function | string); /** * The index of the column that contains the focused data cell. This index is taken from the columns array. */ get focusedColumnIndex(): number; set focusedColumnIndex(value: number); /** * Specifies whether the focused row feature is enabled. */ get focusedRowEnabled(): boolean; set focusedRowEnabled(value: boolean); /** * Specifies or indicates the focused data row's index. */ get focusedRowIndex(): number; set focusedRowIndex(value: number); /** * Specifies initially or currently focused grid row's key. */ get focusedRowKey(): any | undefined; set focusedRowKey(value: any | undefined); /** * Configures grouping. */ get grouping(): { allowCollapsing?: boolean; autoExpandAll?: boolean; contextMenuEnabled?: boolean; expandMode?: GroupExpandMode; texts?: { groupByThisColumn?: string; groupContinuedMessage?: string; groupContinuesMessage?: string; ungroup?: string; ungroupAll?: string; }; }; set grouping(value: { allowCollapsing?: boolean; autoExpandAll?: boolean; contextMenuEnabled?: boolean; expandMode?: GroupExpandMode; texts?: { groupByThisColumn?: string; groupContinuedMessage?: string; groupContinuesMessage?: string; ungroup?: string; ungroupAll?: string; }; }); /** * Configures the group panel. */ get groupPanel(): { allowColumnDragging?: boolean; emptyPanelText?: string; visible?: boolean | Mode; }; set groupPanel(value: { allowColumnDragging?: boolean; emptyPanelText?: string; visible?: boolean | Mode; }); /** * Configures the header filter feature. */ get headerFilter(): HeaderFilter; set headerFilter(value: HeaderFilter); /** * Specifies the UI component's height. */ get height(): number | string | undefined; set height(value: number | string | undefined); /** * Specifies whether to highlight rows and cells with edited data. repaintChangesOnly should be true. */ get highlightChanges(): boolean; set highlightChanges(value: boolean); /** * Specifies text for a hint that appears when a user pauses on the UI component. */ get hint(): string | undefined; set hint(value: string | undefined); /** * Specifies whether the UI component changes its state when a user pauses on it. */ get hoverStateEnabled(): boolean; set hoverStateEnabled(value: boolean); /** * Configures keyboard navigation. */ get keyboardNavigation(): { editOnKeyPress?: boolean; enabled?: boolean; enterKeyAction?: EnterKeyAction; enterKeyDirection?: EnterKeyDirection; }; set keyboardNavigation(value: { editOnKeyPress?: boolean; enabled?: boolean; enterKeyAction?: EnterKeyAction; enterKeyDirection?: EnterKeyDirection; }); /** * Specifies the key property (or properties) that provide(s) key values to access data items. Each key value must be unique. This property applies only if data is a simple array. */ get keyExpr(): Array<string> | string | undefined; set keyExpr(value: Array<string> | string | undefined); /** * Configures the load panel. */ get loadPanel(): { enabled?: boolean | Mode; height?: number | string; indicatorOptions?: LoadPanelIndicatorProperties; indicatorSrc?: string; shading?: boolean; shadingColor?: string; showIndicator?: boolean; showPane?: boolean; text?: string; width?: number | string; }; set loadPanel(value: { enabled?: boolean | Mode; height?: number | string; indicatorOptions?: LoadPanelIndicatorProperties; indicatorSrc?: string; shading?: boolean; shadingColor?: string; showIndicator?: boolean; showPane?: boolean; text?: string; width?: number | string; }); /** * Allows you to build a master-detail interface in the grid. */ get masterDetail(): { autoExpandAll?: boolean; enabled?: boolean; template?: any; }; set masterDetail(value: { autoExpandAll?: boolean; enabled?: boolean; template?: any; }); /** * Specifies a text string shown when the widget does not display any data. */ get noDataText(): string; set noDataText(value: string); /** * Configures the pager. */ get pager(): Pager; set pager(value: Pager); /** * Configures paging. */ get paging(): { enabled?: boolean; pageIndex?: number; pageSize?: number; }; set paging(value: { enabled?: boolean; pageIndex?: number; pageSize?: number; }); /** * Specifies DataGrid operations to be executed on the server side. */ get remoteOperations(): boolean | Mode | { filtering?: boolean; grouping?: boolean; groupPaging?: boolean; paging?: boolean; sorting?: boolean; summary?: boolean; }; set remoteOperations(value: boolean | Mode | { filtering?: boolean; grouping?: boolean; groupPaging?: boolean; paging?: boolean; sorting?: boolean; summary?: boolean; }); /** * Specifies whether to render the filter row, command columns, and columns with showEditorAlways set to true after other elements. */ get renderAsync(): boolean; set renderAsync(value: boolean); /** * Specifies whether to repaint only those cells whose data changed. */ get repaintChangesOnly(): boolean; set repaintChangesOnly(value: boolean); /** * Specifies whether rows should be shaded differently. */ get rowAlternationEnabled(): boolean; set rowAlternationEnabled(value: boolean); /** * Configures row reordering using drag and drop gestures. */ get rowDragging(): { allowDropInsideItem?: boolean; allowReordering?: boolean; autoScroll?: boolean; boundary?: any | string | undefined; container?: any | string | undefined; cursorOffset?: string | { x?: number; y?: number; }; data?: any | undefined; dragDirection?: DragDirection; dragTemplate?: any; dropFeedbackMode?: DragHighlight; filter?: string; group?: string | undefined; handle?: string; onAdd?: ((e: { component: GridBase; dropInsideItem: boolean; event: event; fromComponent: dxSortable | dxDraggable; fromData: any; fromIndex: number; itemData: any; itemElement: any; toComponent: dxSortable | dxDraggable; toData: any; toIndex: number; }) => void); onDragChange?: ((e: { cancel: boolean; component: GridBase; dropInsideItem: boolean; event: event; fromComponent: dxSortable | dxDraggable; fromData: any; fromIndex: number; itemData: any; itemElement: any; toComponent: dxSortable | dxDraggable; toData: any; toIndex: number; }) => void); onDragEnd?: ((e: { cancel: boolean; component: GridBase; dropInsideItem: boolean; event: event; fromComponent: dxSortable | dxDraggable; fromData: any; fromIndex: number; itemData: any; itemElement: any; toComponent: dxSortable | dxDraggable; toData: any; toIndex: number; }) => void); onDragMove?: ((e: { cancel: boolean; component: GridBase; dropInsideItem: boolean; event: event; fromComponent: dxSortable | dxDraggable; fromData: any; fromIndex: number; itemData: any; itemElement: any; toComponent: dxSortable | dxDraggable; toData: any; toIndex: number; }) => void); onDragStart?: ((e: { cancel: boolean; component: GridBase; event: event; fromData: any; fromIndex: number; itemData: any; itemElement: any; }) => void); onRemove?: ((e: { component: GridBase; event: event; fromComponent: dxSortable | dxDraggable; fromData: any; fromIndex: number; itemData: any; itemElement: any; toComponent: dxSortable | dxDraggable; toData: any; toIndex: number; }) => void); onReorder?: ((e: { component: GridBase; dropInsideItem: boolean; event: event; fromComponent: dxSortable | dxDraggable; fromData: any; fromIndex: number; itemData: any; itemElement: any; promise: any; toComponent: dxSortable | dxDraggable; toData: any; toIndex: number; }) => void); scrollSensitivity?: number; scrollSpeed?: number; showDragIcons?: boolean; }; set rowDragging(value: { allowDropInsideItem?: boolean; allowReordering?: boolean; autoScroll?: boolean; boundary?: any | string | undefined; container?: any | string | undefined; cursorOffset?: string | { x?: number; y?: number; }; data?: any | undefined; dragDirection?: DragDirection; dragTemplate?: any; dropFeedbackMode?: DragHighlight; filter?: string; group?: string | undefined; handle?: string; onAdd?: ((e: { component: GridBase; dropInsideItem: boolean; event: event; fromComponent: dxSortable | dxDraggable; fromData: any; fromIndex: number; itemData: any; itemElement: any; toComponent: dxSortable | dxDraggable; toData: any; toIndex: number; }) => void); onDragChange?: ((e: { cancel: boolean; component: GridBase; dropInsideItem: boolean; event: event; fromComponent: dxSortable | dxDraggable; fromData: any; fromIndex: number; itemData: any; itemElement: any; toComponent: dxSortable | dxDraggable; toData: any; toIndex: number; }) => void); onDragEnd?: ((e: { cancel: boolean; component: GridBase; dropInsideItem: boolean; event: event; fromComponent: dxSortable | dxDraggable; fromData: any; fromIndex: number; itemData: any; itemElement: any; toComponent: dxSortable | dxDraggable; toData: any; toIndex: number; }) => void); onDragMove?: ((e: { cancel: boolean; component: GridBase; dropInsideItem: boolean; event: event; fromComponent: dxSortable | dxDraggable; fromData: any; fromIndex: number; itemData: any; itemElement: any; toComponent: dxSortable | dxDraggable; toData: any; toIndex: number; }) => void); onDragStart?: ((e: { cancel: boolean; component: GridBase; event: event; fromData: any; fromIndex: number; itemData: any; itemElement: any; }) => void); onRemove?: ((e: { component: GridBase; event: event; fromComponent: dxSortable | dxDraggable; fromData: any; fromIndex: number; itemData: any; itemElement: any; toComponent: dxSortable | dxDraggable; toData: any; toIndex: number; }) => void); onReorder?: ((e: { component: GridBase; dropInsideItem: boolean; event: event; fromComponent: dxSortable | dxDraggable; fromData: any; fromIndex: number; itemData: any; itemElement: any; promise: any; toComponent: dxSortable | dxDraggable; toData: any; toIndex: number; }) => void); scrollSensitivity?: number; scrollSpeed?: number; showDragIcons?: boolean; }); /** * Specifies a custom template for rows. * @deprecated Use the dataRowTemplate option instead. */ get rowTemplate(): any; set rowTemplate(value: any); /** * Switches the UI component to a right-to-left representation. */ get rtlEnabled(): boolean; set rtlEnabled(value: boolean); /** * Configures scrolling. */ get scrolling(): { columnRenderingMode?: DataRenderMode; mode?: DataGridScrollMode; preloadEnabled?: boolean; renderAsync?: boolean | undefined; rowRenderingMode?: DataRenderMode; scrollByContent?: boolean; scrollByThumb?: boolean; showScrollbar?: ScrollbarMode; useNative?: boolean | Mode; }; set scrolling(value: { columnRenderingMode?: DataRenderMode; mode?: DataGridScrollMode; preloadEnabled?: boolean; renderAsync?: boolean | undefined; rowRenderingMode?: DataRenderMode; scrollByContent?: boolean; scrollByThumb?: boolean; showScrollbar?: ScrollbarMode; useNative?: boolean | Mode; }); /** * Configures the search panel. */ get searchPanel(): SearchPanel; set searchPanel(value: SearchPanel); /** * Allows you to select rows or determine which rows are selected. */ get selectedRowKeys(): Array<any>; set selectedRowKeys(value: Array<any>); /** * Configures runtime selection. */ get selection(): { allowSelectAll?: boolean; deferred?: boolean; mode?: SingleMultipleOrNone; selectAllMode?: SelectAllMode; sensitivity?: SelectionSensitivity; showCheckBoxesMode?: SelectionColumnDisplayMode; }; set selection(value: { allowSelectAll?: boolean; deferred?: boolean; mode?: SingleMultipleOrNone; selectAllMode?: SelectAllMode; sensitivity?: SelectionSensitivity; showCheckBoxesMode?: SelectionColumnDisplayMode; }); /** * Specifies filters for the rows that must be selected initially. Applies only if selection.deferred is true. */ get selectionFilter(): Array<any> | Function | string; set selectionFilter(value: Array<any> | Function | string); /** * Specifies whether the outer borders of the UI component are visible. */ get showBorders(): boolean; set showBorders(value: boolean); /** * Specifies whether column headers are visible. */ get showColumnHeaders(): boolean; set showColumnHeaders(value: boolean); /** * Specifies whether vertical lines that separate one column from another are visible. */ get showColumnLines(): boolean; set showColumnLines(value: boolean); /** * Specifies whether horizontal lines that separate one row from another are visible. */ get showRowLines(): boolean; set showRowLines(value: boolean); /** * Allows you to sort groups according to the values of group summary items. */ get sortByGroupSummaryInfo(): { groupColumn?: string | undefined; sortOrder?: SortOrder | undefined; summaryItem?: number | string | undefined; }[]; set sortByGroupSummaryInfo(value: { groupColumn?: string | undefined; sortOrder?: SortOrder | undefined; summaryItem?: number | string | undefined; }[]); /** * Configures runtime sorting. */ get sorting(): Sorting; set sorting(value: Sorting); /** * Configures state storing. */ get stateStoring(): { customLoad?: Function; customSave?: ((gridState: any) => void); enabled?: boolean; savingTimeout?: number; storageKey?: string; type?: StateStoreType; }; set stateStoring(value: { customLoad?: Function; customSave?: ((gridState: any) => void); enabled?: boolean; savingTimeout?: number; storageKey?: string; type?: StateStoreType; }); /** * Specifies the properties of the grid summary. */ get summary(): { calculateCustomSummary?: ((options: { component: dxDataGrid; groupIndex: number; name: string; summaryProcess: string; totalValue: any; value: any; }) => void); groupItems?: { alignByColumn?: boolean; column?: string | undefined; customizeText?: ((itemInfo: { value: string | number | Date; valueText: string; }) => string); displayFormat?: string | undefined; name?: string | undefined; showInColumn?: string | undefined; showInGroupFooter?: boolean; skipEmptyValues?: boolean; summaryType?: string | SummaryType | undefined; valueFormat?: Format | undefined; }[]; recalculateWhileEditing?: boolean; skipEmptyValues?: boolean; texts?: { avg?: string; avgOtherColumn?: string; count?: string; max?: string; maxOtherColumn?: string; min?: string; minOtherColumn?: string; sum?: string; sumOtherColumn?: string; }; totalItems?: { alignment?: HorizontalAlignment | undefined; column?: string | undefined; cssClass?: string | undefined; customizeText?: ((itemInfo: { value: string | number | Date; valueText: string; }) => string); displayFormat?: string | undefined; name?: string | undefined; showInColumn?: string | undefined; skipEmptyValues?: boolean; summaryType?: string | SummaryType | undefined; valueFormat?: Format | undefined; }[]; }; set summary(value: { calculateCustomSummary?: ((options: { component: dxDataGrid; groupIndex: number; name: string; summaryProcess: string; totalValue: any; value: any; }) => void); groupItems?: { alignByColumn?: boolean; column?: string | undefined; customizeText?: ((itemInfo: { value: string | number | Date; valueText: string; }) => string); displayFormat?: string | undefined; name?: string | undefined; showInColumn?: string | undefined; showInGroupFooter?: boolean; skipEmptyValues?: boolean; summaryType?: string | SummaryType | undefined; valueFormat?: Format | undefined; }[]; recalculateWhileEditing?: boolean; skipEmptyValues?: boolean; texts?: { avg?: string; avgOtherColumn?: string; count?: string; max?: string; maxOtherColumn?: string; min?: string; minOtherColumn?: string; sum?: string; sumOtherColumn?: string; }; totalItems?: { alignment?: HorizontalAlignment | undefined; column?: string | undefined; cssClass?: string | undefined; customizeText?: ((itemInfo: { value: string | number | Date; valueText: string; }) => string); displayFormat?: string | undefined; name?: string | undefined; showInColumn?: string | undefined; skipEmptyValues?: boolean; summaryType?: string | SummaryType | undefined; valueFormat?: Format | undefined; }[]; }); /** * Specifies whether to show only relevant values in the header filter and filter row. */ get syncLookupFilterValues(): boolean; set syncLookupFilterValues(value: boolean); /** * Specifies the number of the element when the Tab key is used for navigating. */ get tabIndex(): number; set tabIndex(value: number); /** * Configures the toolbar. */ get toolbar(): dxDataGridToolbar | undefined; set toolbar(value: dxDataGridToolbar | undefined); /** * Specifies whether to enable two-way data binding. */ get twoWayBindingEnabled(): boolean; set twoWayBindingEnabled(value: boolean); /** * Specifies whether the UI component is visible. */ get visible(): boolean; set visible(value: boolean); /** * Specifies the UI component's width. */ get width(): number | string | undefined; set width(value: number | string | undefined); /** * Specifies whether text that does not fit into a column should be wrapped. */ get wordWrapEnabled(): boolean; set wordWrapEnabled(value: boolean); /** * A function that is executed before an adaptive detail row is rendered. */ onAdaptiveDetailRowPreparing: EventEmitter<AdaptiveDetailRowPreparingEvent>; /** * A function that is executed before an AI column request is created. */ onAIColumnRequestCreating: EventEmitter<AIColumnRequestCreatingEvent>; /** * A function that is executed when a cell is clicked or tapped. Executed before onRowClick. */ onCellClick: EventEmitter<CellClickEvent>; /** * A function that is executed when a cell is double-clicked or double-tapped. Executed before onRowDblClick. */ onCellDblClick: EventEmitter<CellDblClickEvent>; /** * A function that is executed after the pointer enters or leaves a cell. */ onCellHoverChanged: EventEmitter<CellHoverChangedEvent>; /** * A function that is executed after a grid cell is created. */ onCellPrepared: EventEmitter<CellPreparedEvent>; /** * A function that is executed when the UI component is rendered and each time the component is repainted. */ onContentReady: EventEmitter<ContentReadyEvent>; /** * A function that is executed before the context menu is rendered. */ onContextMenuPreparing: EventEmitter<ContextMenuPreparingEvent>; /** * A function that is executed when an error occurs in the data source. */ onDataErrorOccurred: EventEmitter<DataErrorOccurredEvent>; /** * A function that is executed before the UI component is disposed of. */ onDisposing: EventEmitter<DisposingEvent>; /** * A function that is executed after row changes are discarded. */ onEditCanceled: EventEmitter<EditCanceledEvent>; /** * A function that is executed when the edit operation is canceled, but row changes are not yet discarded. */ onEditCanceling: EventEmitter<EditCancelingEvent>; /** * A function that is executed before a cell or row switches to the editing state. */ onEditingStart: EventEmitter<EditingStartEvent>; /** * A function that is executed after an editor is created. Not executed for cells with an editCellTemplate. */ onEditorPrepared: EventEmitter<EditorPreparedEvent>; /** * A function used to customize cell editors. Not executed for cells with an editCellTemplate. */ onEditorPreparing: EventEmitter<EditorPreparingEvent>; /** * A function that is executed before data is exported. */ onExporting: EventEmitter<ExportingEvent>; /** * A function that is executed after the focused cell changes. Applies only to cells in data or group rows. */ onFocusedCellChanged: EventEmitter<FocusedCellChangedEvent>; /** * A function that is executed before the focused cell changes. Applies only to cells in data or group rows. */ onFocusedCellChanging: EventEmitter<FocusedCellChangingEvent>; /** * A function that is executed after the focused row changes. Applies only to data or group rows. focusedRowEnabled should be true. */ onFocusedRowChanged: EventEmitter<FocusedRowChangedEvent>; /** * A function that is executed before the focused row changes. Applies only to data or group rows. focusedRowEnabled should be true. */ onFocusedRowChanging: EventEmitter<FocusedRowChangingEvent>; /** * A function used in JavaScript frameworks to save the UI component instance. */ onInitialized: EventEmitter<InitializedEvent>; /** * A function that is executed before a new row is added to the UI component. */ onInitNewRow: EventEmitter<InitNewRowEvent>; /** * A function that is executed when the UI component is in focus and a key has been pressed down. */ onKeyDown: EventEmitter<KeyDownEvent>; /** * A function that is executed after a UI component property is changed. */ onOptionChanged: EventEmitter<OptionChangedEvent>; /** * A function that is executed when a row is clicked or tapped. */ onRowClick: EventEmitter<RowClickEvent>; /** * A function that is executed after a row is collapsed. */ onRowCollapsed: EventEmitter<RowCollapsedEvent>; /** * A function that is executed before a row is collapsed. */ onRowCollapsing: EventEmitter<RowCollapsingEvent>; /** * A function that is executed when a row is double-clicked or double-tapped. Executed after onCellDblClick. */ onRowDblClick: EventEmitter<RowDblClickEvent>; /** * A function that is executed after a row is expanded. */ onRowExpanded: EventEmitter<RowExpandedEvent>; /** * A function that is executed before a row is expanded. */ onRowExpanding: EventEmitter<RowExpandingEvent>; /** * A function that is executed after a new row has been inserted into the data source. */ onRowInserted: EventEmitter<RowInsertedEvent>; /** * A function that is executed before a new row is inserted into the data source. */ onRowInserting: EventEmitter<RowInsertingEvent>; /** * A function that is executed after a row is created. */ onRowPrepared: EventEmitter<RowPreparedEvent>; /** * A function that is executed after a row has been removed from the data source. */ onRowRemoved: EventEmitter<RowRemovedEvent>; /** * A function that is executed before a row is removed from the data source. */ onRowRemoving: EventEmitter<RowRemovingEvent>; /** * A function that is executed after a row has been updated in the data source. */ onRowUpdated: EventEmitter<RowUpdatedEvent>; /** * A function that is executed before a row is updated in the data source. */ onRowUpdating: EventEmitter<RowUpdatingEvent>; /** * A function that is executed after cells in a row are validated against validation rules. */ onRowValidating: EventEmitter<RowValidatingEvent>; /** * A function that is executed after row changes are saved. */ onSaved: EventEmitter<SavedEvent>; /** * A function that is executed before pending row changes are saved. */ onSaving: EventEmitter<SavingEvent>; /** * A function that is executed after selecting a row or clearing its selection. */ onSelectionChanged: EventEmitter<SelectionChangedEvent>; /** * A function that is executed before the toolbar is created. */ onToolbarPreparing: EventEmitter<ToolbarPreparingEvent>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ accessKeyChange: EventEmitter<string | undefined>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ activeStateEnabledChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ aiIntegrationChange: EventEmitter<AIIntegration | undefined>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ allowColumnReorderingChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ allowColumnResizingChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ autoNavigateToFocusedRowChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ cacheEnabledChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ cellHintEnabledChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ columnAutoWidthChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ columnChooserChange: EventEmitter<ColumnChooser>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ columnFixingChange: EventEmitter<{ enabled?: boolean; icons?: { fix?: string; leftPosition?: string; rightPosition?: string; stickyPosition?: string; unfix?: string; }; texts?: { fix?: string; leftPosition?: string; rightPosition?: string; stickyPosition?: string; unfix?: string; }; }>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ columnHidingEnabledChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ columnMinWidthChange: EventEmitter<number | undefined>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ columnResizingModeChange: EventEmitter<ColumnResizeMode>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ columnsChange: EventEmitter<Array<dxDataGridColumn | string>>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ columnWidthChange: EventEmitter<Mode | number | undefined>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ customizeColumnsChange: EventEmitter<((columns: Array<dxDataGridColumn>) => void)>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ dataRowTemplateChange: EventEmitter<any>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ dataSourceChange: EventEmitter<Array<any> | DataSource | DataSourceOptions | null | Store | string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ dateSerializationFormatChange: EventEmitter<string>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ disabledChange: EventEmitter<boolean>; /** * This member supports the internal infrastructure and is not intended to be used directly from your code. */ editingChange: EventEmitter<{ allowAdding?: boolean; allowDeleting?: boolean | ((options: { component: dxDataGrid; row: dxDataGridRowObject; }) => boolean); allowUpdating?: boolean | ((options: {