React DataGrid - Editing

NOTE
You must specify the DataGrid's keyExpr or the Store's key property to ensure that editing works properly.
See Also

User Interaction

Users can add, delete, and update grid data. To enable these operations, assign true to the corresponding fields of the editing object. You can set a column's allowEditing property to false if its data should not be edited.

Grid data can be edited in several modes. Set the editing.mode property to specify the mode.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid, {
  • Editing,
  • Column
  • } from 'devextreme-react/data-grid';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <DataGrid ... >
  • <Editing
  • allowUpdating={true}
  • allowAdding={true}
  • allowDeleting={true}
  • mode="row" /> {/* 'batch' | 'cell' | 'form' | 'popup' */}
  • <Column dataField="id" allowEditing={false} />
  • </DataGrid>
  • );
  • }
  • }
  • export default App;

The following sections detail the DataGrid's appearance and behavior in each editing mode.

Row Mode

In this mode a user edits data row by row. When a user clicks an "Edit" button, the corresponding row enters the editing state, and the "Save" and "Cancel" buttons appear in the edit column. The UI component saves changes only if the "Save" button is clicked. If a user starts editing another row, sorts or filters data, it discards the changes.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Row Mode Editing State

Clicking the "Delete" button invokes the confirmation dialog that allows a user to cancel row deletion. confirmDelete property to hide this dialog.

App.js
  • import React from 'react';
  •  
  • import { DataGrid, Editing } from 'devextreme-react/data-grid';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <DataGrid ... >
  • <Editing
  • mode="row"
  • confirmDelete={false}
  • allowDeleting={true}
  • />
  • </DataGrid>
  • );
  • }
  • }
  • export default App;

View Demo

See Also

Cell Mode

In the cell mode, a user edits data cell by cell. Changes are saved once a cell loses the focus, or discarded if a user presses Esc. An added row is saved only when the focus is shifted from it. Choose this mode if any changes should be saved to the data source immediately.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Cell Mode

If you validate data, a cell is locked in the editing state until a user enters a valid value or clicks the "Cancel Changes" button.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Cell Mode Validation

Clicking the "Delete" button invokes the confirmation dialog that allows a user to cancel row deletion. Use the confirmDelete property to hide this dialog.

App.js
  • import React from 'react';
  •  
  • import { DataGrid, Editing } from 'devextreme-react/data-grid';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <DataGrid ... >
  • <Editing
  • mode="row"
  • confirmDelete={false}
  • allowDeleting={true}
  • />
  • </DataGrid>
  • );
  • }
  • }
  • export default App;

View Demo

See Also

Batch Mode

In the batch mode, like in the cell mode, a user edits data cell by cell. However, in this mode, the UI component stores changes in a buffer until a user clicks the global "Save" button instead of saving them immediately. This mode is useful when you need to defer saving multiple changes.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Batch Mode

When a user clicks a row's "Delete" button, the UI component only marks the row as deleted. Users can restore this row by clicking the "Undelete" button if they have not saved the changes yet. They can also discard all unsaved changes by clicking the "Revert" button.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Batch Mode Deletion

View Demo View on GitHub

See Also

Form Mode

In form edit mode, row cells become editable form fields. Form fields are sorted like columns in the columns array.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Form Mode

The DataGrid uses the DevExtreme Form UI component. To configure the form, specify any Form properties in the editing.form object except properties mentioned in the description of this object. Refer to the following help topic for more information about form customization: Customize Edit Form.

For example, you can specify groups, tabs, or leave items ungrouped.

NOTE
The recommended way is to wrap all items in groups.

