devextreme/ui/data_grid.d.ts

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (ui/data_grid.d.ts)
* Version: 22.1.9
* Build date: Tue Apr 18 2023
*
* Copyright (c) 2012 - 2023 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import DataSource, { DataSourceLike, Options as DataSourceOptions } from '../data/data_source';
import {
  UserDefinedElement,
  DxElement,
  UserDefinedElementsArray,
} from '../core/element';

import {
    DxPromise,
} from '../core/utils/deferred';

import {
    template,
} from '../core/templates/template';

import {
    DeepPartial,
    Skip,
} from '../core/index';

import {
    DxEvent,
    Cancelable,
    EventInfo,
    NativeEventInfo,
    InitializedEventInfo,
    ChangedOptionInfo,
} from '../events/index';

import {
    DataGridCell as ExcelCell,
} from '../excel_exporter';

import {
    ExcelFont,
} from '../exporter/excel/excel.doc_comments';

import dxDraggable from './draggable';

import {
    dxFilterBuilderOptions,
    FilterLookupDataSource,
} from './filter_builder';

import {
    dxFormOptions,
    dxFormSimpleItem,
} from './form';

import {
    Properties as PopupProperties,
} from './popup';

import dxScrollable from './scroll_view/ui.scrollable';

import dxSortable from './sortable';

import {
    dxToolbarOptions, dxToolbarItem,
} from './toolbar';

import {
    AsyncRule,
    CompareRule,
    CustomRule,
    EmailRule,
    NumericRule,
    PatternRule,
    RangeRule,
    RequiredRule,
    StringLengthRule,
} from './validation_rules';

import Widget, {
    WidgetOptions,
} from './widget/ui.widget';

import {
  Format,
} from '../localization';

import {
    SearchMode,
    DataType,
    DragDirection,
    DragHighlight,
    HorizontalAlignment,
    HorizontalEdge,
    Mode,
    ScrollbarMode,
    SelectAllMode,
    SingleMultipleOrNone,
    SortOrder,
    ToolbarItemLocation,
} from '../common';

import {
    ApplyFilterMode,
    ColumnChooserMode,
    DataChangeType,
    DataRenderMode,
    EnterKeyAction,
    EnterKeyDirection,
    FilterOperation,
    FilterType,
    GridsEditMode,
    GridsEditRefreshMode,
    GroupExpandMode,
    NewRowPosition,
    PagerDisplayMode,
    PagerPageSize,
    SelectedFilterOperation,
    SelectionColumnDisplayMode,
    StartEditAction,
    StateStoreType,
    SummaryType,
} from '../common/grids';

export {
    ExcelUnderlineType,
} from '../exporter/excel/excel.doc_comments';

export {
    ApplyFilterMode,
    SearchMode,
    ColumnChooserMode,
    DataChangeType,
    DataRenderMode,
    DataType,
    DragDirection,
    DragHighlight,
    EnterKeyAction,
    EnterKeyDirection,
    FilterOperation,
    FilterType,
    GridsEditMode,
    GridsEditRefreshMode,
    GroupExpandMode,
    HorizontalAlignment,
    HorizontalEdge,
    Mode,
    NewRowPosition,
    PagerDisplayMode,
    PagerPageSize,
    ScrollbarMode,
    SelectAllMode,
    SelectedFilterOperation,
    SelectionColumnDisplayMode,
    SortOrder,
    StartEditAction,
    StateStoreType,
    SummaryType,
    ToolbarItemLocation,
};

export type ColumnResizeMode = 'nextColumn' | 'widget';
export type DataGridCommandColumnType = 'adaptive' | 'buttons' | 'detailExpand' | 'groupExpand' | 'selection' | 'drag';
export type DataGridExportFormat = 'pdf' | 'xlsx';
export type DataGridScrollMode = 'infinite' | 'standard' | 'virtual';
export type ExcelCellHorizontalAlignment = 'center' | 'centerContinuous' | 'distributed' | 'fill' | 'general' | 'justify' | 'left' | 'right';
export type ExcelCellPatternType = 'darkDown' | 'darkGray' | 'darkGrid' | 'darkHorizontal' | 'darkTrellis' | 'darkUp' | 'darkVertical' | 'gray0625' | 'gray125' | 'lightDown' | 'lightGray' | 'lightGrid' | 'lightHorizontal' | 'lightTrellis' | 'lightUp' | 'lightVertical' | 'mediumGray' | 'none' | 'solid';
export type ExcelCellVerticalAlignment = 'bottom' | 'center' | 'distributed' | 'justify' | 'top';
export type HeaderFilterGroupInterval = 'day' | 'hour' | 'minute' | 'month' | 'quarter' | 'second' | 'year';
export type DataGridPredefinedColumnButton = 'cancel' | 'delete' | 'edit' | 'save' | 'undelete';
export type DataGridPredefinedToolbarItem = 'addRowButton' | 'applyFilterButton' | 'columnChooserButton' | 'exportButton' | 'groupPanel' | '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 interface AdaptiveDetailRowPreparingInfo {
  readonly formOptions: 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 DataErrorOccurredInfo {
  readonly error?: Error;
}

