JavaScript/jQuery DataGrid - columns.headerFilter
Specifies data settings for the header filter.
allowSearch
Use DataGrid search.enabled, TreeList search.enabled, or Gantt search.enabled instead.
Specifies whether searching is enabled in the header filter.
allowSelectAll
Specifies whether a "Select All" option is available to users.
dataSource
Specifies the header filter's data source.
Data source properties.
| Name | Type | Description |
|---|---|---|
| component |
The UI component's instance. |
|
| dataSource | | null |
A DataSource configuration. |
The DataGrid 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:
Array of objects
A JavaScript array that contains plain objects. For more information, refer to the Specify a Custom Data Source article.DataSource configuration object
A DataSource configuration object. For more information, refer to the Map Data Source Fields article.IMPORTANTDataSource instances are not supported.Store instance
An ArrayStore, LocalStore, ODataStore, or CustomStore instance.Function
A function that allows you to modify the incomingoptions.dataSourceparameter or override it and set it to one of the above. For more information, refer to the Change the Generated Data Source article.
groupInterval
Specifies how the header filter combines values into groups.
If you specify a custom header filter data source, groupInterval accepts only string arrays that contain group fields for hierarchical header filters.
For numeric columns, assign a number that specifies the size of generated groups. For an example of this groupInterval implementation, refer to the following 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
$(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
<dx-data-grid ... >
<dxi-column ...
dataType="date"
[calculateFilterExpression]="calculateFilterExpression">
<dxo-header-filter
[groupInterval]="null"
></dxo-header-filter>
</dxi-column>
</dx-data-grid>
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
<template>
<DxDataGrid ... >
<DxColumn ...
data-type="date"
:calculate-filter-expression="calculateFilterExpression">
<DxHeaderFilter
:group-interval="null"
/>
</DxColumn>
</DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxDataGrid, DxColumn, DxHeaderFilter } from 'devextreme-vue/data-grid';
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
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { DataGrid, Column, HeaderFilter } from 'devextreme-react/data-grid';
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>
);
}search
Configures the header filter's search functionality.
jQuery
$(function(){
$("#dataGrid").dxDataGrid({
// ...
columns: [
{
// ...
headerFilter: {
// ...
search: {
editorOptions: {
placeholder: 'Search city or state',
mode: 'text'
},
enabled: true,
timeout: 900,
searchExpr: ['City', 'State'],
mode: 'equals',
},
}
},
// ...
],
})
});Angular
<dx-data-grid ... >
<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-data-grid>
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 { DxDataGridModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxDataGridModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { } Vue
<template>
<DxDataGrid ... >
<DxColumn ... >
<DxHeaderFilter ... >
<DxSearch
:editor-options="searchEditorOptions"
:enabled="true"
:timeout="900"
:searchExpr="searchFields"
mode="equals"
/>
</DxHeaderFilter>
</DxColumn>
</DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
DxColumn,
DxHeaderFilter,
DxSearch,
// ...
} from 'devextreme-vue/data-grid';
export default {
components: {
DxDataGrid,
DxColumn,
DxHeaderFilter,
DxSearch,
// ...
},
data() {
return {
searchEditorOptions: {
placeholder: 'Search city or state',
mode: 'text'
},
searchFields: ['City', 'State']
};
}
}
</script>
<template>
<DxDataGrid ... >
<DxColumn ... >
<DxHeaderFilter ... >
<DxSearch
:editor-options="searchEditorOptions"
:enabled="true"
:timeout="900"
:searchExpr="searchFields"
mode="equals"
/>
</DxHeaderFilter>
</DxColumn>
</DxDataGrid>
</template>
<script setup>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
DxColumn,
DxHeaderFilter,
DxSearch,
// ...
} from 'devextreme-vue/data-grid';
const searchFields = ['City', 'State'];
const searchEditorOptions = {
placeholder: 'Search city or state',
mode: 'text'
};
// ...
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import DataGrid, {
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 (
<DataGrid ... >
<Column ... >
<HeaderFilter ... >
<Search
editorOptions={searchEditorOptions}
enabled={true}
timeout={700}
searchExpr={searchFields}
mode="equals"
/>
</HeaderFilter>
</Column>
</DataGrid>
);
} See Also
searchMode
Use DataGrid search.mode, TreeList search.mode, or Gantt search.mode instead.
Specifies a comparison operation used to search header filter values.