In the following code, the items with the specified dataField are simple items. Identical dataFields connect a simple item with a column:

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid, {
  • Editing,
  • Form,
  • Column
  • } from 'devextreme-react/data-grid';
  •  
  • import {
  • SimpleItem,
  • GroupItem
  • } from 'devextreme-react/form';
  •  
  • import 'devextreme-react/text-area';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <DataGrid ... >
  • <Editing
  • allowUpdating={true}
  • mode="form">
  • <Form>
  • <GroupItem caption="Personal Data">
  • <SimpleItem dataField="Prefix" />
  • <SimpleItem dataField="Full_Name" />
  • <SimpleItem dataField="Position" />
  • <SimpleItem dataField="Duties" editorType="dxTextArea" />
  • </GroupItem>
  • <GroupItem caption="Contacts">
  • <SimpleItem dataField="Email" />
  • <SimpleItem dataField="Skype" />
  • </GroupItem>
  • </Form>
  • </Editing>
  • <Column dataField="Full_Name" />
  • <Column dataField="Prefix" />
  • <Column dataField="Position" />
  • <Column dataField="Duties" />
  • <Column dataField="Email" />
  • <Column dataField="Skype" />
  • </DataGrid>
  • );
  • }
  • }
  • export default App;

You can use a column's formItem object to customize an individual simple item. See an example in its description.

If you need to validate form values, specify validation rules as described in the Data Validation article.

View Demo View on GitHub

See Also

Popup Mode

The popup mode is the form mode with the form placed in a popup window.

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid Editing Popup Mode

Use the editing.popup object to customize the popup window. This object can contain the Popup UI component's fields. However, you should refer to the popup object's description for information on restrictions that apply.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid, {
  • Editing,
  • Form,
  • Popup
  • } from 'devextreme-react/data-grid';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <DataGrid ... >
  • <Editing
  • allowUpdating={true}
  • mode="popup">
  • <Form
  • labelLocation="top"
  • />
  • <Popup
  • showTitle={true}
  • title="Row in the editing state"
  • />
  • </Editing>
  • </DataGrid>
  • );
  • }
  • }
  • export default App;

Since the popup and form modes are very similar, you can use the same columns.formItem and editing.form properties to customize items and layout in both modes. See the Form Mode topic for more details on form customization.

View Demo View on GitHub

The built-in form of the Popup and Form modes has limited functionality. If you want to further customize the form (add custom labels and buttons, apply advanced validation rules and masks, etc.), implement the Form component inside Popup.

View on GitHub

View on GitHub

See Also

API

Add

Use the addRow() method to add an empty row.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid from 'devextreme-react/data-grid';
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  • this.dataGridRef = React.createRef();
  • this.addNewRow = this.addNewRow.bind(this);
  • }
  •  
  • addNewRow() {
  • this.dataGridRef.current.instance().addRow();
  • }
  •  
  • render() {
  • return (
  • <DataGrid ...
  • ref={this.dataGridRef}>
  • </DataGrid>
  • );
  • }
  • }
  • export default App;

You can specify initial values for a newly added row in the onInitNewRow event handler.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid, {
  • Column
  • } from 'devextreme-react/data-grid';
  •  
  • class App extends React.Component {
  • setHireDate(e) {
  • e.data.Hire_Date = new Date();
  • }
  •  
  • render() {
  • return (
  • <DataGrid ...
  • onInitNewRow={this.setHireDate}>
  • <Column dataField="Hire_Date" dataType="date" />
  • </DataGrid>
  • );
  • }
  • }
  • export default App;
See Also

Update

The cellValue(rowIndex, visibleColumnIndex, value) method updates a cell's value. This cell can be located using its row and column indexes. If the cell's data field is known, you can pass it instead of the column index. After a value is updated, save it to the data source by calling the saveEditData() method.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid from 'devextreme-react/data-grid';
  • import Button from 'devextreme-react/button';
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  • this.dataGridRef = React.createRef();
  • this.updateCell = this.updateCell.bind(this);
  • }
  •  
  • get dataGrid() {
  • return this.dataGridRef.current.instance();
  • }
  •  
  • updateCell() {
  • this.dataGrid.cellValue(1, "Position", "CTO");
  • this.dataGrid.saveEditData();
  • }
  •  
  • render() {
  • return (
  • <React.Fragment>
  • <DataGrid ...
  • ref={this.dataGridRef}>
  • </DataGrid>
  • <Button
  • text="Update Cell"
  • onClick={this.updateCell}
  • />
  • </React.Fragment>
  • );
  • }
  • }
  • export default App;

To process an updated cell value before saving it to the data source, implement the columns.setCellValue function. Refer to the function's description for an example.

