Your search did not match any results.

Card View - Overview

The DevExtreme CardView component allows you to display business data using a 'card' UI metaphor — a visually engaging alternative to traditional grid views. Use it for employee directories, contact lists, product catalogs, or task boards.

To get started with the CardView component, refer to the following step-by-step tutorial: Getting Started with CardView.

For a complete overview of CardView options, refer to the CardView API Reference.

Backend API
@using DevExtreme.NETCore.Demos.Models.CardView.Overview @model IEnumerable<Employee> @(Html.DevExtreme().CardView<Employee>() .ID("cardView") .DataSource(Model, "ID") .CardMinWidth(300) .CardsPerRow(Mode.Auto) .Paging(p => p.PageSize(4)) .CardCover(cc => { cc .ImageExpr(new JS("cardCoverImageExpr")) .AltExpr(new JS("cardCoverAltExpr")); }) .Columns(c => { c.AddFor(m => m.Status) .FieldValueTemplate(@<text> <div class="<%- getStatusClass(field.value) %> status"> <div class="indicator"></div> <div><%- field.value %></div> </div> </text>) .AllowSearch(false); c.Add() .Caption("Full Name") .CalculateFieldValue("calculateFullName") .AllowFiltering(true); c.AddFor(m => m.Title).Caption("Position"); c.AddFor(m => m.Department); c.AddFor(m => m.Mobile_Phone); c.AddFor(m => m.Email) .FieldValueTemplate(@<text> <a href="mailto:<%- field.value %>"><%- field.text %></a> </text>) .AllowSearch(false); c.Add() .Caption("Address") .CalculateFieldValue("calculateAddress") .AllowFiltering(true); }) .CardFooterTemplate(@<text> <div class="card-footer"> @(Html.DevExtreme().Button() .Text("Call") .Icon("tel") .Type("default") .StylingMode(ButtonStylingMode.Contained) .OnClick("onCallButtonClick") ) @(Html.DevExtreme().Button() .Text("Send Email") .Icon("message") .Type("default") .StylingMode(ButtonStylingMode.Contained) .OnClick("onSendEmailButtonClick") ) </div> </text>) .Selection(s => s.Mode(SingleMultipleOrNone.Multiple)) .HeaderFilter(hf => hf.Visible(true)) .SearchPanel(sp => sp.Visible(true)) ) <script> function cardCoverImageExpr({ First_Name, Last_Name }) { return `@Url.Content("~/images/employees/new")/${First_Name} ${Last_Name}.jpg`; } function cardCoverAltExpr({ First_Name, Last_Name }) { return `Photo of ${First_Name} ${Last_Name}`; } function calculateFullName(data) { return `${data.First_Name} ${data.Last_Name}`; } function calculateAddress(data) { return `${data.City}, ${data.State}`; } function onCallButtonClick() { DevExpress.ui.notify({ message: 'The "Call" button is clicked.', maxWidth: 560, }); } function onSendEmailButtonClick() { DevExpress.ui.notify({ message: 'The "Send Email" button is clicked.', maxWidth: 560, }); } function getStatusClass(value) { const classNameMap = { "Salaried": "status--salaried", "Commission": "status--commission", "Terminated": "status--terminated", }; return classNameMap[value]; } </script>
using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using DevExtreme.NETCore.Demos.Models.CardView.ColumnChooser; using DevExtreme.NETCore.Demos.Models.CardView.ColumnHeaderFilter; using DevExtreme.NETCore.Demos.Models.CardView.ColumnReordering; using DevExtreme.NETCore.Demos.Models.CardView.DataValidation; using DevExtreme.NETCore.Demos.Models.CardView.FilterPanel; using DevExtreme.NETCore.Demos.Models.CardView.Overview; using DevExtreme.NETCore.Demos.Models.CardView.PopupEditing; using DevExtreme.NETCore.Demos.Models.CardView.SearchPanel; using DevExtreme.NETCore.Demos.Models.CardView.Selection; using DevExtreme.NETCore.Demos.Models.CardView.SimpleArray; using DevExtreme.NETCore.Demos.Models.CardView.Sorting; using DevExtreme.NETCore.Demos.Models.SampleData; namespace DevExtreme.NETCore.Demos.Controllers { public class CardViewController : Controller { public ActionResult Overview() { return View(OverviewSampleData.Employees); } } }
.card-footer { display: flex; padding: 12px; gap: 8px; } .card-footer > * { flex-grow: 1; width: 100% } .status { display: flex; align-items: center; } .status--salaried { color: var(--dx-color-success); } .status--commission { color: #f7630c; } .status--terminated { color: var(--dx-color-danger); } .indicator { background-color: currentcolor; margin-right: 8px; border-radius: 50%; height: 12px; width: 12px; }

DevExtreme CardView ships with the following built-in data management options:

  • Sorting
  • Paging
  • Column reordering
  • Column visibility control
  • Editing
  • Filtering
  • Searching
  • Data selection

Each card within the CardView is customizable.