[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Collapse]Card View
   [Expand]Product Information
    Getting Started
    [Expand]Binding to Data
    [Expand]Data Representation Basics
    [Expand]Focus and Navigation
    [Expand]Data Editing
    [Collapse]Data Shaping and Manipulation
     [Expand]Data Summaries
       Filter Control
       Filtering in Code
       Header Filter
       Search Panel
    [Expand]Data Formatting
     Appearance Customization
     Save and Restore Layout
   [Expand]Visual Elements
   [Expand]Member Tables
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Rich Text Editor
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Report and Dashboard Server
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Header Filter

Column headers can display filter buttons. Clicking a filter button invokes a filter dropdown, which lists unique values within a column, and enables you to apply filter criteria against this column. The buttons are hidden by default. To show filter buttons, set the ASPxGridSettings.ShowHeaderFilterButton property to true. Note that if a filter is applied to a column, other column header filters display unique values of the sorted cards. To show the full list of values (include values of cards hidden by sorting), hold down SHIFT and click a header filter button.

Expanded Header Filter Modes

Four list modes are available for filter dropdowns - GridHeaderFilterMode.List, GridHeaderFilterMode.CheckedList, GridHeaderFilterMode.DateRangePicker and GridHeaderFilterMode.DateRangeCalendar. A particular filter mode can be specified for individual columns using a column's GridDataColumnHeaderFilterSettings.Mode property. If this property is set to CheckedList for a column, the column's header filter dropdown contains a check box list, allowing end-users to select multiple items to be included in the filter criteria.

If the GridDataColumnHeaderFilterSettings.Mode property is set to DateRangePicker or DateRangeCalendar, the column's header filter dropdown contains a date range picker or a calendar, respectively.

Expanded Custom Header Filter Items

The ASPxCardView allows you to create custom filter values, define a filter criteria for them and display these values within a column's filter dropdown. To do this, handle the ASPxCardView.HeaderFilterFillItems event. Within the event, you can access the filter default values using the ASPxGridHeaderFilterEventArgs.Values event parameter, and clear them if you need. To add a new filter item, use the ASPxGridHeaderFilterEventArgs.AddValue method. In List mode, you can use the ASPxGridHeaderFilterEventArgs.AddShowAll method to add a ShowAll button to the list.

The FilterValue.CreateShowAllValue, FilterValue.CreateShowBlanksValue, and FilterValue.CreateShowNonBlanksValue methods can be used to create the corresponding filter items.

This example shows how to create custom filter items and display them within the Quantity column's filter dropdown.

The image below shows the result:

Expanded Using HTML tags in an item text

ASPxCardView header filter allows the use of HTML tags in an item text. This example demonstrates how you can set numbers off in bold by using HTML tags within an item's format pattern. The image below shows the result.

Expanded See Also

Is this topic helpful?​​​​​​​