Vue Common Types - grids

AIAssistant

Configures the grids AI Assistant.

import { AIAssistant } from "devextreme/common/grids"
Type:

Object

DataGrid - AI Assistant Demo

AIColumnMode

Specifies how an AI column sends requests.

Type:

Literal Union

Accepted Values: 'auto' | 'manual'

DataGrid Demo TreeList Demo

Used in:

ApplyChangesMode

Specifies when to apply changes made in the field chooser to the PivotGrid.

Type:

Literal Union

Accepted Values: 'instantly' | 'onDemand'

Used in:

ApplyFilterMode

Specifies when to apply a filter.

Type:

Literal Union

Accepted Values: 'auto' | 'onClick'

Used in:

BasicFilterExpr

A basic DataGrid/TreeList filter expression.

import { BasicFilterExpr } from "devextreme/common/grids"
Type:

Object

This object includes the following fields:

  • type: The expression type. Set to "basic".
  • field: The filtered data field.
  • operator: A SearchOperation comparison operator.
  • value: The comparison value (ScalarFilterValue).

ColumnAIOptions

Configures AI options for a column.

import { ColumnAI_Options } from "devextreme/common/grids"
Type:

Object

ColumnChooser

Configures the column chooser.

import { ColumnChooser } from "devextreme/common/grids"
Type:

Object

ColumnChooserMode

Specifies how a user manages columns using the column chooser.

Type:

Literal Union

Accepted Values: 'dragAndDrop' | 'select'

Used in:

ColumnChooserSearchConfig

Configures the column chooser's search functionality.

import { ColumnChooserSearchConfig } from "devextreme/common/grids"
Type:

Object

ColumnChooserSelectionConfig

Configures column selection functionality within the column chooser.

import { ColumnChooserSelectionConfig } from "devextreme/common/grids"
Type:

Object

ColumnFixing

Configures column fixing.

import { ColumnFixing } from "devextreme/common/grids"

ColumnFixingIcons

Configures column fixing icons.

import { ColumnFixingIcons } from "devextreme/common/grids"

ColumnFixingTexts

Contains properties that specify texts for column fixing commands in the context menu of a column header.

import { ColumnFixingTexts } from "devextreme/common/grids"

ColumnHeaderFilter

Specifies data settings for the header filter.

import { ColumnHeaderFilter } from "devextreme/common/grids"
Type:

Object

ColumnHeaderFilterSearchConfig

Configures the header filter's search.

import { ColumnHeaderFilterSearchConfig } from "devextreme/common/grids"
Type:

HeaderFilterSearchConfig

|

Object

ColumnResizeMode

Specifies how the UI component resizes columns.

Type:

Literal Union

Accepted Values: 'nextColumn' | 'widget'

Used in:

CombinedFilterExpr

A combined DataGrid/TreeList filter expression.

import { CombinedFilterExpr } from "devextreme/common/grids"
Type:

Object

This object includes the following fields:

  • type: The expression type. Set to "combined".
  • leftId: The ID of the first filter expression's node (FilterExprNode).
  • combiner: The combination operation. Accepted values: "and", "or".
  • rightId: The ID of the second filter expression's node (FilterExprNode).

CommandInfo

Information about a predefined DataGrid/TreeList command.

import { CommandInfo } from "devextreme/common/grids"
Type: any

CommandInfo contains the following fields:

CompositeKeyPair

A field/value pair used in composite DataGrid or TreeList keys.

import { CompositeKeyPair } from "devextreme/common/grids"
Type:

Object

This object includes the following fields:

  • field: The key field's name.
  • value: The key field's value. Can be a string or number.

DataChangeType

Data change type.

Type:

Literal Union

Accepted Values: 'insert' | 'update' | 'remove'

Used in:

DataRenderMode

Specifies the rendering mode for columns and rows.

Type:

Literal Union

Accepted Values: 'standard' | 'virtual'

DragDropInfo

Describes whether a dragged row is dropped inside another row.

import { DragDropInfo } from "devextreme/common/grids"
Type:

Object

This type supplies the dropInsideItem field for DataGrid and TreeList row-dragging events. Use this field in TreeList handlers to distinguish a drop inside a row from a drop between rows.

DragReorderInfo

Describes the drop location and asynchronous completion of a row reorder operation.

import { DragReorderInfo } from "devextreme/common/grids"
Type:

Object

This type supplies the dropInsideItem and promise fields for DataGrid and TreeList RowDraggingReorderEvent arguments. Use these fields to update the TreeList hierarchy or wait for an asynchronous data source update.

DragStartEventInfo

Describes a row at the start of a drag gesture.

import { DragStartEventInfo } from "devextreme/common/grids"

This type supplies row data, the row element, the source index, and custom source data for DataGrid and TreeList RowDraggingStartEvent arguments. The TRowData type parameter specifies the type of itemData.

EnterKeyAction