/**
 * @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 DataChangeInfo<TRowData = any, TKey = any> {
  readonly changes: Array<DataChange<TRowData, TKey>>;
}

/**
 * @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 NewRowInfo<TRowData = any> {
  data: TRowData;
  promise?: PromiseLike<void>;
}

/**
 * @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 KeyDownInfo {
  handled: boolean;
}

type GroupKey = any[];

export type GroupData<TRowData> = {
  key: any;
  items: Array<TRowData> | Array<GroupData<TRowData>> | null;
  /**
   * @deprecated Attention! This property is for internal purposes only.
   */
  collapsedItems?: Array<TRowData> | Array<GroupData<TRowData>>;
  /**
   * @deprecated Attention! This property is for internal purposes only.
   */
  aggregates?: Array<any>;
  /**
   * @deprecated Attention! This property is for internal purposes only.
   */
  summary?: Array<any>;
  /**
   * @deprecated Attention! This property is for internal purposes only.
   */
  isContinuation?: boolean;
  /**
   * @deprecated Attention! This property is for internal purposes only.
   */
  isContinuationOnNextPage?: boolean;
};

/**
 * @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 RowKeyInfo<TKey = any> {
  readonly key: TKey;
}

/**
 * @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 RowInsertedInfo<TRowData = any, TKey = any> {
  readonly data: TRowData;
  readonly key: TKey;
  readonly error: Error;
}

/**
 * @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 RowInsertingInfo<TRowData = any> {
  data: TRowData;
  cancel: boolean | PromiseLike<void>;
}

/**
 * @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 RowRemovedInfo<TRowData = any, TKey = any> {
  readonly data: TRowData;
  readonly key: TKey;
  readonly error: Error;
}

/**
 * @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 RowRemovingInfo<TRowData = any, TKey = any> {
  readonly data: TRowData;
  readonly key: TKey;
  cancel: boolean | PromiseLike<void>;
}

/**
 * @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 RowUpdatedInfo<TRowData = any, TKey = any> {
  readonly data: TRowData;
  readonly key: TKey;
  readonly error: Error;
}

/**
 * @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 RowUpdatingInfo<TRowData = any, TKey = any> {
  readonly oldData: TRowData;
  newData: DeepPartial<TRowData>;
  readonly key: TKey;
  cancel: boolean | PromiseLike<void>;
}

/**
 * @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 RowValidatingInfo<TRowData = any, TKey = any> {
  readonly brokenRules: Array<RequiredRule | NumericRule | RangeRule | StringLengthRule | CustomRule | CompareRule | PatternRule | EmailRule | AsyncRule>;
  isValid: boolean;
  readonly key: TKey;
  readonly newData: DeepPartial<TRowData>;
  readonly oldData: TRowData;
  errorText: string;
  promise?: PromiseLike<void>;
}

/**
 * @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 SavingInfo<TRowData = any, TKey = any> {
  changes: Array<DataChange<TRowData, TKey>>;
  promise?: PromiseLike<void>;
  cancel: boolean;
}

/**
 * @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 SelectionChangedInfo<TRowData = any, TKey = any> {
  readonly currentSelectedRowKeys: Array<TKey>;
  readonly currentDeselectedRowKeys: Array<TKey>;
  readonly selectedRowKeys: Array<TKey>;
  readonly selectedRowsData: Array<TRowData>;
}

/**
 * @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 ToolbarPreparingInfo {
  toolbarOptions: dxToolbarOptions;
}

/**
 * @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 RowDraggingEventInfo<T extends GridBase<TRowData, TKey>, TRowData = any, TKey = any> {
  readonly component: T;
  readonly event: DxEvent<PointerEvent | MouseEvent | TouchEvent>;
  readonly itemData?: TRowData;
  readonly itemElement: DxElement;
  readonly fromIndex: number;
  readonly toIndex: number;
  readonly fromComponent: dxSortable | dxDraggable;
  readonly toComponent: dxSortable | dxDraggable;
  readonly fromData?: any;
  readonly toData?: 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 DragStartEventInfo<T extends GridBase<TRowData, TKey>, TRowData = any, TKey = any> {
  readonly component: T;
  readonly event: DxEvent<PointerEvent | MouseEvent | TouchEvent>;
  itemData?: TRowData;
  readonly itemElement: DxElement;
  readonly fromIndex: number;
  readonly fromData?: 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 DragDropInfo {
  readonly dropInsideItem: boolean;
}

/**
 * @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 DragReorderInfo {
  readonly dropInsideItem: boolean;
  promise?: PromiseLike<void>;
}

/**
 * @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 RowDraggingTemplateDataModel<TRowData = any> {
  readonly itemData: TRowData;
  readonly itemElement: DxElement;
}

/**
 * @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 FilterPanelCustomizeTextArg<T> {
  readonly component: T;
  readonly filterValue: any;
  readonly text: string;
}

/**
 * @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 FilterPanel<T extends GridBase<TRowData, TKey>, TRowData = any, TKey = any> {
  /**
   * Customizes the filter expression&apos;s text representation.
   */
  customizeText?: ((e: FilterPanelCustomizeTextArg<T>) => string);
  /**
   * Specifies whether the filter expression is applied.
   */
  filterEnabled?: boolean;
  /**
   * Specifies texts for the filter panel&apos;s elements.
   */
  texts?: FilterPanelTexts;
  /**
   * Specifies whether the filter panel is visible.
   */
  visible?: boolean;
}

