Change Theme Settings
Change Theme Settings
Show All Themes

Header Filter

Company Name Not filtered
Country Not filtered
City Not filtered
Unit Price Not filtered
Quantity Not filtered
Discount Not filtered
Total Not filtered
Blondesddsl père et filsFranceStrasbourg$31.20300 %$936.00
Blondesddsl père et filsFranceStrasbourg$12.00200 %$240.00
Morgenstern GesundkostGermanyLeipzig$36.40200 %$728.00
Morgenstern GesundkostGermanyLeipzig$39.40120 %$472.80
Berglunds snabbköpSwedenLuleå$3.60120 %$43.20
Berglunds snabbköpSwedenLuleå$19.20200 %$384.00
Berglunds snabbköpSwedenLuleå$6.20300 %$186.00
Vins et alcools ChevalierFranceReims$30.4040 %$121.60
Magazzini Alimentari RiunitiItalyBergamo$13.60300 %$408.00
Magazzini Alimentari RiunitiItalyBergamo$10.00200 %$200.00
Page 1 of 216 (2155 items)Prev1234567214215216Next

The DevExpress ASP.NET MVC GridView provides a powerful data filtering mechanism that displays a dropdown list of all unique values within a column. End-users can easily filter the grid records by selecting the values displayed within the dropdown. The dropdown can be invoked by a click on a column header’s filter button.

Additionally, end-users can filter items by entering text in the filter editor above the list. When typing a filter string, the header filter items list is automatically updated, so only the relevant items that match the filter string are displayed.

Header filter dropdown buttons are disabled by default. You can display filter buttons either for for all columns (by enabling the grid's Settings.ShowHeaderFilterButton property) or for individual columns (by enabling a column's AllowHeaderFilter property).

You can specify the header filter mode for a column using the SettingsHeaderFilter.Mode property.

  • In List mode, the column's header filter dropdown displays a regular list of filter items, allowing end-users to select single value.
  • In CheckedList mode, the column's header filter dropdown contains a check box list, allowing end-users to select multiple values for the filter criteria.
  • DateRangeCalendar and DateRangePicker modes are available for date columns only. You can take a look at these modes in the Date Range Header Filter demo.

The GridView allows you to create custom filter values, define filter criteria and display these values within the column's filter dropdown. To do this, implement a method delegate specified by the HeaderFilterFillItems property. In this demo, custom filter values are displayed within the 'Total' and 'Quantity' columns' filter dropdowns.

Local Copy of this Demo
To inspect the source code for this demo on your machine, you must first install our components via the DevExpress Component Installer.
You can open a local copy of this online demo directly from this webpage (if using v20.2.8, 21.1.4 or higher).
Open CS Solution
The source code files for this demo are installed (by default) in the following directory:
\Users\Public\Documents\DevExpress Demos XX.X\Components\ASP.NET\CS\MVCxGridViewDemos