Specifies whether the Enter key switches the cell or row to the edit state or moves focus in the enterKeyDirection.

Type:

Literal Union

Accepted Values: 'startEdit' | 'moveFocus'

Used in:

EnterKeyDirection

Specifies the direction in which to move focus when a user presses Enter.

Type:

Literal Union

Accepted Values: 'none' | 'column' | 'row'

Used in:

FilterExpr

A DataGrid/TreeList filter expression.

import { FilterExpr } from "devextreme/common/grids"
Type:

BasicFilterExpr

|

MultiValueFilterExpr

|

CombinedFilterExpr

|

NegatedFilterExpr

FilterExpr is a union of multiple filter expression types. For additional information, see the following topics:

FilterExprNode

A node in a filter expression tree (FilterExprTree).

import { FilterExprNode } from "devextreme/common/grids"

This object includes the following fields:

  • id: A unique identifier for the node. Nodes reference each other by ID.
  • expr: The filter expression (FilterExpr).

FilterExprTree

A complex filter expression in a flat data structure.

import { FilterExprTree } from "devextreme/common/grids"

FilterExprTree stores a filter expression tree as a flat list rather than a hierarchical structure. This flat structure improves compatibility with AI services for the AI Assistant's filterValue command.

This object includes the following fields:

  • rootId: The ID of the root FilterExprNode. This node is evaluated first. rootId must match the id value of an object in the nodes array.
  • nodes: An array of FilterExprNode objects. Each node must have a unique id.

FilterOperation

Specifies available filter operations.

Type:

Literal Union

Accepted Values: '=' | '<>' | '<' | '<=' | '>' | '>=' | 'contains' | 'endswith' | 'isblank' | 'isnotblank' | 'notcontains' | 'startswith' | 'between' | 'anyof' | 'noneof'

Used in:

FilterPanel

Configures the filter panel.

import { FilterPanel } from "devextreme/common/grids"

FilterPanelTexts

Specifies texts for the filter panel's elements.

import { FilterPanelTexts } from "devextreme/common/grids"
Type:

Object

FilterRow

Configures the filter row.

import { FilterRow } from "devextreme/common/grids"

FilterRowOperationDescriptions

Specifies descriptions for filter operations on the filter list.

import { FilterRowOperationDescriptions } from "devextreme/common/grids"

FilterType

Specifies whether a user changes the current filter by including (selecting) or excluding (clearing the selection of) values.

Type:

Literal Union

Accepted Values: 'exclude' | 'include'

Used in:

FixedPosition

Specifies a position type for fixed columns.

Type:

Literal Union

Accepted Values: 'left' | 'right' | 'sticky'

Used in:

GridsContextMenuTarget

Specifies a target for triggering context menu.

Type:

Literal Union

Accepted Values: 'toolbar' | 'header' | 'content' | 'footer'

Used in:

GridsEditMode

Specifies how a user edits data.

Type:

Literal Union

Accepted Values: 'batch' | 'cell' | 'row' | 'form' | 'popup'

GridsEditRefreshMode

Specifies operations that are performed after saving changes.

Type:

Literal Union

Accepted Values: 'full' | 'reshape' | 'repaint'

GroupExpandMode

Specifies the event on which a group will be expanded/collapsed.

Type:

Literal Union

Accepted Values: 'buttonClick' | 'rowClick'

Used in:

HeaderFilter

Configures the header filter feature.

import { HeaderFilter } from "devextreme/common/grids"
Type:

Object

HeaderFilterGroupInterval

Specifies how the header filter combines values into groups.

Type:

Literal Union

Accepted Values: 'day' | 'hour' | 'minute' | 'month' | 'quarter' | 'second' | 'year'

Used in:

HeaderFilterSearchConfig

Configures the header filter's search functionality.

import { HeaderFilterSearchConfig } from "devextreme/common/grids"
Type:

Object

HeaderFilterTexts

Contains properties that specify text for various elements of the popup menu.

import { HeaderFilterTexts } from "devextreme/common/grids"
Type:

Object

KeyboardNavigation

Configures keyboard navigation.

import { KeyboardNavigation } from "devextreme/common/grids"

LoadPanel

Configures the load panel.

import { LoadPanel } from "devextreme/common/grids"

MultiValueFilterExpr

A multi-value DataGrid/TreeList filter expression.

import { MultiValueFilterExpr } from "devextreme/common/grids"
Type:

Object

This object includes the following fields:

NegatedFilterExpr

A negated (unary NOT) DataGrid/TreeList filter expression.

import { NegatedFilterExpr } from "devextreme/common/grids"
Type:

Object

This object includes the following fields:

  • type: The expression type. Set to "negated".
  • expressionId: The ID of a filter expression node (FilterExprNode) to negate.

NewRowPosition

Specifies a position for a new row.

Type:

Literal Union

