Card View - Column Header Filter

@model IEnumerable<DevExtreme.MVC.Demos.Models.CardView.ColumnHeaderFilter.Order> @(Html.DevExtreme().CardView() .ID("cardView") .DataSource(Model) .KeyExpr("OrderNumber") .CardsPerRow(Mode.Auto) .CardMinWidth(280) .WordWrapEnabled(true) .HeaderFilter(hf => hf.Visible(true)) .Columns(c => { c.Add() .DataField("OrderNumber") .HeaderFilter(hf => hf.GroupInterval(10000)); c.Add() .DataField("OrderDate") .DataType(GridColumnDataType.Date) .CalculateFilterExpression(@<text> function(value, selectedFilterOperations, target) { if (value === 'weekends') { return [[getOrderDay, '=', 0], 'or', [getOrderDay, '=', 6]]; } return this.defaultCalculateFilterExpression(value, selectedFilterOperations, target); } </text>) .HeaderFilter(hf => hf.DataSource(@<text> function(data) { data.dataSource.postProcess = function(results) { results.push({ text: "Weekends", value: "weekends" }); return results; }; } </text>)); c.Add() .DataField("SaleAmount") .DataType(GridColumnDataType.Number) .HeaderFilter(hf => hf.DataSource(@<text> [{ text: 'Less than $3000', value: ['SaleAmount', '<', 3000], }, { text: '$3000 - $5000', value: [['SaleAmount', '>=', 3000], ['SaleAmount', '<', 5000]], }, { text: '$5000 - $10000', value: [['SaleAmount', '>=', 5000], ['SaleAmount', '<', 10000]], }, { text: '$10000 - $20000', value: [['SaleAmount', '>=', 10000], ['SaleAmount', '<', 20000]], }, { text: 'Greater than $20000', value: ['SaleAmount', '>=', 20000], }] </text>)); c.Add() .DataField("StoreCity") .HeaderFilter(hf => { hf.Search(hfs => { hfs .Enabled(true) .EditorOptions(new { placeholder = "Search city or state" }) .SearchExpr(new[] { "StoreCity", "StoreState" }); }); }); c.Add() .DataField("StoreState") .HeaderFilter(hf => { hf.Search(hfs => { hfs .Enabled(true) .EditorOptions(new { placeholder = "Search state or city" }) .SearchExpr(new[] { "StoreState", "StoreCity" }); }); }); c.Add().DataField("Employee"); }) ) <script> function getOrderDay(rowData) { return (new Date(rowData.OrderDate)).getDay(); } </script>