Vertical Grid Batch Editing

• Jul 15, 2024
• 5 minutes to read

The ASP.NET MVC VerticalGrid 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 VerticalGrid.

• Overview
• Enabling Batch Data Editing in the VerticalGrid

Overview

In batch editing mode, the grid data contained in a page can be edited using in-line editors. All user changes are maintained on the client side until the Save changes button is clicked, or all changes are canceled by clicking the Cancel changes button.

To prevent an end-user from editing row cells, set the row’s GridDataColumnSettings.ShowEditorInBatchEditMode property (using the MVCxVerticalGridRow.Settings.ShowEditorInBatchEditMode) to false. In this case, the row cells cannot be switched to edit mode. When an end-user navigates through cells using the TAB key, the row’s cells are skipped.

If a grid contains modified data, it displays a “confirm” message before a grid callback is performed. You can customize the message text using the ASPxGridTextSettings.ConfirmOnLosingBatchChanges property (using VerticalGridSettings.SettingsText.ConfirmOnLosingBatchChanges), or you can disable it by setting the GridBatchEditSettings.ShowConfirmOnLosingChanges property (using VerticalGridSettings.SettingsEditing.BatchEditSettings.ShowConfirmOnLosingChanges) to false.

Enabling Batch Data Editing in the VerticalGrid

You can enable batch editing operations within the VerticalGrid using the following steps.

1. 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.

   This controller action method obtains an MVCxGridViewBatchUpdateValues<T, S> object as a parameter. The MVCxGridViewBatchUpdateValues<T, S> object contains the following items.

   Item	Description
   MVCxBatchUpdateValues<T, S>.DeleteKeys	Contains a list of keys that correspond to grid records deleted on the client side in batch edit mode.
   MVCxBatchUpdateValues<T, S>.EditorErrors	Provides an access to the data source items’ dictionary and the corresponding ModelStateDictionary items.
   MVCxBatchUpdateValues<T, S>.Insert	Contains a list of objects that are the grid records added on the client side in batch edit mode.
   MVCxBatchUpdateValues<T, S>.Update	Contains a list of grid data items updated on the client side in batch edit mode.

   The action method should apply all changes obtained from the client side to the data source and return the VerticalGrid’s Partial View.

   Controller code (“HomeController”)

   C#

   using DevExpress.Web.Mvc;
   using MyProject.Models;
   using System;
   using System.Linq;
   using System.Web.Mvc;
   // ...
   
   namespace MyProject.Controllers {
       public class HomeController : Controller {
           MyProject.Models.Entities db = new MyProject.Models.Entities();
   
           public ActionResult Index() {
               return View();
           }
   
           public ActionResult VerticalGridPartial() {
               var model = db.Customers;
               return PartialView("_VerticalGridPartial", model.ToList());
           }
   
           // Apply all changes made on the client side to a data source. 
           [ValidateInput(false)]
           public ActionResult BatchEditingUpdateModel(MVCxGridViewBatchUpdateValues<Customer, object> updateValues) {
               var model = db.Customers;
               // Insert all added values. 
               foreach (var customer in updateValues.Insert) {
                   if (updateValues.IsValid(customer)) {
                       InsertCustomer(customer, updateValues);
                   }
               }
               // Update all edited values. 
               foreach (var customer in updateValues.Update) {
                   UpdateCustomer(customer, updateValues);
               }
               // Delete all values that were deleted on the client side from the data source. 
               foreach (string customerID in updateValues.DeleteKeys) {
                   DeleteCustomer(customerID, updateValues);
               }
               return PartialView("_VerticalGridPartial", model.ToList());
           }
   
           private void InsertCustomer(Customer customer, MVCxGridViewBatchUpdateValues<Customer, object> updateValues) {
               try {
                   db.Customers.Add(customer);
                   db.SaveChanges();
               }
               catch (Exception e) {
                   updateValues.SetErrorText(customer, e.Message);
               }
           }
   
           private void UpdateCustomer(Customer customer, MVCxGridViewBatchUpdateValues<Customer, object> updateValues) {
               if (updateValues.IsValid(customer)) {
                   try {
                       if (db.Customers.Any(it => it.CustomerID == customer.CustomerID) == true) {
                           db.Customers.Attach(customer);
                           db.Entry(customer).State = System.Data.Entity.EntityState.Modified;
                           db.SaveChanges();
                       }
                   }
                   catch (Exception e) {
                       updateValues.SetErrorText(customer, e.Message);
                   }
               }
           }
   
           private void DeleteCustomer(string customerID, MVCxGridViewBatchUpdateValues<Customer, object> updateValues) {
               try {
                   var item = db.Customers.FirstOrDefault(it => it.CustomerID == customerID);
                   if (item != null) db.Customers.Remove(item);
                   db.SaveChanges();
               }
               catch (Exception e) {
                   updateValues.SetErrorText(customerID, e.Message);
               }
           }
       }
   }
   

