Card View - Overview

@using DevExtreme.MVC.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("~/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>