CardView

• Sep 19, 2025
• 4 minutes to read

CardView is a responsive grid that displays data in cards. It supports data editing with validation, search, filtering, layout customization, and more.

Run Demo: CardView Read Tutorial

Getting Started

The CardView UI Control is based on the DevExtreme CardView component.

To add this control to your project, follow instructions in the following help topics:

• Configure a Visual Studio Project or Configure a non Visual Studio Project
• Add Controls to a Project
• Razor Syntax

Basic Syntax

CardViewBasics.cshtml

@using ASP.NET_Core.Models.CardView
@model IEnumerable<SampleOrder>

@(Html.DevExtreme().CardView<SampleOrder>()
    .DataSource(Model)
    .KeyExpr("OrderID")
    .Columns(c => {
        c.AddFor(m => m.CustomerID);
        c.AddFor(m => m.OrderDate);
        c.AddFor(m => m.ShipCountry);
        c.AddFor(m => m.ShipCity);
        c.AddFor(m => m.CustomerName);
    })
)

CardViewController.cs

using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
using ASP.NET_Core.Models.CardView;

namespace ASP_NET_Core.Controllers {
    public class CardViewController : Controller {
        public IActionResult GettingStarted() {
            var model = new List<SampleOrder>() {
                new SampleOrder {
                    OrderID = 10248,
                    OrderDate = new DateTime(1996, 7, 4),
                    ShipCountry = "France",
                    ShipCity = "Reims",
                    CustomerName = "Paul Henriot"
                },
                new SampleOrder {
                    OrderID = 10249,
                    OrderDate = new DateTime(1996, 7, 5),
                    ShipCountry = "Germany",
                    ShipCity = "Münster",
                    CustomerName = "Karin Josephs"
                },
                new SampleOrder {
                    OrderID = 10250,
                    OrderDate = new DateTime(1996, 7, 8),
                    ShipCountry = "Brazil",
                    ShipCity = "Rio de Janeiro",
                    CustomerName = "Mario Pontes"
                }
            };

            return View(model);
        }
    }
}

CardViewModels.cs

using System;

namespace ASP.NET_Core.Models.CardView {
    public class SampleOrder {
        public int OrderID { get; set; }
        public DateTime OrderDate { get; set; }
        public string CustomerID { get; set; }
        public string CustomerName { get; set; }
        public string ShipCountry { get; set; }
        public string ShipCity { get; set; }
    }
}

Built-in Capabilities and Configuration Guides

• Data Binding
  CardView supports different data source types, including local and remote data stores.

• Editing Operations
  CardView allows users to add, update, and delete cards.

• Adaptability
  CardView supports screens of all sizes. To adapt the component to your needs, you can specify maximum/minimum card widths and the number of cards per row.

• Filtering, Sorting, and Searching
  You can configure header filters or the filter panel to allow users to filter CardView data. The component also supports sorting by single or multiple fields and searching.

• Selection
  CardView supports single and multiple card selection. You can enable selection options such as checkboxes and selection of all cards.

• Column Hiding and Reordering
  You can change column visibility in the CardView column chooser. To reorder columns, rearrange column headers in the header panel.

• Accessibility and Keyboard Navigation
  CardView conforms to WCAG 2.x, European Accessibility Act (EAA), and Americans with Disabilities Act (ADA) standards. The component supports keyboard navigation and custom key handlers. CardView also ships with right-to-left (RTL) representation support.

• Card Customization
  You can customize the appearance of card visual elements such as the cover, header, footer, and content. To implement further customizations, you can specify a card template.

• Component Customization
  To customize the appearance and functionality of the CardView component, configure elements such as the toolbar, header panel, and pager.

API

Server-Side API

Initialization

Call the CardView() method to create a CardView control. This action initializes a CardViewBuilder<T> instance. Use the instance methods to specify CardView options and event handlers.

Options

For a complete option list, see Options. For details on how to specify control options, refer to the following help topic: Specify Options.

Events

For available events, see Events. For details on how to handle events, refer to the following help topic: Handle Events and Define Callbacks.

Client-Side API

Options

If you need to specify the CardView options dynamically on the client side, use client-side API. For a complete option list, see DevExtreme CardView options.

Methods

For a list of available methods, see DevExtreme CardView methods. For details on how to call methods, refer to the following help topic: Call Methods.

Accessibility

For more information on CardView accessibility compliance, refer to the following help topic: Accessibility.

Demos

Run Demo: CardView