JavaScript/jQuery 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.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

$(() => { $('#card-view').dxCardView({ dataSource: tasks, cardsPerRow: 'auto', cardMinWidth: 240, paging: { pageSize: 12, }, cardHeader: { visible: true, template: (data, container) => { const text = data.card.data.Task_Subject; $(container).addClass('task__header-container'); return $('<div>') .addClass('task__header') .attr('title', text) .text(text); }, }, columns: [ { dataField: 'Task_Priority', caption: 'Priority', fieldValueTemplate({ field: { value } }) { const priority = priorities.find(p => p.id === value); return $('<div>').append( $('<div>').addClass('task__indicator') ) .append( $('<div>').text(priority.text) ) .addClass('task__priority') .addClass(`task__priority--${priority.postfix}`); } }, { dataField: 'Task_Start_Date', caption: 'Start Date', dataType: 'date', }, { dataField: 'Task_Due_Date', caption: 'End Date', dataType: 'date', }, { dataField: 'Task_Assigned_Employee_ID', caption: 'Assigned to', fieldValueTemplate({ field: { value }}) { return $('<button>') .addClass('task__link-button') .text(employees.find(e => e.ID === value).Name); } }, { dataField: 'Task_Status', caption: 'Status', }, { dataField: 'Task_Completion', caption: 'Completed', fieldTemplate({ field: { value }}) { return $('<div>') .addClass('task__progress') .dxProgressBar({ value, elementAttr: { 'aria-label': 'Progress Bar', }, statusFormat(_, value) { return `${value}%`; }, }); } }, ], }); });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.3/css/dx.light.css" /> <link rel="stylesheet" href="styles.css" /> <script src="js/dx.all.js"></script> <script src="data.js"></script> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="card-view"></div> </div> </body> </html>

.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; }