React DataGrid - editing.changes

An array of pending row changes.

Selector: Change
Type:

Object

Default Value: []
Raised Events: onOptionChanged

This array can be changed from the UI, with native JavaScript methods, or with UI component methods (addRow, editRow, editCell, deleteRow).

View Demo

data

An object with updated row fields.

Type: any

insertAfterKey

A key that identifies a record after which a new record should be inserted. Applies only if the type is "insert".

Type: any

The following code inserts a new record after a record with key 10:

JavaScript
  • changes.push({
  •     type: "insert",
  •     data: { ... },
  •     insertAfterKey: 10
  • });
IMPORTANT
Do not use insertAfterKey with insertBeforeKey.

View Demo

insertBeforeKey

A key that identifies the record before which a new record should be inserted. Applies only if the type is "insert".

Type: any

The following code inserts a new record before a record with key 5:

JavaScript
  • changes.push({
  •     type: "insert",
  •     data: { ... },
  •     insertBeforeKey: 5
  • });
IMPORTANT
Do not use insertBeforeKey with insertAfterKey.

key

The key of the row being created, updated, or removed.

Type: any

The key property supports both simple and composite keys.

JavaScript
  • changes.push({
  •     type: 'update',
  •     data: { FirstName : 'name1', LastName: 'name2' }
  •  
  •     key: 1 // simple key
  •     // or ...
  •     key: {ID: 1, SecondID: 2} // composite key
  • });
IMPORTANT
In batch editing mode, the "insert" operation generates a temporary GUID-like key that starts with the _DX_KEY_ prefix. Avoid basing application logic on this key.

type

Data change type.

Type:

DataChangeType