All docs
V24.1
24.1
23.2
23.1
22.2
22.1
21.2
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.
Box
API
Map

jQuery Gantt - columns.headerFilter

Specifies data settings for the header filter.

Type:

Object

Default Value: undefined

allowSearch Deprecated

Use DataGrid search.enabled, TreeList search.enabled, or Gantt 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
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. Does not apply if you specify a custom header filter data source.

Default Value: undefined

For numeric columns, assign a number to this property. This number designates a step with which to generate groups. Column values are classified into these groups.

View Demo

For date columns, set this property to one of the accepted string values above. Dates are grouped into a hierarchy, and the string value indicates its lowest level. The default level is "day" which means that the header filter forms the following hierarchy: Year → Month → Day. You can disable the hierarchical display if you set the groupInterval to null. In this case, you also need to implement the column's calculateFilterExpression function as follows:

jQuery
index.js
$(function() {
    $("#ganttContainer").dxGantt({
        // ...
        columns: [{
            // ...
            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-column ...
        [calculateFilterExpression]="calculateFilterExpression">
        <dxo-header-filter
            [groupInterval]="null">
        </dxo-header-filter>
    </dxi-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 { DxGanttModule } from 'devextreme-angular';

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

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

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

export default {
    components: {
        DxGantt,
        DxColumn,
        DxHeaderFilter
    },
    data() {
        return {
            calculateFilterExpression(value, operation, target) {
                const column = this as any;

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

import Gantt, {
    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 (
        <Gantt ... >
            <Column ...
                calculateFilterExpression={calculateFilterExpression}>
                <HeaderFilter
                    groupInterval={null}
                />
            </Column>
        </Gantt>
    );
}

height

Specifies the height of the popup menu containing filtering values.

Type:

Number

|

String

Default Value: undefined

search

Configures the header filter's search functionality.

jQuery
JavaScript
$(function(){
    $("#gantt").dxGantt({
        // ...
        columns: [
            {
                // ...
                headerFilter: {
                    // ...
                    search: {
                        editorOptions: { 
                            placeholder: 'Search city or state',
                            mode: 'text' 
                        },
                        enabled: true,
                        timeout: 900,
                        searchExpr: ['City', 'State'],
                        mode: 'equals',
                    },
                }
            }, 
            // ...
        ],
    })
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-gantt ... >
    <dxi-column ... >
        <dxo-header-filter ... >
            <dxo-search
                [editorOptions]="searchEditorOptions"
                [enabled]="true"
                [timeout]="900"
                [searchExpr]="searchFields"
                mode="equals" 
            ></dxo-search>
        </dxo-header-filter>
    </dxi-column>
</dx-gantt>
import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent {
    searchEditorOptions;
    searchFields;
    constructor() {
        this.searchEditorOptions = { 
            placeholder: 'Search city or state', 
            mode: 'text' 
        };
        this.searchFields = ['City', 'State'];
        // ...
    } 
    // ...
}
import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxGanttModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxGanttModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }  
Vue
App.vue (Options API)
App.vue (Composition API)
<template>
    <DxGantt ... >
        <DxColumn ... >
            <DxHeaderFilter ... >
                <DxSearch
                    :editor-options="searchEditorOptions"
                    :enabled="true"
                    :timeout="900"
                    :searchExpr="searchFields"
                    mode="equals"
                />
            </DxHeaderFilter>
        </DxColumn>
    </DxGantt>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import DxGantt, {
    DxColumn,
    DxHeaderFilter, 
    DxSearch,
    // ... 
} from 'devextreme-vue/gantt';

export default {
    components: {
        DxGantt, 
        DxColumn,
        DxHeaderFilter, 
        DxSearch,
        // ...
    },
    data() {
        return {
            searchEditorOptions: { 
                placeholder: 'Search city or state', 
                mode: 'text' 
            },
            searchFields: ['City', 'State']
        };
    }
}
</script>
<template>
    <DxGantt ... >
        <DxColumn ... >
            <DxHeaderFilter ... >
                <DxSearch
                    :editor-options="searchEditorOptions"
                    :enabled="true"
                    :timeout="900"
                    :searchExpr="searchFields"
                    mode="equals"
                />
            </DxHeaderFilter>
        </DxColumn>
    </DxGantt>
</template>

<script setup>
import 'devextreme/dist/css/dx.light.css';
import DxGantt, {
    DxColumn,
    DxHeaderFilter, 
    DxSearch,
    // ... 
} from 'devextreme-vue/gantt';

const searchFields = ['City', 'State'];
const searchEditorOptions = { 
    placeholder: 'Search city or state', 
    mode: 'text' 
};

// ...
</script>
React
App.js
import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Gantt, {
    Column,
    HeaderFilter, 
    Search, 
    // ...
} from 'devextreme-react/data-grid';

const searchFields = ['City', 'State'];
const searchEditorOptions = { 
    placeholder: 'Search city or state', 
    mode: 'text' 
};

export default function App() { 
    return ( 
        <Gantt ... >
            <Column ... > 
                <HeaderFilter ... >
                    <Search
                        editorOptions={searchEditorOptions}
                        enabled={true}
                        timeout={700}
                        searchExpr={searchFields}
                        mode="equals"
                    />
                </HeaderFilter>
            </Column>
        </Gantt>        
    ); 
} 
See Also

searchMode Deprecated

Use DataGrid search.mode, TreeList search.mode, or Gantt 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

Default Value: undefined