You can check if there are any unsaved changes by calling the hasEditData() method. Use the saveEditData() or cancelEditData() method to save or cancel them, respectively.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid from 'devextreme-react/data-grid';
  • import Button from 'devextreme-react/button';
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  • this.dataGridRef = React.createRef();
  • this.saveChanges = this.saveChanges.bind(this);
  • }
  •  
  • get dataGrid() {
  • return this.dataGridRef.current.instance();
  • }
  •  
  • saveChanges() {
  • if(this.dataGrid.hasEditData()) {
  • this.dataGrid.saveEditData().then(() => {
  • if(!this.dataGrid.hasEditData()) {
  • // Saved successfully
  • } else {
  • // Saving failed
  • }
  • });
  • }
  • }
  •  
  • render() {
  • return (
  • <React.Fragment>
  • <DataGrid ...
  • ref={this.dataGridRef}>
  • </DataGrid>
  • <Button
  • text="Save changes"
  • onClick={this.saveChanges}
  • />
  • </React.Fragment>
  • );
  • }
  • }
  • export default App;
See Also

Delete

Call the deleteRow(rowIndex) method to delete a specific row from the data source. This method invokes a confirmation dialog that allows a user to cancel deletion. The confirmDelete property allows you to hide this dialog instantly deleting the selected row from the data source.

App.js
  • import React from 'react';
  •  
  • import { DataGrid, Editing } from 'devextreme-react/data-grid';
  • import Button from 'devextreme-react/button';
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  •  
  • this.dataGridRef = React.createRef();
  • this.deleteRow = this.deleteRow.bind(this);
  • }
  • get dataGrid() {
  • return this.dataGridRef.current.instance();
  • }
  •  
  • deleteRow() {
  • this.dataGrid.deleteRow(1);
  • }
  •  
  • render() {
  • return (
  • <DataGrid
  • ref={this.dataGridRef}>
  • <Editing
  • mode="row"
  • confirmDelete={false}
  • allowDeleting={true}
  • />
  • </DataGrid>
  • <Button
  • text="Delete Row"
  • onClick={this.deleteRow}
  • />
  • );
  • }
  • }
  • export default App;

Note that in batch mode a row is only marked as deleted. To save changes, call the saveEditData() method. Calling the undeleteRow(rowIndex) method cancels row deletion.

App.js
  • import React from 'react';
  •  
  • import { DataGrid } from 'devextreme-react/data-grid';
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  •  
  • this.dataGridRef = React.createRef();
  • this.undeleteRow = this.undeleteRow.bind(this);
  • }
  • get dataGrid() {
  • return this.dataGridRef.current.instance();
  • }
  •  
  • undeleteRow() {
  • this.dataGrid.undeleteRow(1);
  • }
  •  
  • render() {
  • return (
  • <DataGrid
  • ref={this.dataGridRef}
  • />
  • );
  • }
  • }
  • export default App;
See Also

Get Current Cell Values

To get current cell values, call the cellValue(rowIndex, dataField) method. If a cell is being edited, this method returns the unsaved cell value.

The cellValue(rowIndex, dataField) method requires a row index. Use the getRowIndexByKey(key) method to use a key to get the row index. Obtaining the key to use depends on your particular scenario. If you want to get the key of the row being edited, you can use the parameter passed to the onEditingStart event handler:

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid from 'devextreme-react/data-grid';
  •  
  • class App extends React.Component {
  • constructor(props) {
  • super(props);
  • this.dataGridRef = React.createRef();
  • this.getCellValue = this.getCellValue.bind(this);
  • this.onEditingStart = this.onEditingStart.bind(this);
  • }
  •  
  • get dataGrid() {
  • return this.dataGridRef.current.instance();
  • }
  •  
  • getCellValue() {
  • const editRowIndex = this.dataGrid.getRowIndexByKey(this.state.editRowKey);
  • if(editRowIndex >= 0) {
  • return this.dataGrid.cellValue(editRowIndex, "EmployeeName");
  • }
  • return null;
  • }
  •  
  • onEditingStart(e) {
  • this.setState({
  • editRowKey: e.key
  • });
  • // ...
  • }
  •  
  • render() {
  • return (
  • <DataGrid ...
  • ref={this.dataGridRef}
  • onEditingStart={this.onEditingStart}>
  • </DataGrid>
  • );
  • }
  • }
  • export default App;