Accepted Values: 'first' | 'last' | 'pageBottom' | 'pageTop' | 'viewportBottom' | 'viewportTop'

Used in:

Pager

Configures the pager.

import { Pager } from "devextreme/common/grids"
Type:

Object

Function parameters:
allowedPageSizes:
Object structure:
Name Type Description

Array

|

Mode

Specifies the available page sizes in the page size selector.
visible:
Object structure:
Name Type Description

Boolean

|

Mode

Specifies whether the pager is visible.

PagerPageSize

Specifies the available page sizes in the page size selector.

Type:

Literal Union

Accepted Values: 'all' | 'auto'

Used in:

PredefinedCommandNames

Names of predefined commands available in the DevExtreme DataGrid and TreeList.

import { PredefinedCommandNames } from "devextreme/common/grids"
Type:

String

The following commands are available:

  • columnsVisibility
  • columnsReorder
  • columnsPinning
  • columnsResize
  • filterValue
  • clearFilter
  • focusRowByKey
  • focusRowByIndex
  • paging
  • pageSize
  • pageIndex
  • searching
  • selectByKeys
  • selectByIndexes
  • selectAll
  • deselectAll
  • clearSelection
  • sorting
  • clearSorting
See Also

PredefinedCommands

Predefined commands available in the DevExtreme DataGrid and TreeList.

import { PredefinedCommands } from "devextreme/common/grids"
Type:

Object

The following code snippet lists available commands with their arguments:

Code
columnsVisibility: {
    dataField: string;
    visible: boolean;
};
columnsReorder: {
    dataField: string;
    visibleIndex: number;
};
columnsPinning: {
    dataField: string;
    fixed: boolean;
    fixedPosition?: 'left' | 'right';
};
columnsResize: {
    dataField: string;
    width: number | string;
};
filterValue: {
    expression: FilterExprTree | null;
};
clearFilter: {};
focusRowByKey: {
    key: string | number | Array<CompositeKeyPair>;
};
focusRowByIndex: {
    index: number;
};
paging: {
    enabled: boolean;
};
pageSize: {
    pageSize: number;
};
pageIndex: {
    pageIndex: number;
};
searching: {
    text: string;
};
selectByKeys: {
    keys: Array<string | number | Array<CompositeKeyPair>>;
    preserve: boolean;
};
selectionByIndexes: {
    indexes: number[];
    mode: 'select' | 'deselect';
    scope: 'page' | 'allPages';
};
selectAll: {};
deselectAll: {};
clearSelection: {};
sorting: {
    dataField: string;
    sortOrder: SortOrder | 'none';
};
clearSorting: {};

ResponseStatus

The AI response status.

Type:

Literal Union

Accepted Values: 'success' | 'failure'

Used in:

ResponseStatusTexts

Response messages for each status.

import { ResponseStatusTexts } from "devextreme/common/grids"
Type:

Object

This object can contain both success and failure.

RowDragging

Configures row reordering using drag and drop gestures.

import { RowDragging } from "devextreme/common/grids"

RowDraggingEventInfo

Describes the row, source, and target of a row drag and drop operation.

import { RowDraggingEventInfo } from "devextreme/common/grids"

This type supplies shared fields for DataGrid and TreeList row-dragging events. Use itemData to identify the dragged row and the source and target fields to update the corresponding data sources. The TRowData type parameter specifies the type of itemData.

ScalarFilterValue

A value compatible with filtering operations.

import { ScalarFilterValue } from "devextreme/common/grids"
Type:

String

|

Number

|

Boolean

|

Date

| null

SearchPanel

Configures the search panel.

import { SearchPanel } from "devextreme/common/grids"
Type:

Object

SelectedFilterOperation

Specifies a filter operation that applies when users use the filter row to filter the column.

Type:

Literal Union

Accepted Values: '<' | '<=' | '<>' | '=' | '>' | '>=' | 'between' | 'contains' | 'endswith' | 'notcontains' | 'startswith'

Used in:

SelectionColumnDisplayMode

Specifies when to display the selection column and row selection checkboxes.

Type:

Literal Union

Accepted Values: 'always' | 'none' | 'onClick' | 'onLongTap'

Used in:

Sorting

Configures runtime sorting.

import { Sorting } from "devextreme/common/grids"
Type:

Object

StartEditAction

Specifies whether a single or double click should switch a cell to the editing state.

Type:

Literal Union

Accepted Values: 'click' | 'dblClick'

StateStoreType

Specifies the type of storage where the state is saved.

Type:

Literal Union

Accepted Values: 'custom' | 'localStorage' | 'sessionStorage'

Used in:

StateStoring

Configures state storing.

import { StateStoring } from "devextreme/common/grids"

SummaryType

Specifies how to aggregate data for the group summary item, total summary item, or the field's data.

Type:

Literal Union

Accepted Values: 'avg' | 'count' | 'custom' | 'max' | 'min' | 'sum'

Used in: