Change Theme Settings
Change Theme Settings
Show All Themes

Batch Editing

Product Name 
Quantity Per Unit 
Unit Price 
Units In Stock 
Inserted values
Updated values
Deleted values
DeleteChaiBeverages10 boxes x 20 bags$18.0039
DeleteChangBeverages24 - 12 oz bottles$19.0017
DeleteAniseed SyrupCondiments12 - 550 ml bottles$10.0013
DeleteChef Anton's Cajun SeasoningCondiments48 - 6 oz jars$22.0053
DeleteChef Anton's Gumbo MixCondiments36 boxes$21.350
DeleteGrandma's Boysenberry SpreadCondiments12 - 8 oz jars$25.00120
DeleteUncle Bob's Organic Dried PearsProduce12 - 1 lb pkgs.$30.0015
DeleteNorthwoods Cranberry SauceCondiments12 - 12 oz jars$40.006
DeleteMishi Kobe NikuMeat/Poultry18 - 500 g pkgs.$97.0029
DeleteIkuraSeafood12 - 200 ml jars$31.0031
Preview changes
Save changes
Cancel changes
Apply Changes

The DevExpress ASP.NET MVC Data Grid (GridView) control allows you to edit and update multiple grid rows on the client side and send them to the server in a single request.

Set the SettingsEditing.Mode property to 'Batch' to enable batch edit mode. In this mode, an end user uses in-line editors to edit grid data. The grid highlights the modified cells in green and deleted rows in gray. This grid also displays the "Recover" button for deleted rows. To hide the deleted rows, set the SettingsEditing.BatchEditSettings.HighlightDeletedRows property to false.

If a grid contains modified data, it displays a confirmation message before a grid performs a postback or a callback. The KeepChangesOnCallbacks property specifies whether the grid supports callbacks and allows you to use the 'Preview changes' button to preview and modify inserted, deleted and edited rows before you click 'Update'.

You can use the following properties to customize the batch edit mode settings:

  • The EditMode - Specifies which control element (data cell or data row) end users can use to edit data (the "Edit mode" combo box).
  • The StartEditAction - Specifies which action invokes a data cell's in-line editor (the "Start edit action" combo box).

The GridView validates user-input on the client-side based on the data annotation attributes of your Model. This approach is also called unobtrusive client validation. To enable the unobtrusive validation, the partial View with the GridView extension is placed inside the HTML <form> element (rendered via the Html.BeginForm helper). The Partial View with the GridView extension contains two helpers that enable the unobtrusive client validation: Html.EnableClientValidation and Html.EnableUnobtrusiveJavaScript. An error is displayed next to the individual data editors.

Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Components Installer
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher)
Open CS Solution
The source code files for this demo are installed (by default) in the following directory:
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxGridViewDemos