DevExtremeReactive
Version 2.7.4DemosDocsBlogGitHubBuy

EditingState Plugin Reference

A plugin that manages grid rows' editing state. It arranges grid rows by different lists depending on a row's state.

Import

Use the following statement to import the plugin:

import { EditingState } from '@devexpress/dx-react-grid';

User Reference

Dependencies

none

Properties

Name Type Default Description
createRowChange? (row: any, value: string | number, columnName: string) => any A function that returns a row change object depending on row editor values. This function is called each time the row editor's value changes.
columnEditingEnabled? boolean true Specifies whether editing is enabled for all columns.
columnExtensions? Array<EditingState.ColumnExtension> Additional column properties that the plugin can handle.
editingRowIds? Array<number | string> IDs of the rows being edited.
defaultEditingRowIds? Array<number | string> [] IDs of the rows initially added to the editingRowIds array in uncontrolled mode.
onEditingRowIdsChange? (editingRowIds: Array<number | string>) => void Handles adding or removing a row to/from the editingRowIds array.
onEditingCellsChange? (editingCells: Array<{rowId: number, columnName: string}>) => void Handles the add or remove a row to/from the editingCells array function.
addedRows? Array<any> Created but not committed rows.
defaultAddedRows? Array<any> [] Rows initially added to the addedRows array in uncontrolled mode.
onAddedRowsChange? (addedRows: Array<any>) => void Handles adding or removing a row to/from the addedRows array.
rowChanges? { [key: string]: any } Not committed row changes.
defaultRowChanges? { [key: string]: any } {} Row changes initially added to the rowChanges array in uncontrolled mode.
onRowChangesChange? (rowChanges: { [key: string]: any }) => void Handles adding or removing a row changes to/from the rowChanges array.
onCommitChanges (changes: ChangeSet) => void Handles row changes committing.
editingCells? Array<{rowId: number | string, columnName: string}> Edited cells identified by the row ID and column name.
defaultEditingCells? Array<{rowId: number | string, columnName: string}> Cells initially added to the editingCells array in uncontrolled mode. The cells are identified by the row ID and column name.

Interfaces

EditingState.ColumnExtension

Describes additional column properties that the plugin can handle.

Field Type Description
columnName string The name of a column to extend.
editingEnabled? boolean Specifies whether editing is enabled for a column.
createRowChange? (row: any, value: any, columnName: string) => any A function that returns a value specifying row changes depending on the columns' editor values for the current row. This function is called each time the editor's value changes.

ChangeSet

Describes uncommitted changes made to the grid data.

Field Type Description
added? Array<any> An array of rows to be created.
changed? { [key: number | string]: any } An associative array that stores changes made to existing data. Each array item specifies changes made to a row. The item's key specifies the associated row's ID.
deleted? Array<number | string> An array of IDs representing rows to be deleted.

Plugin Developer Reference

Imports

none

Exports

Name Plugin Type Description
editingRowIds Getter Array<number | string> Rows being edited.
editingCells Getter Array<{rowId: number | string, columnName: string}> Edited cells identified by the row ID and column name.
startEditRows Action ({ rowIds: Array<number | string> }) => void Enables the edit mode for the rows the ID specifies.
stopEditRows Action ({ rowIds: Array<number | string> }) => void Disables the edit mode for the rows the ID specifies.
startEditCells Action ({ editingCells: Array<{rowId: number | string, columnName: string}> }) => void Switches cells identified by the row ID and column name to edit mode.
stopEditCells Action ({ editingCells: Array<{rowId: number | string, columnName: string}> }) => void Switches cells identified by the row ID and column name to normal mode.
addedRows Getter Array<any> Created but not committed rows.
addRow Action () => void Adds an item to the addedRows array.
changeAddedRow Action ({ rowId: number, change: any }) => void Applies a change to a created but uncommitted row. Note: rowId is a row index within the addedRows array.
cancelAddedRows Action ({ rowIds: Array<number> }) => void Removes the specified rows from the addedRows array.
commitAddedRows Action ({ rowIds: Array<number> }) => void Fires the onCommitChanges event with the corresponding ChangeSet and removes specified rows from the addedRows array.
rowChanges Getter { [key: string]: any } An associative array that stores changes made to existing rows. Each array item specifies changes made to a row. The item's key specifies the associated row's ID.
changeRow Action ({ rowId: number | string, change: any }) => void Adds an item representing changes made to an exsiting row to the rowChanges array.
cancelChangedRows Action ({ rowIds: Array<number | string> }) => void Removes specified rows' data from the rowChanges array.
commitChangedRows Action ({ rowIds: Array<number | string> }) => void Fires the onCommitChanges event with the corresponding ChangeSet and removes specified rows from the rowChanges array.
deletedRowIds Getter Array<number | string> Rows prepared for deletion.
deleteRows Action ({ rowIds: Array<number | string> }) => void Adds rows the ID specifies to the deletedRowIds array.
cancelDeletedRows Action ({ rowIds: Array<number | string> }) => void Removes the specified rows from the deletedRowIds array.
commitDeletedRows Action ({ rowIds: Array<number | string> }) => void Fires the onCommitChanges event with the corresponding ChangeSet and removes specified rows from the deletedRowIds array.
createRowChange Getter (row: any, value: any, columnName: string) => any A function that returns a value that specifies row changes depending on the column's editor values for the current row. This function is called each time the editor's value changes.
isColumnEditingEnabled Getter (columnName: string) => boolean A function that returns a value that specifies if editing by a column is enabled.

Grid

Chart

Scheduler

Common Concepts

Core