/**
 * @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 RowDragging<T extends GridBase<TRowData, TKey>, TRowData = any, TKey = any> {
    /**
     * Allows users to drop a row inside another row.
     */
    allowDropInsideItem?: boolean;
    /**
     * Allows row reordering using drag and drop gestures.
     */
    allowReordering?: boolean;
    /**
     * Enables automatic scrolling while dragging a row beyond the viewport.
     */
    autoScroll?: boolean;
    /**
     * Specifies a DOM element that limits the dragging area.
     */
    boundary?: string | UserDefinedElement;
    /**
     * Specifies a custom container in which the draggable row should be rendered.
     */
    container?: string | UserDefinedElement;
    /**
     * Specifies the cursor offset from the dragged row.
     */
    cursorOffset?: string | {
      /**
       * Specifies the horizontal cursor offset from the dragged row in pixels.
       */
      x?: number;
      /**
       * Specifies the vertical cursor offset from the dragged row in pixels.
       */
      y?: number;
    };
    /**
     * A container for custom data.
     */
    data?: any;
    /**
     * Specifies the directions in which a row can be dragged.
     */
    dragDirection?: DragDirection;
    /**
     * Specifies custom markup to be shown instead of the item being dragged.
     */
    dragTemplate?: template | ((dragInfo: RowDraggingTemplateData<TRowData>, containerElement: DxElement) => string | UserDefinedElement);
    /**
     * Specifies how to highlight the row&apos;s drop position.
     */
    dropFeedbackMode?: DragHighlight;
    /**
     * Specifies a CSS selector for draggable rows.
     */
    filter?: string;
    /**
     * Allows you to group several UI components so that users can drag and drop rows between them.
     */
    group?: string;
    /**
     * Specifies a CSS selector (ID or class) for the element(s) that should act as the drag handle(s).
     */
    handle?: string;
    /**
     * A function that is called when a new row is added.
     */
    onAdd?: ((e: RowDraggingEventInfo<T, TRowData, TKey> & DragDropInfo) => void);
    /**
     * A function that is called when the dragged row&apos;s position is changed.
     */
    onDragChange?: ((e: Cancelable & RowDraggingEventInfo<T, TRowData, TKey> & DragDropInfo) => void);
    /**
     * A function that is called when the drag gesture is finished.
     */
    onDragEnd?: ((e: Cancelable & RowDraggingEventInfo<T, TRowData, TKey> & DragDropInfo) => void);
    /**
     * A function that is called every time a draggable row is moved.
     */
    onDragMove?: ((e: Cancelable & RowDraggingEventInfo<T, TRowData, TKey> & DragDropInfo) => void);
    /**
     * A function that is called when the drag gesture is initialized.
     */
    onDragStart?: ((e: Cancelable & DragStartEventInfo<T, TRowData, TKey>) => void);
    /**
     * A function that is called when a draggable row is removed.
     */
    onRemove?: ((e: RowDraggingEventInfo<T, TRowData, TKey>) => void);
    /**
     * A function that is called when the draggable rows are reordered.
     */
    onReorder?: ((e: RowDraggingEventInfo<dxDataGrid<TRowData, TKey>, TRowData, TKey> & DragReorderInfo) => void);
    /**
     * Specifies the distance in pixels from the edge of viewport at which scrolling should start. Applies only if autoScroll is true.
     */
    scrollSensitivity?: number;
    /**
     * Specifies the scrolling speed when dragging a row beyond the viewport. Applies only if autoScroll is true.
     */
    scrollSpeed?: number;
    /**
     * Shows or hides row dragging icons.
     */
    showDragIcons?: boolean;
}

