Batch Edit Mode

• Jul 15, 2024
• 5 minutes to read

The ASP.NET MVC CardView extension allows you to perform batch editing operations of CardView 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 CardView. It also provides an overview of batch editing, as well as its limitations.

• Overview
• Enabling Batch Data Editing in the CardView
• Batch Edit Mode Limitations

Overview

In batch editing mode, you can edit the CardView data contained on a page using in-line editors. All user changes are maintained on the client side before the user clicks the Save changes button. To cancel all changes, click the Cancel changes button.

Note

Since data modification is performed on the client side in batch edit mode, the server-side ASPxCardView.StartEdit (via MVCxCardView.StartEdit) and ASPxCardView.AddNewCard (via MVCxCardView.AddNewCard) methods are not in effect. Additionally, the client-side ASPxClientCardView.AddNewCard (via MVCxClientCardView.AddNewCard) method does not perform a callback.

The CardViewBatchEditSettings.EditMode (via CardViewSettings.SettingsEditing.BatchEditSettings.EditMode) property allows you to specify which control element (Cell or Card) is used to edit the data.

Enabling Batch Data Editing in the CardView

You can enable batch editing operations within the CardView in the following way.

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 card view 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 card view records added on the client side in batch edit mode.
   MVCxBatchUpdateValues<T, S>.Update	Contains a list of card view data items updated on the client side in batch edit mode.

   The action method applies all changes obtained from the client side to the data source and returns the CardView’s Partial View.

   Controller code (“HomeController”):

   C#

   using System;
   using System.Linq;
   using System.Web.Mvc;
   using DevExpress.Web.Mvc;
   using MyProject.Models;
   
   namespace MyProject.Controllers
   {
       public class HomeController : Controller
       {
           public ActionResult Index()
           {
               return View();
           }
   
           MyProject.Models.Entities db = new MyProject.Models.Entities();
   
           [ValidateInput(false)]
           public ActionResult CardViewPartial()
           {
               var model = db.Customers;
               return PartialView("_CardViewPartial", model.ToList());
           }
           // Apply all changes made on the client side to a data source.
           [HttpPost, 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))
                   {
                       try
                       {
                           model.Add(customer);
                           db.SaveChanges();
                       }
                       catch (Exception e)
                       {
                           updateValues.SetErrorText(customer, e.Message);
                       }
                   }
               }
               // Update all edited values.
               foreach (var customer in updateValues.Update)
               {
                   if (updateValues.IsValid(customer))
                   {
                       try
                       {
                           var modelItem = model.FirstOrDefault(it => it.CustomerID == customer.CustomerID);
                           if (modelItem != null)
                           {
                               this.UpdateModel(modelItem);
                               db.SaveChanges();
                           }
                       }
                       catch (Exception e)
                       {
                           updateValues.SetErrorText(customer, e.Message);
                       }
                   }
               }
               // Delete all values that were deleted on the client side from the data source.
               foreach (var customerID in updateValues.DeleteKeys)
               {
                   try
                   {
                       var item = model.FirstOrDefault(it => it.CustomerID == customerID);
                       if (item != null) model.Remove(item);
                       db.SaveChanges();
                   }
                   catch (Exception e)
                   {
                       updateValues.SetErrorText(customerID, e.Message);
                   }
               }
               return PartialView("_CardViewPartial", model.ToList());
           }
       }
   }
   

2. Define the callback route values within the PartialView.

   Navigate to the Partial View that contains the CardView code. In the CardView settings, define the callback route value to the action method (see the previous step) that handles CardView callbacks for batch data modification. Set the ASPxCardViewEditingSettings.Mode (via CardViewSettings.SettingsEditing.Mode) property to Batch.

   Partial View code (“_CardViewPartial”):

   Razor

   @{
       var CardView = Html.DevExpress().CardView(settings => {
           settings.Name = "CardView";
           settings.CallbackRouteValues = new { Controller = "Home", Action = "CardViewPartial" };
           // Specify the route value to the action method that handles CardView callbacks for batch data modification.
           settings.SettingsEditing.BatchUpdateRouteValues = new { Controller = "Home", Action = "BatchEditingUpdateModel" };
           settings.SettingsEditing.Mode = CardViewEditingMode.Batch;
           // ...
       });
   }
   @CardView.Bind(Model).GetHtml()
   

3. Enable the command layout item and command buttons.

   To allow end-users to manipulate CardView data, add a command layout item to the CardView and specify which commands (New, Edit, Delete) end-users can use.

   Partial View code (“_CardViewPartial”):

   Razor

   @{
       var CardView = Html.DevExpress().CardView(settings =>
       {
           settings.Name = "myCardView";
           settings.CallbackRouteValues = new { Controller = "Home", Action = "CardViewPartial" };
           settings.SettingsEditing.BatchUpdateRouteValues = new { Controller = "Home", Action = "BatchEditingUpdateModel" };
           settings.SettingsEditing.Mode = CardViewEditingMode.Batch;
   
           settings.CardLayoutProperties.Items.AddCommandItem(i => {
               i.ShowNewButton = true;
               i.ShowDeleteButton = true;
               i.ShowEditButton = true;
           });
   
           settings.KeyFieldName = "CustomerID";
           settings.Columns.Add("CustomerID");
           settings.Columns.Add("CompanyName");
           settings.Columns.Add("ContactName");
           settings.Columns.Add("ContactTitle");
           settings.Columns.Add("Phone");
       });
   }
   @CardView.Bind(Model).GetHtml()
   

Appearance Customization

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

• CardViewStyles.BatchEditModifiedCell - Contains style settings for modified data cells.
• CardViewStyles.BatchEditNewCard - Contains style settings for newly added cards.
• CardViewStyles.BatchEditDeletedCard - Contains style settings for deleted cards.

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().CardView(settings => {
      ...
          settings.Settings.ShowStatusBar = GridViewStatusBarMode.Hidden;
      ...
      });
  }
  @grid.Bind(Model).GetHtml()
  

• Modifying the grid’s dxcvStatusBar CSS class.

  CSS

  .dxcvStatusBar {
      display: none;
  }
  

Batch Edit Mode Limitations

• Endless Paging mode is not supported.
• You cannot use the UploadControl to modify new row values in batch edit mode.