To access a cell value after the user has edited it, but before it is saved to the data source, use the setCellValue function as an alternative. In addition to edited cell values, it allows you to get the cell values before user edits. setCellValue is set individually for each column.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid, {
  • Column
  • } from 'devextreme-react/data-grid';
  •  
  • class App extends React.Component {
  • setCellValue(newData, value, currentRowData) {
  • // currentRowData contains the row data before the edit
  • // value contains the edited value
  • }
  •  
  • render() {
  • return (
  • <DataGrid ... >
  • <Column
  • dataField="Full_Name"
  • setCellValue={this.setCellValue}
  • />
  • </DataGrid>
  • );
  • }
  • }
  • export default App;
See Also

Events

The DataGrid UI component raises events before and after a row is inserted, updated or removed from the data source. If the event handlers are going to remain unchanged during the UI component's lifetime, assign them to corresponding onEventName properties:

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid from 'devextreme-react/data-grid';
  •  
  • class App extends React.Component {
  • onRowInserting(e) {
  • // Handler of the "rowInserting" event
  • }
  •  
  • render() {
  • return (
  • <DataGrid ...
  • onRowInserting={this.onRowInserting}>
  • </DataGrid>
  • );
  • }
  • }
  • export default App;

In addition, the DataGrid raises the initNewRow event when a new row is added and the editingStart event when a row enters the editing state. These events can be handled just like others - using the onEventName property or the on(eventName, eventHandler) method. In the following example, the onInitNewRow event handler specifies initial values for an added row:

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid from 'devextreme-react/data-grid';
  •  
  • class App extends React.Component {
  • onInitNewRow(e) { // Handler of the "initNewRow" event
  • // Sets an initial value for the "Hire_Date" field
  • e.data.Hire_Date = new Date();
  • }
  •  
  • render() {
  • return (
  • <DataGrid ...
  • onInitNewRow={this.onInitNewRow}>
  • </DataGrid>
  • );
  • }
  • }
  • export default App;
See Also

Customize Editors

The columns's dataType defines a cell's editor that can be configured using the editorOptions object. However, this object cannot be used to change the editor's type or onValueChanged event handler. Instead, use the onEditorPreparing function as shown in the following code. The function's parameter provides the editorName and editorOptions fields for changing the used editor and its configuration.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid, {
  • Column
  • } from 'devextreme-react/data-grid';
  • import 'devextreme-react/text-area';
  •  
  • class App extends React.Component {
  • textAreaOptions = { height: 200 };
  • onEditorPreparing(e) {
  • if(e.dataField == "Note" && e.parentType === "dataRow") {
  • const defaultValueChangeHandler = e.editorOptions.onValueChanged;
  • e.editorName = "dxTextArea"; // Change the editor's type
  • e.editorOptions.onValueChanged = function (args) { // Override the default handler
  • // ...
  • // Custom commands go here
  • // ...
  • // If you want to modify the editor value, call the setValue function:
  • // e.setValue(newValue);
  • // Otherwise, call the default handler:
  • defaultValueChangeHandler(args);
  • }
  • }
  • }
  •  
  • render() {
  • return (
  • <DataGrid ...
  • onEditorPreparing={this.onEditorPreparing}>
  • <Column
  • dataField="Note"
  • editorOptions={this.textAreaOptions}
  • />
  • </DataGrid>
  • );
  • }
  • }
  • export default App;

Implement the column's editCellTemplate for more extensive customization. In this template, you should specify your custom component's appearance and behavior in full. The following code uses the template to substitute the Switch UI component for a default editor.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid, {
  • Column,
  • Editing
  • } from 'devextreme-react/data-grid';
  •  
  • import Switch from 'devextreme-react/switch';
  •  
  • class App extends React.Component {
  • renderSwitch(cellInfo) {
  • const setEditedValue = valueChangedEventArg => {
  • cellInfo.setValue(valueChangedEventArg.value);
  • }
  • return (
  • <Switch
  • width={50}
  • switchedOnText="YES"
  • switchedOffText="NO"
  • defaultValue={cellInfo.value}
  • onValueChanged={setEditedValue}
  • />
  • )
  • }
  •  
  • render() {
  • return (
  • <DataGrid ... >
  • <Column
  • dataField="isChecked"
  • editCellRender={this.renderSwitch}
  • />
  • <Editing
  • mode="batch"
  • allowUpdating={true}
  • />
  • </DataGrid>
  • );
  • }
  • }
  • export default App;