/**
 * @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 GridBaseOptions<TComponent extends GridBase<TRowData, TKey>, TRowData = any, TKey = any> extends WidgetOptions<TComponent> {
    /**
     * Specifies whether a user can reorder columns.
     */
    allowColumnReordering?: boolean;
    /**
     * Specifies whether a user can resize columns.
     */
    allowColumnResizing?: boolean;
    /**
     * Automatically scrolls to the focused row when the focusedRowKey is changed.
     */
    autoNavigateToFocusedRow?: boolean;
    /**
     * Specifies whether data should be cached.
     */
    cacheEnabled?: boolean;
    /**
     * Enables a hint that appears when a user hovers the mouse pointer over a cell with truncated content.
     */
    cellHintEnabled?: boolean;
    /**
     * Specifies whether columns should adjust their widths to the content.
     */
    columnAutoWidth?: boolean;
    /**
     * Configures the column chooser.
     */
    columnChooser?: ColumnChooser;
    /**
     * Configures column fixing.
     */
    columnFixing?: ColumnFixing;
    /**
     * Specifies whether the UI component should hide columns to adapt to the screen or container size. Ignored if allowColumnResizing is true and columnResizingMode is &apos;widget&apos;.
     */
    columnHidingEnabled?: boolean;
    /**
     * Specifies the minimum width of columns.
     */
    columnMinWidth?: number;
    /**
     * Specifies how the UI component resizes columns. Applies only if allowColumnResizing is true.
     */
    columnResizingMode?: ColumnResizeMode;
    /**
     * Specifies the width for all data columns. Has a lower priority than the column.width property.
     */
    columnWidth?: number | Mode;
    /**
     * Overridden.
     */
    columns?: Array<ColumnBase<TRowData> | string>;
    /**
     * Binds the UI component to data.
     */
    dataSource?: DataSourceLike<TRowData, TKey> | null;
    /**
     * Specifies the format in which date-time values should be sent to the server.
     */
    dateSerializationFormat?: string;
    /**
     * Overriden.
     */
    editing?: EditingBase<TRowData, TKey>;
    /**
     * Indicates whether to show the error row.
     */
    errorRowEnabled?: boolean;
    /**
     * Configures the integrated filter builder.
     */
    filterBuilder?: dxFilterBuilderOptions;
    /**
     * Configures the popup in which the integrated filter builder is shown.
     */
    filterBuilderPopup?: PopupProperties;
    /**
     * Configures the filter panel.
     */
    filterPanel?: FilterPanel<TComponent, TRowData, TKey>;
    /**
     * Configures the filter row.
     */
    filterRow?: FilterRow;
    /**
     * Specifies whether to synchronize the filter row, header filter, and filter builder. The synchronized filter expression is stored in the filterValue property.
     */
    filterSyncEnabled?: boolean | Mode;
    /**
     * Specifies a filter expression.
     */
    filterValue?: string | Array<any> | Function;
    /**
     * The index of the column that contains the focused data cell. This index is taken from the columns array.
     */
    focusedColumnIndex?: number;
    /**
     * Specifies whether the focused row feature is enabled.
     */
    focusedRowEnabled?: boolean;
    /**
     * Specifies or indicates the focused data row&apos;s index.
     */
    focusedRowIndex?: number;
    /**
     * Specifies initially or currently focused grid row&apos;s key.
     */
    focusedRowKey?: TKey;
    /**
     * 
     */
    focusStateEnabled?: any;
    /**
     * Configures the header filter feature.
     */
    headerFilter?: HeaderFilter;
    /**
     * Specifies whether to highlight rows and cells with edited data. repaintChangesOnly should be true.
     */
    highlightChanges?: boolean;
    /**
     * Configures keyboard navigation.
     */
    keyboardNavigation?: KeyboardNavigation;
    /**
     * Configures the load panel.
     */
    loadPanel?: LoadPanel;
    /**
     * Specifies a text string shown when the widget does not display any data.
     */
    noDataText?: string;
    /**
     * A function that is executed before an adaptive detail row is rendered.
     */
    onAdaptiveDetailRowPreparing?: ((e: EventInfo<TComponent> & AdaptiveDetailRowPreparingInfo) => void);
    /**
     * A function that is executed when an error occurs in the data source.
     */
    onDataErrorOccurred?: ((e: EventInfo<TComponent> & DataErrorOccurredInfo) => void);
    /**
     * A function that is executed after row changes are discarded.
     */
    onEditCanceled?: ((e: EventInfo<TComponent> & DataChangeInfo<TRowData, TKey>) => void);
    /**
     * A function that is executed when the edit operation is canceled, but row changes are not yet discarded.
     */
    onEditCanceling?: ((e: Cancelable & EventInfo<TComponent> & DataChangeInfo<TRowData, TKey>) => void);
    /**
     * A function that is executed before a new row is added to the UI component.
     */
    onInitNewRow?: ((e: EventInfo<TComponent> & NewRowInfo<TRowData>) => void);
    /**
     * A function that is executed when the UI component is in focus and a key has been pressed down.
     */
    onKeyDown?: ((e: NativeEventInfo<TComponent, KeyboardEvent> & KeyDownInfo) => void);
    /**
     * A function that is executed after a row is collapsed.
     */
    onRowCollapsed?: ((e: EventInfo<TComponent> & RowKeyInfo<TKey>) => void);
    /**
     * A function that is executed before a row is collapsed.
     */
    onRowCollapsing?: ((e: Cancelable & EventInfo<TComponent> & RowKeyInfo<TKey>) => void);
    /**
     * A function that is executed after a row is expanded.
     */
    onRowExpanded?: ((e: EventInfo<TComponent> & RowKeyInfo<TKey>) => void);
    /**
     * A function that is executed before a row is expanded.
     */
    onRowExpanding?: ((e: Cancelable & EventInfo<TComponent> & RowKeyInfo<TKey>) => void);
    /**
     * A function that is executed after a new row has been inserted into the data source.
     */
    onRowInserted?: ((e: EventInfo<TComponent> & RowInsertedInfo<TRowData, TKey>) => void);
    /**
     * A function that is executed before a new row is inserted into the data source.
     */
    onRowInserting?: ((e: EventInfo<TComponent> & RowInsertingInfo<TRowData>) => void);
    /**
     * A function that is executed after a row has been removed from the data source.
     */
    onRowRemoved?: ((e: EventInfo<TComponent> & RowRemovedInfo<TRowData, TKey>) => void);
    /**
     * A function that is executed before a row is removed from the data source.
     */
    onRowRemoving?: ((e: EventInfo<TComponent> & RowRemovingInfo<TRowData, TKey>) => void);
    /**
     * A function that is executed after a row has been updated in the data source.
     */
    onRowUpdated?: ((e: EventInfo<TComponent> & RowUpdatedInfo<TRowData, TKey>) => void);
    /**
     * A function that is executed before a row is updated in the data source.
     */
    onRowUpdating?: ((e: EventInfo<TComponent> & RowUpdatingInfo<TRowData, TKey>) => void);
    /**
     * A function that is executed after cells in a row are validated against validation rules.
     */
    onRowValidating?: ((e: EventInfo<TComponent> & RowValidatingInfo<TRowData, TKey>) => void);
    /**
     * A function that is executed after row changes are saved.
     */
    onSaved?: ((e: EventInfo<TComponent> & DataChangeInfo<TRowData, TKey>) => void);
    /**
     * A function that is executed before pending row changes are saved.
     */
    onSaving?: ((e: EventInfo<TComponent> & SavingInfo<TRowData, TKey>) => void);
    /**
     * A function that is executed after selecting a row or clearing its selection.
     */
    onSelectionChanged?: ((e: EventInfo<TComponent> & SelectionChangedInfo<TRowData, TKey>) => void);
    /**
     * A function that is executed before the toolbar is created.
     */
    onToolbarPreparing?: ((e: EventInfo<TComponent> & ToolbarPreparingInfo) => void);
    /**
     * Configures the pager.
     */
    pager?: Pager;
    /**
     * Configures paging.
     */
    paging?: PagingBase;
    /**
     * Specifies whether to render the filter row, command columns, and columns with showEditorAlways set to true after other elements.
     */
    renderAsync?: boolean;
    /**
     * Specifies whether to repaint only those cells whose data changed.
     */
    repaintChangesOnly?: boolean;
    /**
     * Specifies whether rows should be shaded differently.
     */
    rowAlternationEnabled?: boolean;
    /**
     * Configures row reordering using drag and drop gestures.
     */
    rowDragging?: RowDragging<TComponent, TRowData, TKey>;
    /**
     * 
     */
    scrolling?: ScrollingBase;
    /**
     * Configures the search panel.
     */
    searchPanel?: SearchPanel;
    /**
     * Allows you to select rows or determine which rows are selected.
     */
    selectedRowKeys?: Array<TKey>;
    /**
     * 
     */
    selection?: SelectionBase;
    /**
     * Specifies whether the outer borders of the UI component are visible.
     */
    showBorders?: boolean;
    /**
     * Specifies whether column headers are visible.
     */
    showColumnHeaders?: boolean;
    /**
     * Specifies whether vertical lines that separate one column from another are visible.
     */
    showColumnLines?: boolean;
    /**
     * Specifies whether horizontal lines that separate one row from another are visible.
     */
    showRowLines?: boolean;
    /**
     * Configures runtime sorting.
     */
    sorting?: Sorting;
    /**
     * Configures state storing.
     */
    stateStoring?: StateStoring;
    /**
     * Specifies whether to enable two-way data binding.
     */
    twoWayBindingEnabled?: boolean;
    /**
     * Specifies whether text that does not fit into a column should be wrapped.
     */
    wordWrapEnabled?: boolean;
    /**
     * 
     */
    syncLookupFilterValues?: boolean;
}

export interface ColumnChooser {
    /**
     * Specifies whether searching is enabled in the column chooser.
     */
    allowSearch?: boolean;
    /**
     * Specifies text displayed by the column chooser when it is empty.
     */
    emptyPanelText?: string;
    /**
     * Specifies whether a user can open the column chooser.
     */
    enabled?: boolean;
    /**
     * Specifies the height of the column chooser.
     */
    height?: number;
    /**
     * Specifies how a user manages columns using the column chooser.
     */
    mode?: ColumnChooserMode;
    /**
     * Specifies a delay in milliseconds between when a user finishes typing in the column chooser&apos;s search panel, and when the search is executed.
     */
    searchTimeout?: number;
    /**
     * Specifies the title of the column chooser.
     */
    title?: string;
    /**
     * Specifies the width of the column chooser.
     */
    width?: number;
    /**
     * Specifies the sort order of column headers.
     */
    sortOrder?: SortOrder;
}

export interface ColumnFixing {
    /**
     * Enables column fixing.
     */
    enabled?: boolean;
    /**
     * Contains properties that specify texts for column fixing commands in the context menu of a column header.
     */
    texts?: ColumnFixingTexts;
}

export interface ColumnFixingTexts {
    /**
     * Specifies text for the context menu item that fixes a column.
     */
    fix?: string;
    /**
     * Specifies text for the context menu subitem that fixes a column to the left edge of the UI component.
     */
    leftPosition?: string;
    /**
     * Specifies text for the context menu subitem that fixes a column to the right edge of the UI component.
     */
    rightPosition?: string;
    /**
     * Specifies text for the context menu item that unfixes a column.
     */
    unfix?: string;
}

export interface FilterPanelTexts {
    /**
     * The text of the &apos;Clear&apos; link.
     */
    clearFilter?: string;
    /**
     * The text of the &apos;Create Filter&apos; link.
     */
    createFilter?: string;
    /**
     * The hint of the checkbox that applies the filter.
     */
    filterEnabledHint?: string;
}