2. Define the callback route values within the PartialView.

   Navigate to the Partial View that contains the VerticalGrid code. In the grid settings, define the callback route value to the action method (see the previous step) that will handle grid callbacks for batch data modification. To enable batch editing, set the ASPxVerticalGridEditingSettings.Mode property (using VerticalGridSettings.SettingsEditing.Mode) to Batch.

   Partial View code (“_VerticalGridPartial”):

   Razor#

   @Html.DevExpress().VerticalGrid(
       settings => {
           settings.Name = "myVerticalGrid";
           settings.CallbackRouteValues = new { Controller = "Home", Action = "VerticalGridPartial" };
           // Specify the route value to the action method that will handle VerticalGrid callbacks for batch data modification. 
           settings.SettingsEditing.BatchUpdateRouteValues = new { Controller = "Home", Action = "BatchEditingUpdateModel" };
           settings.SettingsEditing.Mode = VerticalGridEditMode.Batch;
           // ...
       }).Bind(Model).GetHtml()
   

3. Enable the command row and command items.

   To allow end-users to manipulate grid data, add a command row to the grid’s column collection and specify which commands (New, Delete) can be used by end-users.

   Partial View code (“_VerticalGridPartial”)

   Razor

   @Html.DevExpress().VerticalGrid(
       settings => {
           settings.Name = "myVerticalGrid";
           settings.CallbackRouteValues = new { Controller = "Home", Action = "VerticalGridPartial" };
           settings.SettingsEditing.BatchUpdateRouteValues = new { Controller = "Home", Action = "BatchEditingUpdateModel" };
           settings.SettingsEditing.Mode = VerticalGridEditMode.Batch;
   
           settings.CommandRow.Visible = true;
           settings.CommandRow.ShowNewButton = true;
           settings.CommandRow.ShowDeleteButton = true;                
   
           settings.KeyFieldName = "CustomerID";
           settings.Rows.Add("CustomerID");
           settings.Rows.Add("CompanyName");        
           settings.Rows.Add("ContactName");
           settings.Rows.Add("ContactTitle");
           settings.Rows.Add("Phone");
       }).Bind(Model).GetHtml()
   

Appearance Customization

You can customize the visual presentation of modified data items using the following settings available through the VerticalGridSettings.Styles property.

• VerticalGridStyles.BatchEditModifiedCell, VerticalGridDataRow.BatchEditModifiedCellStyle - Contain style settings for modified data cells.
• VerticalGridStyles.BatchEditNewRecord - Contains style settings for newly added data records.
• VerticalGridStyles.BatchEditDeletedRecord - Contains style settings for deleted data records.

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.

  ASPX

  @{
      var grid = Html.DevExpress().VerticalGrid(settings => {
      ...
          settings.Settings.ShowStatusBar = GridViewStatusBarMode.Hidden;
      ...
      });
  }
  @grid.Bind(Model).GetHtml()
  

• Modifying the grid’s dxvgStatusBar CSS class.

  CSS

  .dxvgStatusBar {
      display: none;
  }
  

Batch Edit Mode Limitations

• You cannot use the UploadControl to modify new row values in batch edit mode.