Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Expand]ASP.NET WebForms Controls
 [Collapse]ASP.NET MVC Extensions
  [Expand]Product Information
  [Expand]Getting Started
  [Expand]Common Concepts
  [Expand]Grid View
  [Collapse]Card View
    Overview - CardView
    Main Features - Card View
   [Collapse]Concepts
    [Expand]Binding to Data
    [Expand]Data Representation Basics
    [Expand]Focus and Navigation
    [Collapse]Data Editing and Validation
      Data Editing
      Edit Modes
      Edit Form
      Batch Edit Mode
      Initializing New Cards
      Validation
  [Expand]Vertical Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]HTML Editor
  [Expand]Image and Data Browsing
  [Expand]Docking and Popups
  [Expand]Navigation and Layout Extensions
  [Expand]File Management
  [Expand]Multi-Use Site Extensions
  [Expand]Charts
  [Expand]Pivot Grid
  [Expand]Scheduler
  [Expand]Tree List
  [Expand]Data Editor Extensions
  [Expand]Report Extensions
  [Expand]SpellChecker
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Batch Edit Mode

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.

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

Expanded 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
    MVCxGridBatchUpdateValues<T, S>.DeleteKeys Contains a list of keys that correspond to grid records deleted on the client side in batch edit mode.
    MVCxGridBatchUpdateValues<T, S>.EditorErrors Provides an access to the dictionary of data source items and the corresponding ModelStateDictionary items.
    MVCxGridBatchUpdateValues<T, S>.Insert Contains a list of objects that are the grid records added on the client side in batch edit mode.
    MVCxGridBatchUpdateValues<T, S>.Update Contains a list of grid 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"):

  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"):

  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"):

Expanded Appearance Customization

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

Expanded Batch Edit Mode Limitations

Expanded See Also

How would you rate this topic?​​​​​​​