export interface FilterRow {
    /**
     * Specifies when to apply a filter.
     */
    applyFilter?: ApplyFilterMode;
    /**
     * Specifies text for a hint that appears when a user pauses on a button that applies the filter.
     */
    applyFilterText?: string;
    /**
     * Specifies a placeholder for the editor that specifies the end of a range when a user selects the &apos;between&apos; filter operation.
     */
    betweenEndText?: string;
    /**
     * Specifies a placeholder for the editor that specifies the start of a range when a user selects the &apos;between&apos; filter operation.
     */
    betweenStartText?: string;
    /**
     * Specifies descriptions for filter operations on the filter list.
     */
    operationDescriptions?: FilterRowOperationDescriptions;
    /**
     * Specifies text for the reset operation on the filter list.
     */
    resetOperationText?: string;
    /**
     * Specifies text for the item that clears the applied filter. Used only when a cell of the filter row contains a select box.
     */
    showAllText?: string;
    /**
     * Specifies whether icons that open the filter lists are visible.
     */
    showOperationChooser?: boolean;
    /**
     * Specifies whether the filter row is visible.
     */
    visible?: boolean;
}

export interface FilterRowOperationDescriptions {
    /**
     * A description for the &apos;between&apos; operation.
     */
    between?: string;
    /**
     * A description for the &apos;contains&apos; operation.
     */
    contains?: string;
    /**
     * A description for the &apos;endswith&apos; operation.
     */
    endsWith?: string;
    /**
     * A description for the &apos;=&apos; operation.
     */
    equal?: string;
    /**
     * A description for the &apos;&gt;&apos; operation.
     */
    greaterThan?: string;
    /**
     * A description for the &apos;&gt;=&apos; operation.
     */
    greaterThanOrEqual?: string;
    /**
     * A description for the &apos;&lt;&apos; operation.
     */
    lessThan?: string;
    /**
     * A description for the &apos;&lt;=&apos; operation.
     */
    lessThanOrEqual?: string;
    /**
     * A description for the &apos;notcontains&apos; operation.
     */
    notContains?: string;
    /**
     * A description for the &apos;&lt;&gt;&apos; operation.
     */
    notEqual?: string;
    /**
     * A description for the &apos;startswith&apos; operation.
     */
    startsWith?: string;
}

export interface HeaderFilter {
    /**
     * Specifies whether searching is enabled in the header filter.
     */
    allowSearch?: boolean;
    /**
     * Specifies the height of the popup menu that contains values for filtering.
     */
    height?: number;
    /**
     * Specifies a delay in milliseconds between when a user finishes typing in the header filter&apos;s search panel, and when the search is executed.
     */
    searchTimeout?: number;
    /**
     * Contains properties that specify text for various elements of the popup menu.
     */
    texts?: HeaderFilterTexts;
    /**
     * Specifies whether header filter icons are visible.
     */
    visible?: boolean;
    /**
     * Specifies the width of the popup menu that contains values for filtering.
     */
    width?: number;
}

export interface HeaderFilterTexts {
    /**
     * Specifies text for the button that closes the popup menu without applying a filter.
     */
    cancel?: string;
    /**
     * Specifies a name for the item that represents empty values in the popup menu.
     */
    emptyValue?: string;
    /**
     * Specifies text for the button that applies the specified filter.
     */
    ok?: string;
}

export interface KeyboardNavigation {
    /**
     * Specifies whether users can enter a new cell value on a key press. Applies if editing.mode is &apos;cell&apos; or &apos;batch&apos;.
     */
    editOnKeyPress?: boolean;
    /**
     * Enables keyboard navigation.
     */
    enabled?: boolean;
    /**
     * Specifies whether the Enter key switches the cell or row to the edit state or moves focus in the enterKeyDirection. Applies for all edit modes, except &apos;popup&apos;.
     */
    enterKeyAction?: EnterKeyAction;
    /**
     * Specifies the direction in which to move focus when a user presses Enter. Applies if editing.mode is &apos;cell&apos; or &apos;batch&apos;.
     */
    enterKeyDirection?: EnterKeyDirection;
}

export interface LoadPanel {
    /**
     * Enables displaying the load panel automatically.
     */
    enabled?: boolean | Mode;
    /**
     * Specifies the height of the load panel in pixels.
     */
    height?: number;
    /**
     * Specifies a URL pointing to an image to be used as a loading indicator.
     */
    indicatorSrc?: string;
    /**
     * Specifies whether to shade the UI component when the load panel is shown.
     */
    shading?: boolean;
    /**
     * Specifies the shading color. Applies only if shading is true.
     */
    shadingColor?: string;
    /**
     * Specifies whether to show the loading indicator.
     */
    showIndicator?: boolean;
    /**
     * Specifies whether to show the pane of the load panel.
     */
    showPane?: boolean;
    /**
     * Specifies text displayed on the load panel.
     */
    text?: string;
    /**
     * Specifies the width of the load panel in pixels.
     */
    width?: number;
}

export interface Pager {
    /**
     * Specifies the available page sizes in the page size selector.
     */
    allowedPageSizes?: Array<(number | PagerPageSize)> | Mode;
    /**
     * Specifies the pager&apos;s display mode.
     */
    displayMode?: PagerDisplayMode;
    /**
     * Specifies the page information text.
     */
    infoText?: string;
    /**
     * Specifies whether to show the page information.
     */
    showInfo?: boolean;
    /**
     * Specifies whether to show navigation buttons.
     */
    showNavigationButtons?: boolean;
    /**
     * Specifies whether to show the page size selector.
     */
    showPageSizeSelector?: boolean;
    /**
     * Specifies whether the pager is visible.
     */
    visible?: boolean | Mode;
    /**
     * 
     */
    label?: string;
}

