JavaScript/jQuery Gantt - columns.headerFilter

Specifies data settings for the header filter.

Type:

ColumnHeaderFilter

| undefined
Default Value: undefined

View Demo

See Also

allowSearch Deprecated

Use search.enabled instead.

Specifies whether searching is enabled in the header filter.

Type:

Boolean

Default Value: false

allowSelectAll

Specifies whether a "Select All" option is available to users.

Type:

Boolean

Default Value: true

dataSource

Specifies the header filter's data source.

Type:

Array<any>

|

Store

|

DataSource Configuration

|

Function

| null | undefined
Function parameters:
options:

Object

Data source properties.

Object structure:
Name Type Description
component

Object

The UI component's instance.
dataSource

DataSource Configuration

| null

A DataSource configuration.
Default Value: undefined

The Gantt generates a header filter's data source automatically based on column values. Each header filter item is an object that includes the following fields:

  • text
    A text string that represents the item in the header filter.

  • value
    A filter that the item applies. It can be a single value (for example, 0) or a filter expression. Refer to the filter help topic for information on the filter expression syntax.

Use the dataSource property to change the generated data source or specify a custom data source. You can set the dataSource property to one of the following:

groupInterval

Specifies how the header filter combines values into groups.

Type:

HeaderFilterGroupInterval

|

Number

|

Array<String | Number>

| undefined
Default Value: undefined

If you specify a custom header filter data source, assign a string array to groupInterval. This array should contain group fields for a hierarchical header filter.

For numeric columns, assign a number that specifies generated group sizes. Assign an array of numbers to generate hierarchical groups. The following groupInterval value divides records into groups of 100 and then into nested groups of 25: [100, 25]

DataGrid - Filtering Demo

For date columns, set this property to a HeaderFilterGroupInterval value. This value indicates the smallest available filter value. For instance, the "day" value allows you to filter date columns by a specific day.

The default header filter for date columns is hierarchical. To implement a non-hierarchical header filter, set groupInterval to null and specify the calculateFilterExpression function:

jQuery
index.js
$(function() {
    $("#dataGridContainer").dxDataGrid({
        // ...
        columns: [{
            // ...
            dataType: 'date',
            headerFilter: {
                groupInterval: null
            },
            calculateFilterExpression(value, operation, target) {
                if(value && target === "headerFilter") {
                    return [this.dataField, operation, value];
                }
                return this.defaultCalculateFilterExpression.apply(this, arguments);
            }
        }]
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-gantt ... >
    <dxi-gantt-column ...
        dataType="date"
        [calculateFilterExpression]="calculateFilterExpression">
        <dxo-gantt-header-filter
            [groupInterval]="null"
        ></dxo-gantt-header-filter>
    </dxi-gantt-column>
</dx-gantt>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    calculateFilterExpression(value, operation, target) {
        const column = this as any;

        if(value && target === "headerFilter") {
            return [column.dataField, operation, value];
        }
        return column.defaultCalculateFilterExpression.apply(column, arguments);
    }
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxDataGrid ... >
        <DxColumn ...
            data-type="date"
            :calculate-filter-expression="calculateFilterExpression">
            <DxHeaderFilter
                :group-interval="null"
            />
        </DxColumn>
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { DxDataGrid, DxColumn, DxHeaderFilter } from 'devextreme-vue/gantt';

function calculateFilterExpression(value, operation, target) {
    const column = this;

    if(value && target === "headerFilter") {
        return [column.dataField, operation, value];
    }
    return column.defaultCalculateFilterExpression.apply(column, arguments);
}
</script>
React
App.tsx
import React from 'react';
import 'devextreme/dist/css/dx.fluent.blue.light.css';

import { DataGrid, Column, HeaderFilter } from 'devextreme-react/gantt';

function calculateFilterExpression (value, operation, target) {
    if(value && target === "headerFilter") {
        return [this.dataField, operation, value];
    }
    return this.defaultCalculateFilterExpression.apply(this, arguments);
}

export default function App() {
    return (
        <DataGrid ... >
            <Column ...
                dataType="date"
                calculateFilterExpression={calculateFilterExpression}>
                <HeaderFilter
                    groupInterval={null}
                />
            </Column>
        </DataGrid>
    );
}

height

Specifies the height of the popup menu containing filtering values.

Type:

Number

|

String

| undefined
Default Value: undefined

search

Configures the header filter's search functionality.

Type:

ColumnHeaderFilterSearchConfig

searchMode Deprecated

Use search.mode instead.

Specifies a comparison operation used to search header filter values.

Type:

SearchMode

Default Value: 'contains'

width

Specifies the width of the popup menu containing filtering values.

Type:

Number

|

String

| undefined
Default Value: undefined