Card View - Column Header Filter

DevExtreme CardView includes a header used to filter cards by field values. Click the filter icon in the field's header panel to open the pop-up CardView filter.

Backend API

@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>

using DevExtreme.MVC.Demos.Models.CardView.ColumnChooser; using DevExtreme.MVC.Demos.Models.CardView.ColumnHeaderFilter; using DevExtreme.MVC.Demos.Models.CardView.ColumnReordering; using DevExtreme.MVC.Demos.Models.CardView.DataValidation; using DevExtreme.MVC.Demos.Models.CardView.FilterPanel; using DevExtreme.MVC.Demos.Models.CardView.Overview; using DevExtreme.MVC.Demos.Models.CardView.PopupEditing; using DevExtreme.MVC.Demos.Models.CardView.SearchPanel; using DevExtreme.MVC.Demos.Models.CardView.Selection; using DevExtreme.MVC.Demos.Models.CardView.SimpleArray; using DevExtreme.MVC.Demos.Models.CardView.Sorting; using DevExtreme.MVC.Demos.Models.SampleData; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class CardViewController : Controller { public ActionResult ColumnHeaderFilter() { return View(ColumnHeaderFilterSampleData.Orders); } } }

Display Header Filter Icons

Assign true to the headerFilter.visible property to allow users to filter CardView fields with header icons. To hide the icon for a specific column, set columns.allowHeaderFiltering to false.

Enable Search UI Within Header Filters

DevExtreme CardView supports text-based search (to find specific values in a header filter). Define the search property in the headerFilter object or a columns.headerFilter object to configure this capability.

The search panel checks for values only within the same data field. To expand search to additional fields, use the search.searchExpr property. For example, this demo allows you to enter a state name in the City column's header filter. You can then see a list of all cities within the specified state and select city names that you want to use as a filter.

To apply a comparison operation (used to search header filter values), specify the search.mode property.