export interface SearchPanel {
    /**
     * Notifies the UI component whether search is case-sensitive to ensure that search results are highlighted correctly. Applies only if highlightSearchText is true.
     */
    highlightCaseSensitive?: boolean;
    /**
     * Specifies whether found substrings should be highlighted.
     */
    highlightSearchText?: boolean;
    /**
     * Specifies a placeholder for the search panel.
     */
    placeholder?: string;
    /**
     * Specifies whether the UI component should search against all columns or only visible ones.
     */
    searchVisibleColumnsOnly?: boolean;
    /**
     * Sets a search string for the search panel.
     */
    text?: string;
    /**
     * Specifies whether the search panel is visible or not.
     */
    visible?: boolean;
    /**
     * Specifies the width of the search panel in pixels.
     */
    width?: number;
}

export interface Sorting {
    /**
     * Specifies text for the context menu item that sets an ascending sort order in a column.
     */
    ascendingText?: string;
    /**
     * Specifies text for the context menu item that clears sorting settings for a column.
     */
    clearText?: string;
    /**
     * Specifies text for the context menu item that sets a descending sort order in a column.
     */
    descendingText?: string;
    /**
     * Specifies the sorting mode.
     */
    mode?: SingleMultipleOrNone;
    /**
     * Specifies whether to display sort indexes in column headers. Applies only when sorting.mode is &apos;multiple&apos; and data is sorted by two or more columns.
     */
    showSortIndexes?: boolean;
}

export interface StateStoring {
    /**
     * Specifies a function that is executed on state loading. Applies only if the type is &apos;custom&apos;.
     */
    customLoad?: (() => PromiseLike<any>);
    /**
     * Specifies a function that is executed on state saving. Applies only if the type is &apos;custom&apos;.
     */
    customSave?: ((gridState: any) => any);
    /**
     * Enables state storing.
     */
    enabled?: boolean;
    /**
     * Specifies the delay in milliseconds between when a user makes a change and when this change is saved.
     */
    savingTimeout?: number;
    /**
     * Specifies the key for storing the UI component state.
     */
    storageKey?: string;
    /**
     * Specifies the type of storage where the state is saved.
     */
    type?: StateStoreType;
}

/**
 * @deprecated 
 */
export type GridBaseEditing<TRowData = any, TKey = any> = EditingBase<TRowData, TKey>;
/**
 * @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 EditingBase<TRowData = any, TKey = any> {
    /**
     * Specifies if confirmation is required when a user deletes a row.
     */
    confirmDelete?: boolean;
    /**
     * An array of pending row changes.
     */
    changes?: Array<DataChange<TRowData, TKey>>;
    /**
     * The name of a column being edited. Applies only if editing.mode is &apos;cell&apos; or &apos;batch&apos;.
     */
    editColumnName?: string;
    /**
     * The key(s) of a row being edited.
     */
    editRowKey?: TKey;
    /**
     * Configures the form. Used only if editing.mode is &apos;form&apos; or &apos;popup&apos;.
     */
    form?: dxFormOptions;
    /**
     * Specifies how a user edits data.
     */
    mode?: GridsEditMode;
    /**
     * Configures the popup. Used only if editing.mode is &apos;popup&apos;.
     */
    popup?: PopupProperties;
    /**
     * Specifies operations that are performed after saving changes.
     */
    refreshMode?: GridsEditRefreshMode;
    /**
     * Specifies whether to select text in a cell when a user starts editing.
     */
    selectTextOnEditStart?: boolean;
    /**
     * Specifies whether a single or double click should switch a cell to the editing state. Applies if editing.mode is &apos;cell&apos; or &apos;batch&apos;.
     */
    startEditAction?: StartEditAction;
    /**
     * Contains properties that specify texts for editing-related UI elements.
     */
    texts?: EditingTextsBase;
    /**
     * Specifies whether the edit column uses icons instead of links.
     */
    useIcons?: boolean;
}

/**
 * 
 */
export interface DataChange<TRowData = any, TKey = any> {
    /**
     * The key of the row being updated or removed.
     */
    key: TKey;
    /**
     * Data change type.
     */
    type: DataChangeType;
    /**
     * An object with updated row fields.
     */
    data: DeepPartial<TRowData>;
    /**
     * A key that identifies a record after which a new record should be inserted. Applies only if the type is &apos;insert&apos;.
     */
    insertAfterKey?: TKey;
    /**
     * A key that identifies the record before which a new record should be inserted. Applies only if the type is &apos;insert&apos;.
     */
    insertBeforeKey?: TKey;
}

/**
 * @deprecated 
 */
