aspnetmvc-16147-components-grid-view-data-editing-and-validation-batch-edit.md
Note
Starting from v18.2, the GridView supports callbacks in batch edit mode.
The ASP.NET MVC GridView extension allows you to modify a batch of grid data on the client side and send it to the server in a single request. This topic describes how to enable batch data editing operations within your GridView. It also provides an overview of batch edit, together with a description of its limitations.
In batch edit mode, grid data contained in a page can be edited using in-line editors. All user changes are maintained on the client side until either the Save changes button is clicked or all changes are canceled by clicking the Cancel changes button.
To prevent an end-user from editing column cells, set the column’s GridColumnEditFormSettings.Visible property to false (using MVCxGridViewColumn .EditFormSettings.Visible ). In this case, the column cells cannot be switched to edit mode. When an end-user navigates through cells using the TAB key, the column’s cells are skipped.
If a grid contains unsaved data, it displays a “confirm” message before a grid callback is performed. The following list provides confirmation window settings.
| Property (MVC) | Property (Web Forms) | Description |
|---|---|---|
| GridViewSettings.SettingsText .ConfirmOnLosingBatchChanges | ASPxGridTextSettings.ConfirmOnLosingBatchChanges | Specifies the confirmation message text. |
| GridViewSettings.SettingsEditing .BatchEditSettings.ShowConfirmOnLosingChanges | GridBatchEditSettings.ShowConfirmOnLosingChanges | Specifies whether to display the confirmation window. |
The GridViewBatchEditSettings.EditMode property (using GridViewSettings.SettingsEditing .BatchEditSettings.EditMode ) allows you to specify which control element (data cell or data row) is used to edit data.
You can enable batch editing operations within the GridView in the following way.
Add a controller action method that will implement the following data record operations: add new records , save updated records and delete existing records within a data source.
Define the callback route values within the PartialView.
Enable the command column and command items.
Preview changes before saving
You can preview and modify inserted, deleted and edited rows before you click the “Update” button and the control sends these changes to the server.
Set the GridViewBatchEditSettings.KeepChangesOnCallbacks property to true to show the “Show changes” button. This button allows you to display modified rows grouped by user operation type (delete, add, edit) and modify them. The “Save changes” or “Cancel changes” buttons allow you to end batch editing and save/cancel changes. To close the Changes Preview mode and display all grid rows (including modified ones), click “Hide changes”.
@Html.DevExpress().GridView(settings => {
settings.Name = "gridView";
settings.KeyFieldName = "ProductID";
...
settings.SettingsEditing.BatchEditSettings.KeepChangesOnCallbacks = true;
...
}).Bind(Model).GetHtml()
By default, the grid displays only command items that allow you to edit data when the grid is in Changes Preview mode:
To display other command items (including custom and templated items) in Changes Preview mode, set a command item’s VisibleInBatchEditPreviewChanges property to true.
@(Html.DevExpress().GridView<EditableProduct>(settings => {
settings.Name = "grid";
settings.Toolbars.Add(tb => {
tb.Enabled = true;
tb.Items.Add(i => {
i.Text = "Export to PDF";
i.Name = "CustomExportToPDF";
i.VisibleInBatchEditPreviewChanges = true;
});
...
});
}).Bind(Model).GetHtml())
To customize the grid in Changes Preview mode, you can override the .dxgvBECP CSS class.
Note
The GridView supports adaptivity in Preview Changes mode.
View Example: How to cancel editing conditionally in batch edit mode
View Example: How to calculate values dynamically in batch edit mode
View Example: Implement cascading combo boxes in batch edit mode
You can customize the visual presentation of modified data items using the following settings available through the GridViewSettings.Styles property.
The grid stores the Update and Cancel buttons within its status bar. Use the status bar ‘s style settings to control these buttons appearance.
The following code snippets illustrate how to hide the Update and Cancel buttons.
Using the ASPxGridSettings.ShowStatusBar property.
Modifying the grid’s dxgvStatusBar CSS class.
View Example: How to implement custom buttons in the status bar in batch edit mode
There are features and API members of the GridView extension control are not in effect in batch edit mode, since all user changes are maintained on the client side.
Unsupported features
The features below are not supported when the grid is in batch edit mode.
Unsupported server-side API
The following server-side events are not in effect when the grid is in batch edit mode.
The ValidationSettings.SetFocusOnError property has no effect because errors are handled at the row/cell level. Use the GridBatchEditSettings.AllowEndEditOnValidationError property to keep the editor focused until an end-user inputs the correct value. For more information on validating grid data in batch edit mode, refer to the following topic: Validation in batch edit mode.
See Also