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

Data Editing

The ASP.NET MVC CardView provides a built-in data editing functionality. This topic describes how to enable data editing operations within the CardView.

Note

Requirements.

To follow the steps described in this topic, you will need a data-bound CardView extension in your project.

Expanded Enabling Data Editing within the CardView

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

  1. Add the controller action method that will add new records to a data source.

    This controller action method obtains a newly added object as a parameter. The action method should implement the functionality to add a new record and return the CardView's Partial View.

    Controller code ("HomeController"):

  2. Add the controller action method that will save the updated records to a data source.

    This controller action method obtains an edited object as a parameter. The action method should implement the functionality to update records and return the CardView's Partial View.

    Controller code ("HomeController"):

  3. Add the controller action method that will delete existing records from a data source.

    This controller action method obtains the key value of the record to delete. The action method should implement the functionality to delete records and return the CardView's Partial View.

    Controller code ("HomeController"):

  4. 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 values to the action methods (created above), which will handle CardView callbacks for adding, updating and deleting records.

    Partial View code ("_CardViewPartial"):

  5. Add the command layout item and the required buttons.

    To allow end-users to manipulate CardView data, add the CardView's command layout item in the MVCxCardViewFormLayoutProperties.Items collection with the MVCxCardViewLayoutItemCollection.AddCommandItem method. Add the required command buttons (New, Edit, Delete) using the corresponding properties.

    Partial View code ("_CardViewPartial"):

    Note that in addition to the built-in edit form, you can add, edit and delete CardView records using the CardView's client-side API.

Expanded Editing CardView via the Client-Side API

CardView provides a full-featured client-side API that allows you to manipulate the edit form via JS code. The table below lists the available data editing-related methods.

Method Description
ASPxClientCardView.AddNewCard (via MVCxClientCardView.AddNewCard) Adds a new record.
ASPxClientCardView.StartEditCard (via MVCxClientCardView.StartEditCard) Opens an edit form for editing a specified row.
ASPxClientCardView.StartEditCardByKey (via MVCxClientCardView.StartEditCardByKey) Opens an edit form for editing a row with the specified key.
ASPxClientCardView.SetEditValue (via MVCxClientCardView.SetEditValue) Sets the value of the specified edit cell.
ASPxClientCardView.IsNewCardEditing (via MVCxClientCardView.IsNewCardEditing) Indicates whether or not a new card is being edited.
ASPxClientCardView.IsEditing (via MVCxClientCardView.IsEditing) Indicates whether or not the CardView extension is in edit mode.
ASPxClientCardView.UpdateEdit (via MVCxClientCardView.UpdateEdit) Saves all changes made and switches the CardView extension to browse mode.
ASPxClientCardView.CancelEdit (via MVCxClientCardView.CancelEdit) Cancels all changes made and switches the CardView extension to browse mode.
ASPxClientCardView.DeleteCard (via MVCxClientCardView.DeleteCard) Deletes the specified card.
ASPxClientCardView.DeleteCardByKey (via MVCxClientCardView.DeleteCardByKey) Deletes a card with the specified key value.

Example

In this example, the ASPxClientCardView.CardDblClick (via MVCxClientCardView.CardDblClick) client-side event is handled to switch the CardView to edit mode by double-clicking a data row. The event handler calls the ASPxClientCardView.StartEditCard (via MVCxClientCardView.StartEditCard) method. This method receives the visible index of the double-clicked card and invokes an edit form.

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