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
The widget instance.
dataSource: Object
The data source of the header filter.
Default Value: undefined

This option accepts one of the following.

  • Array of Objects
    A simple JavaScript array containing a collection of plain objects. All elements of this array should have the following format.

    JavaScript
    {
        text: /* A string to be displayed in the UI */
        value: /* A single value or filterExpression array */
    }
  • DataSource Configuration Object
    A configuration object of the DataSource. Learn more about the DataSource and the DevExtreme Data Layer concept from the Data Layer topic.

  • Function
    A function enables you to switch data sources based on a condition. It must return either an array of objects or a DataSource configuration object.

As an example, see the following code, which implements the data source for the header filter in a column that contains dates. Here, the data source is a DataSource configuration object.

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));

    $("#treeListContainer").dxTreeList({
        // ...
        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]
                        }];
                    }
                }
            }
        },
        // ...
        ]
    });
});
NOTE
Every unique value present 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 map option of the DataSource object 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"]
    });

    $("#treeListContainer").dxTreeList({
        // ...
        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.