Card View - Field Template

Field templates allow you to display custom content for field elements. Use the fieldTemplate property to configure these templates.

This demo uses field templates to customize the appearance of 'Priority', 'Assigned to', and 'Completed' fields. It also adds custom card headers with cardHeader.template.

Backend API

@model IEnumerable<DevExtreme.NETCore.Demos.Models.CardView.EmployeeTask> @using DevExtreme.NETCore.Demos.Models.SampleData; @(Html.DevExtreme().CardView() .DataSource(Model) .CardHeader(ch => { ch.Visible(true); ch.Template(new JS("headerTemplate")); }) .CardsPerRow(Mode.Auto) .CardMinWidth(240) .Paging(p => p.PageSize(12)) .Columns(c => { c.Add().DataField("Task_Priority") .FieldValueTemplate(@<text> <div> <div class="task__priority task__priority--<%- field.value.toLowerCase() %>"> <div class="task__indicator"></div> <div><%- field.value %></div> </div> </div> </text>); c.Add().DataField("Task_Start_Date") .Caption("Start Date") .DataType(GridColumnDataType.Date); c.Add().DataField("Task_Due_Date") .Caption("End Date") .DataType(GridColumnDataType.Date); c.Add().DataField("Task_Assigned_Employee_ID") .Caption("Assigned to") .FieldValueTemplate(@<text> <button class="task__link-button"><%- getEmployee(field.value).Name %></button> </text>); c.Add().DataField("Task_Status") .Caption("Status"); c.Add().DataField("Task_Completion") .FieldTemplate(@<text> <div class="task__progress"> @(Html.DevExtreme().ProgressBar() .ElementAttr("aria-label", "Progress Bar") .StatusFormat(new JS("getRatioFormat")) .OnContentReady("(e) => onProgressBarContentReady(e, field.value)") ) </div> </text>); }) ) <script> let employees = @Html.Raw(System.Text.Json.JsonSerializer.Serialize(SampleData.CardViewTaskEmployees)); const headerTemplate = (data, container) => { const text = data.card.data.Task_Subject; $(container).addClass('task__header-container'); return $('<div>') .addClass('task__header') .attr('title', text) .text(text); }; const getEmployee = (employeeID) => { return employees.find(e => e.ID === employeeID); } const onProgressBarContentReady = (e, value) => { e.component.option("value", value); } const getRatioFormat = (_, value) => { return `${ value }%`; } </script>

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 FieldTemplate() { return View(SampleData.CardViewTasks); } } }

.task__header { padding: 18px 24px; font-size: 16px; font-weight: 700; line-height: 20px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .task__priority { display: flex; align-items: center; } .task__priority--low { color: var(--dx-color-success); } .task__priority--normal { color: var(--dx-color-primary); } .task__priority--urgent { color: #f7630c; } .task__priority--high { color: var(--dx-color-danger); } .task__indicator { background-color: currentcolor; margin-right: 8px; border-radius: 50%; height: 12px; width: 12px; } .task__progress { padding-top: 4px; } .task__header-container { width: 100%; } .task__link-button { background: none; border: none; padding: 0; color: var(--dx-color-link); text-decoration: underline; cursor: pointer; font: inherit; }