[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [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
  [Expand]Tree List
  [Collapse]Card View
    Overview - CardView
    Main Features - Card View
    [Collapse]Binding to Data
      Binding to Data via Entity Framework (Code First)
      Binding to Data via Entity Framework or LINQ to SQL (Database First)
      Binding to Large Data (Database Server Mode)
     [Collapse]Custom Data Binding
       Custom Data Binding - Overview
       Action Types and Passed Parameters
       Methods to Update the CardView State in Actions
       ProcessCustomBinding - Available Binding Delegates
       Implementation of Typed Method Delegates
       Custom Binding Limitations
    [Expand]Data Representation Basics
    [Expand]Focus and Navigation
    [Expand]Data Editing and Validation
   [Expand]Member Tables
   [Expand]Visual Elements
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors Extensions
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Extensions
  [Expand]Query Builder
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Custom Data Binding - Overview

The CardView supports custom data binding that allows you to provide the extension with data manually. In this custom data binding mode, you have full control of and responsibility for populating the CardView with the required data each time the extension requests it.


The Custom Data Binding mode was specially designed for working with a large data volume and handling all data shaping operations manually (e.g., it is impossible to use the built-in Linq/Entity Framework capabilities for some reason).

If there are no strict requirements to use Custom Data Binding, using one of the following data binding modes is recommended.

In brief, this mode requires that you manually populate a CardView-specific view model with the portion of data that needs to be currently displayed within the extension. You can accomplish this by performing the following steps.

  • Define Handling Actions
    In addition to a standard handling Action defined using the GridSettingsBase.CallbackRouteValues, use the CardViewSettings.CustomBindingRouteValuesCollection to specify additional Actions to handle all or particular data operations (pageing, filtering, sorting), depending on which functionality is used in your CardView. Data operations are identified by the CardViewOperationType enumeration values.

  • Obtain/Update CardView State
    In Actions, use the CardViewExtension.GetViewModel static method to obtain the extension's view model, which is a specific CardViewModel object designed to maintain the CardView state and provide a means to populate itself with data. By default, the view model obtained within Actions contains the previous state of the CardView. If required, update this state with the state information that relates to the processed operation and is automatically passed to an Action as a parameter. (For instance, this state can be a column state (CardViewColumnState) that contains information on which column is sorted and in which direction/order, or a pager state (CardViewPagerState) that determines which page is selected.)

  • Delegate Model Population
    Within a Controller, use the CardView view model that contains the up-to-date CardView state and call its CardViewModel.ProcessCustomBinding method to delegate the implementation of a model population to certain Model-layer functions specified with method parameters.

  • Implement Model Population
    At the Model layer, implement certain delegates, which are pointed to by the CardViewModel.ProcessCustomBinding method's parameters to populate the CardView view model with a portion of the currently required data.

  • Bind the CardView to the Populated Model
    In a Controller, pass the populated view model object as a Model to the CardView's Partial View. In the Partial View, bind the extension to the passed Model by using the CardViewExtension.BindToCustomData method.


When implementing the CardView's custom data binding, the DevExpressEditorsBinder must be used instead of the default model binder to correctly transfer values from DevExpress editors back to the corresponding data model fields. See the Binding to Model section in the Binding Data Editors to Data topic for more details on how to specify DevExpressEditorsBinder as a model binder.

These steps are described in greater detail below. You can refer to the corresponding online demo to see this scenario in action.

Expanded Define Handling Actions

To associate a CardView data operation type with a handling Action method, populate the extension's specific route values collection available using the CardViewSettings.CustomBindingRouteValuesCollection property. Register each data operation that you need to handle by adding a specific item to the collection. Within an item, identify a data operation and specify a handling method by providing its Controller and Action names.

Partial View Code:

Refer to the Action Types and Passed Parameters topic to learn more about available data operation types.

Expanded Obtain/Update CardView State

In each specified Action, you can obtain both the previous state of the CardView (the state the CardView had before an end-user performed the currently processed data operation) and the information (state) specific to the currently processed operation (for instance, information about the applied paging or sorted column). The CardView's previous state can be obtained as a CardView view model object (CardViewModel) by making a call to the static CardViewExtension.GetViewModel method. The currently processed data operation's state is automatically passed to each Action as its parameter(s). You can update the CardView view model object, maintaining the previous CardView state with the state of the currently processed operation to update the CardView state. Then, the updated CardView view model should be processed to populate it with the required data (see the next item for details).

Controller Code:

Refer to the Action Types and Passed Parameters topic to learn more on operation-specific parameters passed to handling Actions automatically.
See the Methods to Update the CardView State in Actions topic for a list of methods the CardViewModel exposes to update the CardView state.

Expanded Delegate Model Population

Given the CardView view model, call its CardViewModel.ProcessCustomBinding method to delegate the implementation of model population to certain Model-layer functions specified with method parameters. The CardViewModel.ProcessCustomBinding method has several overloads. You can select one depending on which data operations you need to handle.

Controller Code:
Sample Model Code:

Refer to the ProcessCustomBinding - Available Binding Delegates topic to learn more about the CardViewModel.ProcessCustomBinding method.

Expanded Implement Model Population

At the Model layer, provide implementation for the specified method delegates according to your application needs and domain layer logic. Use arguments available through the e parameter of method delegates to obtain operation-related information and to supply the model with the required data.

Model Code:

Refer to the Implementation of Typed Method Delegates topic to learn more about the available arguments and the implementation of method delegates.

Expanded Bind the CardView to the Populated Model

The resulting populated CardView view model object should be returned as a Model to a Partial View that contains the CardView markup. To bind the CardView to this view model, use the CardViewExtension.BindToCustomData method within the extension's Partial View.

Controller Code:
Partial View Code:

Expanded See Also

Is this topic helpful?​​​​​​​