React Gantt - headerFilter

Configures the header filter settings.

Selector: HeaderFilter
Type:

dxGanttHeaderFilter

View Demo

The header filter allows users to filter values in an individual column. The header filter is a popup window that contains all unique values of a column. A click on the filter icon invokes the header filter.

DevExtreme Gantt - Header Filter

Set the headerFilter.visible property to true to display filter icons for all columns. To hide the filter icon for an individual column, set the column’s allowHeaderFiltering property to false.

jQuery
index.js
$(function() {
    $("#gantt").dxGantt({
        headerFilter: {
            visible: true,
            width: 280,
            height: 350,
            searchTimeout: 800
        },
        // ...
    });
});
Angular
app.component.html
app.component.ts
app.module.ts
<dx-gantt ... >
    <dxo-header-filter
        [visible]="true" 
        [width]="280"
        [height]="350"
        [searchTimeout]="800" >
    </dxo-header-filter>
    <!-- ... -->
</dx-gantt>
import { Component } from '@angular/core';

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

export class AppComponent {
    // ...      
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxGanttModule } from 'devextreme-angular';

@NgModule({
    imports: [
        BrowserModule,
        DxGanttModule
    ],        
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <DxGantt ... >
        <DxHeaderFilter
            :visible="true"
            :width="280"
            :height="350" 
            :search-timeout="800"
        />
        <!-- ... -->
    </DxGantt>
</template>
<script>
    import 'devextreme/dist/css/dx.light.css';
    import 'devexpress-gantt/dist/dx-gantt.css'; 

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

    export default {
        components: { 
            DxGantt, 
            DxHeaderFilter, 
            // ... 
        }
    };
</script>
React
App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import 'devexpress-gantt/dist/dx-gantt.css'; 

import Gantt, { 
    HeaderFilter, 
    // ... 
} from 'devextreme-react/gantt';

const App = () => {
    return (
        <Gantt ... >
            <HeaderFilter
                visible={true}
                width={280} 
                height={350}
                searchTimeout={800} />
            {/* ... */}
        </Gantt>
    );
};

export default App;
ASP.NET Core Controls
Razor C#
@(Html.DevExtreme().Gantt()
    .HeaderFilter(e => {
        e.Visible(true)
        e.Width(280)
        e.Height(350)
        e.SearchTimeout(800)
    })
    // ...
)
ASP.NET MVC Controls
Razor C#
@(Html.DevExtreme().Gantt()
    .HeaderFilter(e => {
        e.Visible(true)
        e.Width(280)
        e.Height(350)
        e.SearchTimeout(800)
    })
    // ...
)
See Also

allowSearch Deprecated

Use search.enabled instead.

Specifies whether to enable searching 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

height

Specifies the height of the popup window that contains values for filtering.

Type:

Number

Default Value: 325, 315 (Fluent, Material)

search

Configures the header filter's search functionality.

Selector: Search
Type:

HeaderFilterSearchConfig

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

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

export class AppComponent {
    searchEditorOptions;
    constructor() {
        this.searchEditorOptions = { 
            placeholder: 'Search value', 
            mode: 'text' 
        };
        // ...
    } 
    // ...
}
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 ... >
        <DxHeaderFilter ... >
            <DxSearch
                :editor-options="searchEditorOptions"
                :enabled="true"
                :timeout="700"
                mode="equals"
            />
        </DxHeaderFilter>
    </DxGantt>
</template>

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

export default {
    components: {
        DxGantt, 
        DxHeaderFilter, 
        DxSearch,
        // ...
    },
    data() {
        return {
            searchEditorOptions: { 
                placeholder: 'Search value', 
                mode: 'text' 
            }
        };
    }
}
</script>
<template>
    <DxGantt ... >
        <DxHeaderFilter ... >
            <DxSearch
                :editor-options="searchEditorOptions"
                :enabled="true"
                :timeout="700"
                mode="equals"
            />
        </DxHeaderFilter>
    </DxGantt>
</template>

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

const searchEditorOptions = { 
    placeholder: 'Search value', 
    mode: 'text' 
};

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

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

const searchEditorOptions = { 
    placeholder: 'Search value', 
    mode: 'text' 
};

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

searchTimeout Deprecated

Use search.timeout instead.

Specifies a delay in milliseconds between typing a search string and the search execution.

Type:

Number

Default Value: 500

texts

Contains properties that specify text for various elements of the popup window.

Selector: Texts
Type: dxGanttHeaderFilterTexts

visible

Specifies whether to show header filter icons.

Type:

Boolean

Default Value: false

width

Specifies the width of the popup window that contains values for filtering.

Type:

Number

Default Value: 252