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 option to false if its data should not be edited.
Grid data can be edited in several modes. Set the editing.mode option to specify the mode.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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 widget saves changes only if the "Save" button is clicked. If a user starts editing another row, sorts or filters data, it discards the changes.
Clicking a "Delete" button invokes the confirmation dialog that allows a user to cancel row deletion. Use the code below to hide this dialog.
- import React from 'react';
- import { DataGrid, Editing, EditingTexts } from 'devextreme-react/data-grid';
- class App extends React.Component {
- render() {
- return (
- <DataGrid ... >
- <Editing
- mode="row"
- allowDeleting={true}>
- <EditingTexts confirmDeleteMessage={null} />
- </Editing>
- </DataGrid>
- );
- }
- }
- export default App;
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.
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.
Clicking a "Delete" button invokes the confirmation dialog that allows a user to cancel row deletion. Use the code below to hide this dialog.
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 widget 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.
When a user clicks a row's "Delete" button, the widget 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.
See Also
Form Mode
In form edit mode, row cells become editable form fields. Form fields are sorted like columns in the columns array.
Configure the form using the editing.form object. The DataGrid uses the DevExtreme Form widget, so you can specify any Form options in this object except those listed in its description.
For example, you can specify the items array to reorder editable fields (or "simple items", as they are called in the Form widget), or organize them in groups and tabs.
In the following code, the items with the specified dataField are simple items. Identical dataFields connect a simple item with a column:
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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;
See Also
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.
Popup Mode
The popup mode is the form mode with the form placed in a popup window.
Use the editing.popup object to customize the popup window. This object can contain the Popup widget's fields. However, you should refer to the popup object's description for information on restrictions that apply.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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 options to customize items and layout in both modes. See the Form Mode topic for more details on form customization.
See Also
Add
Use the addRow() method to add an empty row.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
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.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
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 following code hides this dialog, thus a row is instantly deleted from the data source:
- import React from 'react';
- import { DataGrid, Editing, EditingTexts } 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"
- allowDeleting={true}>
- <EditingTexts confirmDeleteMessage={null} />
- </Editing>
- </DataGrid>
- <Button
- text="Delete Row"
- onClick={this.deleteRow}
- />
- );
- }
- }
- export default App;
Note that in the batch mode a row is only marked as deleted. To save changes, call the saveEditData() method. Calling the undeleteRow(rowIndex) method cancels row deletion.
- 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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
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:
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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
- Call Methods: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
Events
The DataGrid widget 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 widget's lifetime, assign them to corresponding onEventName options:
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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;
If you are going to change the event handlers at runtime, or if you need to attach several handlers to a single event, subscribe to this event using the on(eventName, eventHandler) method. This approach is more typical of jQuery.
- var rowUpdatingEventHandler1 = function(e) {
- // First handler of the "rowUpdating" event
- };
- var rowUpdatingEventHandler2 = function(e) {
- // Second handler of the "rowUpdating" event
- };
- $("#dataGridContainer").dxDataGrid("instance")
- .on("rowUpdating", rowUpdatingEventHandler1)
- .on("rowUpdating", rowUpdatingEventHandler2);
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 option or the on(eventName, eventHandler) method. In the following example, the onInitNewRow event handler specifies initial values for an added row:
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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
- Handle Events: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
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.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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") {
- e.editorName = "dxTextArea"; // Changes the editor's type
- e.editorOptions.onValueChanged = function (args) {
- // Implement your logic here
- e.setValue(args.value); // Updates the cell value
- }
- }
- }
- 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 widget for a default editor. This configuration may be useful in batch editing mode.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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 option to true.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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
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.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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.
- import React from 'react';
- import 'devextreme/dist/css/dx.common.css';
- 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 = "Your cannot log in as Administrator";
- }
- }
- render() {
- return (
- <DataGrid ...
- onRowValidating={this.denyAdminLogin}>
- </DataGrid>
- );
- }
- }
- export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.