DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.
Data Grid

Column Header Filter

The DevExtreme Data Grid includes a column header filter option – with it, users can quickly filter rows against values selected in a pop-up menu. To display the built-in filter menu, users can click the Grid’s header filter icon (displayed within the column header).

Display Header Filter Icons

Assign true to the headerFilter.visible property to display header filter icons for all columns. To hide the icon for a specific column, set the column's allowHeaderFiltering property to false.

Enable Search UI Within Header Filters

The DevExtreme Grid includes a text-based search option. This feature allows users to search for specific values within a header filter. To configure the search panel, define the search property in the global headerFilter object or in a columns.headerFilter object.

The search panel's default behavior looks for values only within the same data field. You can include additional fields in the search. Specify the search.searchExpr property for this purpose. 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.

Thank you for your interest in our ASP.NET MVC product libraries and UI component suite. We are moving ASP.NET MVC-related demos and content to Please make sure to update your bookmarks with our new URL.

View Demo