Angular DataGrid - headerFilter

Configures the header filter feature.

Type:

Object

A header filter allows a user to filter values in an individual column by including/excluding them in/from the applied filter. A click on a header filter icon invokes a popup menu with all unique values in the column. By selecting or clearing the selection of values in this menu, the user includes/excludes them in/from the filter.

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget DataGrid HeaderFilter

To make header filter icons visible, assign true to the headerFilter.visible option. Data in the popup menu can be customized using the headerFilter option of a specific column.

View Demo

See Also

allowSearch

Specifies whether searching is enabled in the header filter.

Type:

Boolean

Default Value: false
NOTE
With the ODataStore, searching a numeric column requires additional configuration: set the column's headerFilter.searchMode to "equals" and specify the type of the column's data field in the store's fieldTypes option.

height

Specifies the height of the popup menu that contains values for filtering.

Type:

Number

Default Value: 325, 315 (Material)

searchTimeout

Specifies a delay in milliseconds between when a user finishes typing in the header filter's search panel, and when the search is executed.

Type:

Number

Default Value: 500

texts

Contains options that specify text for various elements of the popup menu.

Type:

Object

visible

Indicates whether header filter icons are visible.

Type:

Boolean

Default Value: false

width

Specifies the width of the popup menu that contains values for filtering.

Type:

Number

Default Value: 252