Editors are displayed in cells in the normal state too if you set the columns.showEditorAlways property to true.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid, {
  • Column
  • } from 'devextreme-react/data-grid';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <DataGrid ... >
  • <Column
  • dataField="Hidden"
  • dataType="boolean"
  • showEditorAlways={true}
  • />
  • </DataGrid>
  • );
  • }
  • }
  • export default App;
See Also

Customize Edit Form

DataGrid uses the Form component for editing in form and popup edit modes. The component automatically configures the built-in form based on column and editing settings. In general, you can use the Form API to work with built-in forms. However, you need to take DataGrid specifics into account.

Appearance and Editing

In the topics below you can find recommendations on how to customize the edit form in a most efficient way.

Form Layout Customization

This section demonstrates how to configure a form item's style and arrange items. We do not recommend that you use the options mentioned in this section to change the default editor's behavior. To customize the default editor, refer to the following section: Editor Customization.

If you need to implement minor changes (for example, apply a style to a form item, change item visibility, configure labels, specify a number of columns spanned by an item, etc.), use the columns[].formItem property.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid, {
  • Editing,
  • Column,
  • FormItem,
  • Label
  • } from 'devextreme-react/data-grid';
  •  
  • const defaultEditorOptions = { height: 100 }
  •  
  • export default function App() {
  • return (
  • <DataGrid ... >
  • <Editing
  • allowUpdating={true}
  • mode="form"
  • />
  • <Column dataField="ID">
  • <FormItem visible={false} />
  • </Column>
  • <Column dataField="Notes">
  • <FormItem
  • colSpan={2}
  • cssClass="custom-class"
  • editorType="dxTextArea"
  • editorOptions="{ defaultEditorOptions }"
  • >
  • <Label location="top" />
  • </FormItem>
  • </Column>
  • </DataGrid>
  • );
  • }

If you need to implement major changes (for example, arrange items and groups), use the editing.form property. Declare all items for a column object and specify the dataField property.

DataGrid automatically generates editors with the corresponding event handlers for form items based on column settings and other DataGrid options like onEditorPrepared. Do not use the editorOptions property for items that are bound to dataField in the editing.form configuration. You can add unbound items in the same way as regular Form components. Do not use editCellTemplate for unbound items.

You can refer to the following topic for information on how to arrange items in the Form component: Organize Simple Items. You can use the same technique to arrange items in the DataGrid editing form. Note that you should leave the formData property unspecified because DataGrid uses a built-in mechanism to manage edited data.

See Also

Editor Customization

DataGrid generates editors based on the columns[].dataType property. This section demonstrates how to change the default editor settings, configure built-in editors, or create your custom editor.

If you want to change the predefined editor properties, specify the columns[].editorOptions property that also affects filter row editors. Omit the onValueChanged handler in this property because the internal DataGrid implementation overrides it. The columns[].formItem.editorOptions property affects form items only.

NOTE
Leave the template property in formItem.editorOptions or columns[].editorOptions unspecified. To implement a custom template, use the editCellTemplate property instead.

View Demo

You can override the onValueChanged handler of the predefined editor and change its type. To accomplish this goal, handle the onEditorPreparing event.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid from 'devextreme-react/data-grid';
  •  
  • const overrideOnValueChanged = (e) => {
  • if (e.dataField === "Notes" && e.parentType === "dataRow") {
  • e.editorName = "dxTextArea";
  • }
  • if (e.dataField === "requiredDataField" && e.parentType === "dataRow") {
  • const defaultValueChangeHandler = e.editorOptions.onValueChanged;
  • e.editorOptions.onValueChanged = function(args) { // override the default handler
  • if (someCondition(e, args)) doSomething(e, args);
  • defaultValueChangeHandler(args);
  • }
  • }
  • }
  •  
  • export default function App() {
  • return (
  • <DataGrid ...
  • onEditorPreparing={overrideOnValueChanged}
  • >
  • </DataGrid>
  • );
  • }

