headerFilter

Specifies column-level options for filtering using a column header filter.

Type: Object
Default Value: undefined

dataSource

Specifies the data source to be used for the header filter.

Type: Array| function(options) |DataSource configuration
Function parameters:
options: Object
Data source options.
Object structure:
component: Object
The widget instance.
dataSource: Object
The header filter data source.
Default Value: undefined

Assigning a function to this field enables you to calculate the header filter data source dynamically. Refer to the CustomStore | load option for details.

The elements of the array assigned to this field should be in the following format.

JavaScript
{
    text: /* A string to be displayed in the UI */
    value: /* A single value or filterExpression array */
}

NOTE: Every unique value present in the current column should also be present in the data source for the header filter.

For example, you can implement the following header filtering conditions for a field containing dates.

JavaScript
$(function(){
    var now = new Date();
    var startOfWeek = new Date(now.setDate(now.getDate() - now.getDay() - 1 + (now.getDay()==0?-6:1)));             
    var startOfDay = new Date(now.setHours(0,0,0,0));

    $("#gridContainer").dxDataGrid({
        // ...
        columns: [{
            // ...
            headerFilter: {
                dataSource: {
                    load: function(loadOptions) {
                        return [{
                            text: 'Today',
                            value: [['OrderDate', '>=', startOfDay], 'and', ['OrderDate', '<=', now]]
                        }, {
                            text: 'This week',
                            value: [['OrderDate', '>=', startOfWeek], 'and', ['OrderDate', '<', startOfDay]]
                        }, {
                            text: 'Earlier',
                            value: ['OrderDate', '<', startOfWeek]
                        }];
                    }
                }
            }
        },
        // ...
        ]
    });
});

groupInterval

Specifies how header filter values should be combined into groups.

Type: String|Number
Default Value: undefined
Accepted Values: 'year' | 'month' | 'day' | 'quarter' | 'hour' | 'minute' | 'second'

NOTE: When the column data type is "date", groups are organized in a hierarchy, and the groupInterval option indicates up to which level the hierarchy is formed. By default, this level is "day". This means that each group has the following structure: "year"->"months"->"days".

To configure a data selector for numeric data, assign a number to this option. The number assigned is the maximum length of each group. The bigger the number, the less the quantity of the generated groups.

The data selector for dates is configured by assigning a string to this option.

NOTE: When configuring the widget using ASP.NET MVC Wrappers, specify this option using the HeaderFilterGroupInterval enum. This enum accepts the following values: Year, Quarter, Month, Day, Hour, Minute and Second.