aspnetcore-405572-devextreme-based-controls-controls-card-view.md
Card View is a responsive grid that displays data in cards. It supports data editing with validation, search, filtering, layout customization, and more.
Run Demo: Card View Read Tutorial
The Card View UI Control is based on the DevExtreme Card View component.
To add this control to your project, follow instructions in the following help topics:
@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);
})
)
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);
}
}
}
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; }
}
}
Data Binding
Card View supports different data source types, including local and remote data stores.
Editing Operations
Card View allows users to add, update, and delete cards.
Adaptability
Card View 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 Card View data. The component also supports sorting by single or multiple fields and searching.
Selection
Card View 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 Card View column chooser. To reorder columns, rearrange column headers in the header panel.
Accessibility and Keyboard Navigation
Card View 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. Card View 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 Card View component, configure elements such as the toolbar, header panel, and pager.
InitializationCall the CardView() method to create a Card View control. This action initializes a CardViewBuilder<T> instance. Use the instance methods to specify Card View options and event handlers.OptionsFor a complete option list, see Options. For details on how to specify control options, refer to the following help topic: Specify Options.EventsFor available events, see Events. For details on how to handle events, refer to the following help topic: Handle Events and Define Callbacks.
OptionsIf you need to specify the Card View options dynamically on the client side, use client-side API. For a complete option list, see DevExtreme Card View options.MethodsFor a list of available methods, see DevExtreme CardView methods. For details on how to call methods, refer to the following help topic: Call Methods.
For more information on Card View accessibility compliance, refer to the following help topic: Accessibility.