If you need to implement a custom editor for a specific data type (array, object, etc.), use the columns[].editCellTemplate property. It is important to allow users to input or change the column value. Handle this value change and use the setValue template parameter to change the corresponding cell value. The editCellTemplate property specifies one template for all editing modes.

View Demo

If you want to further customize the form (add custom labels and buttons, apply advanced validation rules and masks, etc.), implement the Form component inside Popup.

View on GitHub

See Also

Validation

DataGrid validation is based on validation rules in all edit modes. Refer to the following topic for more details about DataGrid validation: Data Validation.

NOTE
DataGrid validates only modified values.

DataGrid automatically applies rules defined for columns to editors in an edit form. If you define form items in the edit form, do not assign validation rules directly to form items since validation may work incorrectly. Do not specify FormItem.isRequired as DataGrid automatically specifies this property for all form items whose corresponding columns include RequiredRule.

App.js
  • <DataGrid ... >
  • <Column dataField="Full_Name">
  • <!-- correct -->
  • <RequiredRule />
  • </Column>
  • <Editing>
  • <Form>
  • <Item dataField="Full_Name" >
  • <!-- incorrect -->
  • <RequiredRule />
  • </Item>
  • </Form>
  • </Editing>
  • </DataGrid>

To display the validation summary, enable the form.showValidationSummary property.

If your form layout contains tabs, disable TabbedItem.tabPanelOptions.deferRendering so DataGrid can validate all editors in all tabs. Otherwise, validation rules are not executed for items under non-initialized tabs.

App.js
  • <DataGrid ... >
  • <Editing>
  • <Form>
  • <TabbedItem>
  • <TabPanelOptions deferRendering={false} />
  • <Tab></Tab>
  • </Item>
  • </Form>
  • </Editing>
  • </DataGrid>

Save, Cancel, and Custom Buttons

Form and popup edit modes include built-in Save and Cancel buttons. If you want to execute custom code on a click on either button, specify the onSaving or onEditCanceling event handler, respectively. Assign true to the e.cancel parameter to cancel a pending Save or Cancel operation and keep the form or pop-up window open.

Specify editing.texts.cancelRowChanges and editing.texts.saveRowChanges properties to change Save and Cancel button captions.

To customize Save and Cancel buttons, you need to redefine them:

  • Popup edit mode
    Add the editing.popup object to the DataGrid configuration object and declare Save, Cancel, and custom buttons in the popup.toolbarItems array.

  • Form edit mode
    Add the editing.form object to the DataGrid configuration object and use the form.items array to arrange all items you want to display in the edit form. Then, add a simple item with a template containing a standalone Toolbar component. Declare buttons in this toolbar. Use the following CSS to hide built-in Save and Cancel buttons:

    • #gridForm .dx-datagrid-form-buttons-container {
    • display: none
    • }

Finally, handle the button onClick event to call saveEditData and cancelEditData methods, respectively.

Refer to the following example to learn more:

View on GitHub

Dynamically Change Editor or Form Item Properties

The following articles include step-by-step instructions on how to dynamically modify editor or form item properties, hide form items, and disable editors based on another field’s value:

NOTE
The edit form gets data from the DataGrid record. Editors are initialized with the dataField value from the record a user edits. If you want to initialize editors of a new row with a specific value, specify the onInitNewRow option.

Advanced Customization

If you want to completely redesign the edit form or change its behavior, replace the edit form with a standalone Popup containing Form. See the following example for implementation details:

View on GitHub

Edit Form Limitations

Do not specify the following properties in the form object:

Disable Editing

DataGrid includes API that allows you to disable data editing within certain columns or rows, or within individual cells. The following sections demonstrate how you can use that API.

Column

Set a column's allowEditing property to false to disable data editing within a specific column.