export type GridBaseEditingTexts = EditingTextsBase;
/**
 * @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 EditingTextsBase {
    /**
     * Specifies text for a hint that appears when a user pauses on the global &apos;Add&apos; button. Applies only if editing.allowAdding is true.
     */
    addRow?: string;
    /**
     * Specifies text for a hint that appears when a user pauses on the &apos;Discard&apos; button. Applies only if editing.mode is &apos;batch&apos;.
     */
    cancelAllChanges?: string;
    /**
     * Specifies text for a button that cancels changes in a row. Applies only if editing.allowUpdating is true and editing.mode is &apos;row&apos;.
     */
    cancelRowChanges?: string;
    /**
     * Specifies a message that prompts a user to confirm deletion.
     */
    confirmDeleteMessage?: string;
    /**
     * Specifies a title for the window that asks a user to confirm deletion.
     */
    confirmDeleteTitle?: string;
    /**
     * Specifies text for buttons that delete rows. Applies only if allowDeleting is true.
     */
    deleteRow?: string;
    /**
     * Specifies text for buttons that switch rows into the editing state. Applies only if allowUpdating is true.
     */
    editRow?: string;
    /**
     * Specifies text for a hint that appears when a user pauses on the global &apos;Save&apos; button. Applies only if editing.mode is &apos;batch&apos;.
     */
    saveAllChanges?: string;
    /**
     * Specifies text for a button that saves changes made in a row. Applies only if allowUpdating is true.
     */
    saveRowChanges?: string;
    /**
     * Specifies text for buttons that recover deleted rows. Applies only if allowDeleting is true and editing.mode is &apos;batch&apos;.
     */
    undeleteRow?: string;
    /**
     * Specifies text for a hint appearing when a user pauses on the button that cancels changes in a cell. Applies only if editing.mode is &apos;cell&apos; and data validation is enabled.
     */
    validationCancelChanges?: string;
}

/**
 * @deprecated 
 */
export type GridBasePaging = PagingBase;
/**
 * @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 PagingBase {
    /**
     * Enables paging.
     */
    enabled?: boolean;
    /**
     * Specifies the page to be displayed using a zero-based index.
     */
    pageIndex?: number;
    /**
     * Specifies the page size.
     */
    pageSize?: number;
}

/**
 * @deprecated 
 */
export type GridBaseScrolling = ScrollingBase;
/**
 * @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 ScrollingBase {
    /**
     * Specifies the rendering mode for columns. Applies when columns are left outside the viewport. Requires the columnWidth, columnAutoWidth, or width (for all columns) property specified.
     */
    columnRenderingMode?: DataRenderMode;
    /**
     * Specifies whether the UI component should load adjacent pages. Applies only if scrolling.mode is &apos;virtual&apos; or &apos;infinite&apos;.
     */
    preloadEnabled?: boolean;
    /**
     * Specifies the rendering mode for loaded rows.
     */
    rowRenderingMode?: DataRenderMode;
    /**
     * Specifies whether a user can scroll the content with a swipe gesture. Applies only if useNative is false.
     */
    scrollByContent?: boolean;
    /**
     * Specifies whether a user can scroll the content with the scrollbar. Applies only if useNative is false.
     */
    scrollByThumb?: boolean;
    /**
     * Specifies when to show scrollbars. Applies only if useNative is false.
     */
    showScrollbar?: ScrollbarMode;
    /**
     * Specifies whether the widget should use native or simulated scrolling.
     */
    useNative?: boolean | Mode;
    /**
     * Specifies whether to render rows after a user stops scrolling or at the same time as the user scrolls the widget.
     */
    renderAsync?: boolean;
}

/**
 * @deprecated 
 */
export type GridBaseSelection = SelectionBase;
/**
 * @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 SelectionBase {
    /**
     * Allows users to simultaneously select all or current page rows (depending on the selectAllMode).
     */
    allowSelectAll?: boolean;
    /**
     * Specifies the selection mode.
     */
    mode?: SingleMultipleOrNone;
}

/**
 * 
 * @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 GridBase<TRowData = any, TKey = any> {
    /**
     * Shows the load panel.
     */
    beginCustomLoading(messageText: string): void;
    /**
     * Gets a data object with a specific key.
     */
    byKey(key: TKey): DxPromise<TRowData>;
    /**
     * Discards changes that a user made to data.
     */
    cancelEditData(): void;
    /**
     * Gets the value of a cell with a specific row index and a data field, column caption or name.
     */
    cellValue(rowIndex: number, dataField: string): any;
    /**
     * Sets a new value to a cell with a specific row index and a data field, column caption or name.
     */
    cellValue(rowIndex: number, dataField: string, value: any): void;
    /**
     * Gets the value of a cell with specific row and column indexes.
     */
    cellValue(rowIndex: number, visibleColumnIndex: number): any;
    /**
     * Sets a new value to a cell with specific row and column indexes.
     */
    cellValue(rowIndex: number, visibleColumnIndex: number, value: any): void;
    /**
     * Clears all filters applied to UI component rows.
     */
    clearFilter(): void;
    /**
     * Clears all row filters of a specific type.
     */
    clearFilter(filterName: string): void;
    /**
     * Clears selection of all rows on all pages.
     */
    clearSelection(): void;
    /**
     * Clears sorting settings of all columns at once.
     */
    clearSorting(): void;
    /**
     * Switches the cell being edited back to the normal state. Takes effect only if editing.mode is batch or cell and showEditorAlways is false.
     */
    closeEditCell(): void;
    /**
     * Collapses the currently expanded adaptive detail row (if there is one).
     */
    collapseAdaptiveDetailRow(): void;
    /**
     * Gets the data column count. Includes visible and hidden columns, excludes command columns.
     */
    columnCount(): number;
    /**
     * Gets all properties of a column with a specific identifier.
     */
    columnOption(id: number | string): any;
    /**
     * Gets the value of a single column property.
     */
    columnOption(id: number | string, optionName: string): any;
    /**
     * Updates the value of a single column property.
     */
    columnOption(id: number | string, optionName: string, o