headerFilter

Specifies data settings for the header filter.

Type: Object
Default Value: undefined
See Also

dataSource

Specifies a data source for the header filter.

Type: Array| function(options) |DataSource configuration
Function parameters:
options: Object

Data source options.

Object structure:
component: Object
dataSource: Object

The header filter's data source.

Default Value: undefined

This option accepts one of the following values:

  • Array of Objects
    A simple JavaScript array containing a collection of plain objects.

    JavaScript
    $(function () {
        $("#dataGridContainer").dxDataGrid({
            headerFilter: {
                dataSource: [{
                    text: "Zero",    // A string to be displayed in the UI
                    value: 0         // A single value  
                },{
                    text: "Less than $3000",
                    value: ["SaleAmount", "<", 3000]    // A filterExpression array
                }, 
                // ...
                ]
            }
        })
    });
  • DataSource Configuration Object
    A DataSource configuration object. Learn more about the DataSource and the DevExtreme Data Layer concept from the Data Layer topic.

    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));
        $("#dataGridContainer").dxDataGrid({
            // ...
            columns: [{
                // ...
                headerFilter: {
                    dataSource: {
                        load: function () {
                            return [{
                                text: 'Today',
                                value: [['OrderDate', '>=', startOfDay], 'and', ['OrderDate', '<=', now]]
                            }, {
                                text: 'This week',
                                value: [['OrderDate', '>=', startOfWeek], 'and', ['OrderDate', '<', startOfDay]]
                            }, {
                                text: 'Earlier',
                                value: ['OrderDate', '<', startOfWeek]
                            }];
                        }
                    }
                }
            },
            // ...
            ]
        });
    });
  • Function
    A function in which you can modify the current data source configuration.

    JavaScript
    $(function () {
        $("#dataGridContainer").dxDataGrid({
            headerFilter: {
                dataSource: function (data) {
                    data.dataSource.postProcess = function (results) {
                        results.push({
                            text: "Weekends",
                            value: [
                                [getOrderDay, "=", 0],
                                    "or",
                                [getOrderDay, "=", 6]
                            ]
                        });
                        return results;
                    };
                }
            }
        })
    });
NOTE
Every unique value in a column should also be present in the data source for its header filter.

If you use a data source that does not contain the required fields (text and value), you can use the DataSource object's map option to cast the initial data array to the required structure. If the initial array includes key fields, all these fields, as well as the text and value fields should be present in the resulting array.

JavaScript
$(function(){
    var categoriesStore = new DevExpress.data.ArrayStore({
        data: [
            { categoryName: "...", categoryId: "1", categoryCode: "..." },
            // ...
        ],
        key: ["categoryId", "categoryCode"]
    });

    $("#gridContainer").dxDataGrid({
        // ...
        columns: [{
            // ...
            headerFilter: {
                dataSource: new DevExpress.data.DataSource({
                    store: categoriesStore,
                    map: function (item) {
                        return {
                            text: item.categoryName,
                            value: item.categoryId,
                            categoryId: item.categoryId,
                            categoryCode: item.categoryCode
                        }
                    }
                })
            }
        },
        // ...
        ]
    });
});

groupInterval

Specifies how the header filter combines values into groups.

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

For date columns, set this option to one of the string values. Groups in date columns are hierarchical, and the string value indicates up to which level the hierarchy is formed. The default level is "day", which means that each group has the following structure: "year" → "months" → "days".

For numeric columns, assign a number to this option. This number designates a step with which groups should be generated. Column values are classified into these groups.

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