App.js
  • import React from 'react';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid, { Column } from 'devextreme-react/data-grid';
  •  
  • function App() {
  • return (
  • <DataGrid ... >
  • {/* ... */}
  • <Column allowEditing={false} />
  • </DataGrid>
  • );
  • }
  •  
  • export default App;

Row

To disable data editing within a specific row, follow the steps below:

  1. Handle the DataGrid's onEditingStart event.
  2. Check the data parameter's values. If you want don't want users to edit this row, assign true to e.cancel.
App.js
  • import React, { useCallback } from "react";
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DataGrid } from 'devextreme-react/data-grid';
  •  
  • function App() {
  • // ...
  • const onEditingStart = useCallback((e) => {
  • e.cancel = e.data.Position === "CEO";
  • }, []);
  •  
  • return (
  • <DataGrid
  • onEditingStart={onEditingStart}
  • >
  • </DataGrid>
  • );
  • }
  •  
  • export default App;

DataGrid's editing mode defines whether to display an Edit button opposite every row. To hide this button, use the button's visible property. Assign a callback to this property and check row data within this function.

App.js
  • import React, { useCallback } from "react";
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid, { Column, Button } from 'devextreme-react/data-grid';
  •  
  • function App() {
  • // ...
  • const hideEditButton = useCallback((e) => {
  • return e.row.data.Position !== "CEO";
  • }, []);
  •  
  • return (
  • <DataGrid ... >
  • <Column type="buttons">
  • <Button name="edit" visible={hideEditButton} />
  • <Button name="delete" />
  • </Column>
  • </DataGrid>
  • );
  • }
  •  
  • export default App;
See Also

Cell

Handle the DataGrid's onEditorPreparing event. Check the following parameters and set editorOptions.disabled as required:

  • parentType: the row type - "dataRow" or "filterRow"
  • dataField: the corresponding column
  • row.data: row data values
  • row.isNewRow: true, if the user is adding a new row
App.js
  • import React, { useCallback } from "react";
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import { DataGrid } from 'devextreme-react/data-grid';
  •  
  • function App() {
  • // ...
  • const onEditorPreparing = useCallback((e) => {
  • if (e.dataField === "LastName" && e.parentType === "dataRow") {
  • e.editorOptions.disabled = e.row.data && e.row.data.FirstName === "";
  • }
  • }, []);
  •  
  • return (
  • <DataGrid
  • onEditorPreparing={onEditorPreparing}
  • >
  • </DataGrid>
  • );
  • }
  •  
  • export default App;

You may need an extra implementation step if the control uses an edit mode that activate multiple editors at once (such as the "Row" edit mode). Specify a setCellValue callback for the column whose values specify editor availability in other columns. That callback helps you refresh the editors - disable or enable them as needed - and keep the control in edit mode. Refer to the following topic for additional information: Dynamically Change Editor Properties in the Editing State.

Data Validation

User input is validated against a set of validation rules. You can configure them in a column's validationRules array. Validation rules are attached to the editors and do not depend on the current edit mode.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid, {
  • Column,
  • RequiredRule,
  • StringLengthRule
  • } from 'devextreme-react/data-grid';
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <DataGrid ... >
  • <Column dataField="Full_Name">
  • <RequiredRule />
  • </Column>
  • <Column dataField="Login">
  • <StringLengthRule
  • min={3}
  • message="Login should be at least 3 symbols long"
  • />
  • </Column>
  • </DataGrid>
  • );
  • }
  • }
  • export default App;

The onRowValidating handler allows you to perform an action before a notification that a validation rule has been broken is displayed. For instance, you can perform additional checks in this handler and change the validation result by changing the handler parameter's isValid field.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DataGrid from 'devextreme-react/data-grid';
  •  
  • class App extends React.Component {
  • denyAdminLogin(e) {
  • if(e.isValid && e.newData.Login === "Administrator") {
  • e.isValid = false;
  • e.errorText = "You cannot log in as Administrator";
  • }
  • }
  •  
  • render() {
  • return (
  • <DataGrid ...
  • onRowValidating={this.denyAdminLogin}>
  • </DataGrid>
  • );
  • }
  • }
  • export default App;

View Demo

See Also