headerFilter
allowSearch
dataSource
| Name | Type | Description |
|---|---|---|
| component |
The UI component's instance. |
|
| dataSource |
A DataSource configuration. |
The DataGrid generates a header filter's data source automatically based on column values. Use the dataSource property to change the generated data source or specify a custom data source. Refer to the following help topic for more information: Customize Header Filter Data Source.
groupInterval
Specifies how the header filter combines values into groups. Does not apply if you specify a custom header filter data source.
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.
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
$(function() {
$("#dataGridContainer").dxDataGrid({
// ...
columns: [{
// ...
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 ...
[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 ...
: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';
export default {
components: {
DxDataGrid,
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
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 ...
calculateFilterExpression={calculateFilterExpression}>
<HeaderFilter
groupInterval={null}
/>
</Column>
</DataGrid>
);
}