Configures editing.
Selector: DxEditing
Type:
Editing
The UI component can allow a user to add, update and delete data. To control which of these operations are allowed, use the allowAdding, allowUpdating and allowDeleting properties. Editing can be carried out in different modes, which are detailed in the mode property's description.
NOTE
Before allowing a user to add, update, and delete, make sure that your data source supports these actions.
View Demo
See Also
- Editing
allowAdding
Specifies whether a user can add new rows.
View Demo
See Also
- onRowInserting
- onRowInserted
- addRow()
allowDeleting
Specifies whether a user can delete rows. It is called for each data row when defined as a function.
Selector: allow-deleting
Function parameters:
options:
Information about the current row.
Object structure:
| Name | Type | Description |
|---|---|---|
| row | DataGrid Row | The row's properties. |
| component | DataGrid | The UI component's instance. |
Return Value:
true if the row can be deleted; otherwise false.
Default Value: false
The following code allows a user to delete only odd data rows:
jQuery
JavaScript
$(function(){ $("#dataGridContainer").dxDataGrid({ // ... editing: { allowDeleting: function(e) { return e.row.rowIndex % 2 === 1; }, } })})Angular
TypeScript
HTML
import { DxDataGridModule } from "devextreme-angular";// ...export class AppComponent { allowDeleting(e) { return e.row.rowIndex % 2 === 1; }}@NgModule({ imports: [ // ... DxDataGridModule ], // ...})<dx-data-grid ... > <dxo-editing [allowDeleting]="allowDeleting"> </dxo-editing></dx-data-grid>
Vue
App.vue
<template> <DxDataGrid ... > <DxEditing :allow-deleting="allowDeleting" /> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid, { DxEditing} from 'devextreme-vue/data-grid';export default { components: { DxDataGrid, DxEditing }, // ... methods: { allowDeleting(e) { return e.row.rowIndex % 2 === 1; } }}</script>React
App.js
import React, { useCallback } from 'react';import 'devextreme/dist/css/dx.light.css';import DataGrid, { Editing} from 'devextreme-react/data-grid';export default function App() { const allowDeleting = useCallback((e) => { return e.row.rowIndex % 2 === 1; }, []); return ( <DataGrid ... > <Editing allowDeleting={allowDeleting} /> </DataGrid> );}See Also
- onRowRemoved
- onRowRemoving
- deleteRow(rowIndex)
- undeleteRow(rowIndex)
allowUpdating
Specifies whether a user can update rows. It is called for each data row when defined as a function.
Selector: allow-updating
Type:
|
Function parameters:
options:
Information about the current row.
Object structure:
| Name | Type | Description |
|---|---|---|
| row | DataGrid Row | The row's properties. |
| component | DataGrid | The UI component's instance. |
Return Value:
true if the row can be updated; otherwise false.
Default Value: false
See an example in the allowDeleting property.
See Also
- onRowUpdating
- onRowUpdated
- cellValue(rowIndex, visibleColumnIndex, value)
changes
An array of pending row changes.
This array can be changed from the UI, with native JavaScript methods, or with UI component methods (addRow, editRow, editCell, deleteRow).
View Demo
confirmDelete
Specifies if confirmation is required when a user deletes a row.
editColumnName
The name of a column being edited. Applies only if editing.mode is "cell" or "batch".
See Also
- editRowKey
editRowKey
The key(s) of a row being edited.
Selector: edit-row-key
Type: any
Default Value: null
Raised Events: onOptionChanged
Values for this property are taken from the data field(s) specified in the keyExpr property or the key property of the store.
View Demo
See Also
- editColumnName
form
Configures the form. Used only if editing.mode is "form" or "popup".
Selector: DxForm
Type:
Form Configuration
Default form editors depend on the columns' configuration. If the generated form does not meet your requirements, and you need to reorganize form items or set other form properties, specify it in the form object. To link a form item with a grid column, assign identical values to the form.items.dataField and columns.dataField properties.
jQuery
index.js
$(function() { $("#dataGridContainer").dxDataGrid({ // ... editing: { allowUpdating: true, mode: "form", form: { items: [{ itemType: "group", caption: "Personal Data", items: [ { dataField: "Prefix" }, { dataField: "Full_Name" }, { dataField: "Position" }, { dataField: "Duties", editorType: "dxTextArea" } ] // or simply // items: ["Prefix", "Full_Name", "Position"] }, { itemType: "group", caption: "Contacts", items: ["Email", "Skype"] }] } }, columns: [ { dataField: "Full_Name" }, { dataField: "Prefix" }, { dataField: "Position" }, { dataField: "Duties" }, { dataField: "Email" }, { dataField: "Skype" } ] });});Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ... > <dxo-editing [allowUpdating]="true" mode="form"> <dxo-form> <dxi-item itemType="group" caption="Personal Data"> <dxi-item dataField="Prefix"></dxi-item> <dxi-item dataField="Full_Name"></dxi-item> <dxi-item dataField="Position"></dxi-item> <dxi-item dataField="Duties" editorType="dxTextArea"></dxi-item> </dxi-item> <dxi-item itemType="group" caption="Contacts"> <dxi-item dataField="Email"></dxi-item> <dxi-item dataField="Skype"></dxi-item> </dxi-item> </dxo-form> </dxo-editing> <dxi-column dataField="Full_Name"></dxi-column> <dxi-column dataField="Prefix"></dxi-column> <dxi-column dataField="Position"></dxi-column> <dxi-column dataField="Duties"></dxi-column> <dxi-column dataField="Email"></dxi-column> <dxi-column dataField="Skype"></dxi-column></dx-data-grid>
import { Component } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { // ...}import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { DxDataGridModule } from 'devextreme-angular';@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxDataGridModule ], providers: [ ], bootstrap: [AppComponent]})export class AppModule { }ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().DataGrid() // ... .Editing(e => e .AllowUpdating(true) .Mode(GridEditMode.Form) .Form(f => f .Items(i => { i.AddGroup() .Caption("Personal Data") .Items(groupItems => { groupItems.AddSimple().DataField("Prefix"); groupItems.AddSimple().DataField("Full_Name"); groupItems.AddSimple().DataField("Position"); groupItems.AddSimple().DataField("Duties") .Editor(e => e.TextArea()); }); i.AddGroup() .Caption("Contacts") .Items(groupItems => { groupItems.AddSimple().DataField("Email"); groupItems.AddSimple().DataField("Skype"); }); }) ) ) .Columns(cols => { cols.Add().DataField("Full_Name"); cols.Add().DataField("Prefix"); cols.Add().DataField("Position"); cols.Add().DataField("Duties"); cols.Add().DataField("Email"); cols.Add().DataField("Skype"); }))Vue
App.vue
<template> <DxDataGrid ... > <DxEditing :allow-updating="true" mode="form"> <DxForm> <DxItem itemType="group" caption="Personal Data"> <DxItem dataField="Prefix" /> <DxItem dataField="Full_Name" /> <DxItem dataField="Position" /> <DxItem dataField="Duties" editorType="dxTextArea" /> </DxItem> <DxItem itemType="group" caption="Contacts"> <DxItem dataField="Email" /> <DxItem dataField="Skype" /> </DxItem> </DxForm> </DxEditing> <DxColumn data-field="Full_Name" /> <DxColumn data-field="Prefix" /> <DxColumn data-field="Position" /> <DxColumn data-field="Duties" /> <DxColumn data-field="Email" /> <DxColumn data-field="Skype" /> </DxDataGrid></template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid, { DxColumn, DxEditing, DxForm } from 'devextreme-vue/data-grid';import { DxItem } from 'devextreme-vue/form';export default { components: { DxDataGrid, DxEditing, DxForm, DxItem }, data() { return { // ... } }}</script>React
App.js
import React from 'react';import 'devextreme/dist/css/dx.light.css';import DataGrid, { Column, Editing, Form} from 'devextreme-react/data-grid';import { Item } from 'devextreme-react/form';class App extends React.Component { render() { return ( <DataGrid ... > <Editing mode="form" allowUpdating={true}> <Form> <Item itemType="group" caption="Personal Data"> <Item dataField="Prefix" /> <Item dataField="Full_Name" /> <Item dataField="Position" /> <Item dataField="Duties" editorType="dxTextArea" /> </Item> <Item itemType="group" caption="Contacts"> <Item dataField="Email" /> <Item dataField="Skype" /> </Item> </Form> </Editing> <Column dataField="Prefix" /> <Column dataField="Full_Name" /> <Column dataField="Position" /> <Column dataField="Duties" /> <Column dataField="Email" /> <Column dataField="Skype" /> </DataGrid> ); }}export default App;Do not specify the following properties in the form object:
readOnly (use allowEditing instead)
template for items that have a dataField (use a column's editCellTemplate instead)
Any event handler (properties whose name starts with "on...")
Also, the colCount property defaults to 2, but it can be redefined. Refer to the following help topic for more information about form customization: Customize Edit Form.
Angular
NOTE
The nested component that configures the form property does not support event bindings and two-way property bindings.
Vue
NOTE
The nested component that configures the form property does not support event bindings and two-way property bindings.
If you need to customize an individual form item, use the formItem object.
View Demo
See Also
- Form Guides
mode
Specifies how a user edits data.
Type:
GridsEditMode
Default Value: 'row'
The following list points out the differences in editing modes.
Row
A user edits one row at a time. The UI component saves changes when the row leaves the editing state.View Demo
Batch
A user edits data cell by cell. The UI component does not save changes until a user clicks the global "Save" button.View Demo
Cell
Differs from the batch mode in that the UI component saves changes when the cell leaves the editing state.View Demo
Form
On entering the editing state, a row becomes a form with editable fields. The UI component saves changes after a user clicks the "Save" button.View Demo
Popup
Differs from the form mode in that the form with editable fields is placed in a popup window.View Demo
newRowPosition
Specifies a position for a new row.
Selector: new-row-position
Type:
NewRowPosition
Default Value: 'viewportTop'
View Demo
See Also
- editing.changes.insertBeforeKey
- editing.changes.insertAfterKey
popup
Configures the popup. Used only if editing.mode is "popup".
Selector: DxPopup
Type:
Popup Configuration
You can specify any Popup property in this object, but note that the following properties override the DataGrid's internal logic:
- contentTemplate
- fullScreen
- showTitle
- toolbarItems
The popup always contains a form whose items are used for editing. Use the form property to customize the form's items.
Angular
NOTE
The nested component that configures the popup property does not support event bindings and two-way property bindings.
Vue
NOTE
The nested component that configures the popup property does not support event bindings and two-way property bindings.
View Demo
refreshMode
Specifies operations that are performed after saving changes.
Selector: refresh-mode
Type:
GridsEditRefreshMode
Default Value: 'full'
The following table shows the operations that are performed after saving changes in different modes:
| Mode | Data reloading | Data processing operations1 | UI component repaint2 |
|---|---|---|---|
| full | + | + | + |
| reshape | - 3 | + (on the client) | + |
| repaint | - | - | + |
- Data processing operations include paging, filtering, sorting, grouping, and summary calculation (in the DataGrid).
- Set repaintChangesOnly to true to repaint only elements whose data changed.
- Set remoteOperations to false and cacheEnabled to true to avoid data reloading.
View Demo
NOTE
When the refreshMode is "reshape" or "repaint", the server should respond to the insert or update request by sending back the data item saved in the database. See the DataGridWebApiController tab in the CRUD Operations demo for an example of the server-side implementation. The InsertOrder and UpdateOrder actions illustrate this case.
selectTextOnEditStart
Specifies whether to select text in a cell when a user starts editing.
View Demo
See Also
- startEditAction
- editOnKeyPress
startEditAction
Specifies whether a single or double click should switch a cell to the editing state. Applies if editing.mode is "cell" or "batch".
Selector: start-edit-action
Type:
StartEditAction
Default Value: 'click'
View Demo
See Also
- keyboardNavigation.editOnKeyPress
texts
Contains properties that specify texts for editing-related UI elements.
Selector: DxTexts
Type: any
The following code shows the editing.texts declaration syntax:
jQuery
index.js
$(function() { $("#dataGridContainer").dxDataGrid({ // ... editing: { // ... texts: { deleteRow: "Remove" } } });});Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ... > <dxo-editing ... > <dxo-texts deleteRow="Remove"> </dxo-texts> </dxo-editing></dx-data-grid>
import { Component } from '@angular/core';@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css']})export class AppComponent { // ...}import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { DxDataGridModule } from 'devextreme-angular';@NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxDataGridModule ], providers: [], bootstrap: [AppComponent]})export class AppModule { }Vue
App.vue
<template> <DxDataGrid ... > <DxEditing ... > <DxTexts delete-row="Remove" /> </DxEditing> </DxDataGrid> </template><script>import 'devextreme/dist/css/dx.light.css';import DxDataGrid, { DxEditing, DxTexts} from 'devextreme-vue/data-grid';export default { components: { DxDataGrid, DxEditing, DxTexts }, data() { // ... }}</script>React
App.js
import React from 'react';import 'devextreme/dist/css/dx.light.css';import DataGrid, { Editing, Texts} from 'devextreme-react/data-grid';class App extends React.Component { render() { return ( <DataGrid ... > <Editing> <Texts deleteRow="Remove" /> </Editing> </DataGrid> ); }}export default App;useIcons
Specifies whether the edit column uses icons instead of links.
View Demo
Was this topic helpful?
Feel free toshare topic-related thoughts here.
Ifyou have technical questions, please create asupport ticket inthe DevExpress Support Center.
Thank you for the feedback!
