JavaScript/jQuery DataGrid - Customize Header Filter Data Source
This article discusses different ways to customize the headerFilter.dataSource.
Specify a Custom Data Source
To define a data source, set the dataSource property to an array of objects. Each object configures one header filter item and should have 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.
The following code shows how to specify a custom data source:
jQuery
index.js
$(function() {
$("#dataGridContainer").dxDataGrid({
// ...
columns: [{
// ...
headerFilter: {
dataSource: [{
text: "Zero",
value: 0
}, {
text: "Less than $3000",
value: ["SaleAmount", "<", 3000]
}, {
text: "More than $3000",
value: ["SaleAmount", ">", 3000]
}]
}
}]
});
});Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ... >
<dxi-column>
<dxo-header-filter
[dataSource]="headerFilterData">
</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 {
headerFilterData: any;
constructor() {
this.headerFilterData = [{
text: "Zero",
value: 0
}, {
text: "Less than $3000",
value: ["SaleAmount", "<", 3000]
}, {
text: "More than $3000",
value: ["SaleAmount", ">", 3000]
}];
}
}
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>
<DxHeaderFilter
:data-source="headerFilterData"
/>
</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 {
headerFilterData: [{
text: 'Zero',
value: 0
}, {
text: 'Less than $3000',
value: ['SaleAmount', '<', 3000]
}, {
text: 'More than $3000',
value: ['SaleAmount', '>', 3000]
}]
};
}
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { DataGrid, Column, HeaderFilter } from 'devextreme-react/data-grid';
const headerFilterData = [{
text: 'Zero',
value: 0
}, {
text: 'Less than $3000',
value: ['SaleAmount', '<', 3000]
}, {
text: 'More than $3000',
value: ['SaleAmount', '>', 3000]
}];
class App extends React.Component {
render() {
return (
<DataGrid>
<Column>
<HeaderFilter
dataSource={headerFilterData}
/>
</Column>
</DataGrid>
);
}
}
export default App;Map Data Source Fields
Header filter data objects should have the text and value fields. If these fields are missing from data objects fetched from a server, map the original data source to the text + value structure. The mapped data source should also include key fields from the original data source.
NOTE
Keep the allowSearch property set to false to avoid incorrect search results when mapping data source fields.
In the following code, the categoryName and categoryId fields are mapped to the text and value fields:
jQuery
index.js
$(function() {
const categoriesStore = new DevExpress.data.ArrayStore({
data: [
{ categoryName: "...", categoryId: 1 },
// ...
],
key: "categoryId"
});
$("#dataGridContainer").dxDataGrid({
// ...
columns: [{
// ...
headerFilter: {
dataSource: {
store: categoriesStore,
map: function (item) {
return {
text: item.categoryName,
value: item.categoryId,
categoryId: item.categoryId,
}
}
}
}
}]
});
});Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ... >
<dxi-column>
<dxo-header-filter
[dataSource]="headerFilterData">
</dxo-header-filter>
</dxi-column>
</dx-data-grid>
import { Component } from '@angular/core';
import ArrayStore from 'devextreme/data/array_store';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
headerFilterData;
constructor() {
const categoriesStore = new ArrayStore({
data: [
{ categoryName: "...", categoryId: 1 },
// ...
],
key: "categoryId"
});
this.headerFilterData = {
store: categoriesStore,
map: (item) => {
return {
text: item.categoryName,
value: item.categoryId,
categoryId: item.categoryId,
}
}
};
}
}
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>
<DxHeaderFilter
:data-source="headerFilterData"
/>
</DxColumn>
</DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import {
DxDataGrid,
DxColumn,
DxHeaderFilter
} from 'devextreme-vue/data-grid';
import ArrayStore from 'devextreme/data/array_store';
const categoriesStore = new ArrayStore({
data: [
{ categoryName: "...", categoryId: 1 },
// ...
],
key: "categoryId"
});
export default {
components: {
DxDataGrid,
DxColumn,
DxHeaderFilter
},
data() {
return {
headerFilterData: {
store: categoriesStore,
map: (item) => {
return {
text: item.categoryName,
value: item.categoryId,
categoryId: item.categoryId,
}
}
}
};
}
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { DataGrid, Column, HeaderFilter } from 'devextreme-react/data-grid';
import ArrayStore from 'devextreme/data/array_store';
const categoriesStore = new ArrayStore({
data: [
{ categoryName: "...", categoryId: 1 },
// ...
],
key: "categoryId"
});
const headerFilterData = {
store: categoriesStore,
map: (item) => {
return {
text: item.categoryName,
value: item.categoryId,
categoryId: item.categoryId,
}
}
};
class App extends React.Component {
render() {
return (
<DataGrid>
<Column>
<HeaderFilter
dataSource={headerFilterData}
/>
</Column>
</DataGrid>
);
}
}
export default App;Change the Generated Data Source
To change the generated data source, set the dataSource property to a function. This function accepts an object whose dataSource field contains a DataSource configuration. Define the DataSource's postProcess function in which you can change header filter items.
NOTE
Keep the search.enabled property set to false because searching produces incorrect results when the postProcess function is applied.
In the following code, the postProcess function adds a custom item to the generated data source:
jQuery
index.js
$(function() {
$("#dataGridContainer").dxDataGrid({
// ...
columns: [{
// ...
headerFilter: {
dataSource: function (options) {
options.dataSource.postProcess = function (results) {
results.push({
text: "Weekends",
value: [
['OrderDay', "=", 0],
"or",
['OrderDay', "=", 6]
]
});
return results;
}
}
}
}]
});
});Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ... >
<dxi-column>
<dxo-header-filter
[dataSource]="customizeHeaderFilterData">
</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 {
customizeHeaderFilterData(options) {
options.dataSource.postProcess = (results) => {
results.push({
text: "Weekends",
value: [
['OrderDay', "=", 0],
"or",
['OrderDay', "=", 6]
]
});
return results;
}
}
}
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>
<DxHeaderFilter
:data-source="customizeHeaderFilterData"
/>
</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
},
methods: {
customizeHeaderFilterData(options) {
options.dataSource.postProcess = (results) => {
results.push({
text: 'Weekends',
value: [
['OrderDay', '=', 0],
'or',
['OrderDay', '=', 6]
]
});
return results;
}
}
}
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { DataGrid, Column, HeaderFilter } from 'devextreme-react/data-grid';
class App extends React.Component {
render() {
return (
<DataGrid>
<Column>
<HeaderFilter
dataSource={this.customizeHeaderFilterData}
/>
</Column>
</DataGrid>
);
}
customizeHeaderFilterData(options) {
options.dataSource.postProcess = function(results) {
results.push({
text: 'Weekends',
value: [
['OrderDay', '=', 0],
'or',
['OrderDay', '=', 6]
]
});
return results;
};
}
}
export default App;Customize Item Appearance
You can use templates to customize the appearance of individual items. In the following code, a template makes the Today item bold:
jQuery
index.js
$(function() {
const now = new Date();
const startOfWeek = new Date(
now.setDate(now.getDate() - now.getDay() - 1 + (now.getDay() === 0 ? -6 : 1))
);
const startOfDay = new Date(now.setHours(0,0,0,0));
const boldFont = (data) => {
return "<b>" + data.text + "</b>";
}
$("#dataGridContainer").dxDataGrid({
// ...
columns: [{
// ...
headerFilter: {
dataSource: [{
text: 'Today',
value: [['OrderDate', '>=', startOfDay], 'and', ['OrderDate', '<=', now]],
template: boldFont
}, {
text: 'This week',
value: [['OrderDate', '>=', startOfWeek], 'and', ['OrderDate', '<', startOfDay]]
}, {
text: 'Earlier',
value: ['OrderDate', '<', startOfWeek]
}]
}
}]
});
});Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ... >
<dxi-column>
<dxo-header-filter
[dataSource]="headerFilterData">
</dxo-header-filter>
</dxi-column>
<div *dxTemplate="let data of 'boldFont'">
<b>{{data.text}}</b>
</div>
</dx-data-grid>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
headerFilterData: any;
constructor() {
const now = new Date();
const startOfWeek = new Date(
now.setDate(now.getDate() - now.getDay() - 1 + (now.getDay() === 0 ? -6 : 1))
);
const startOfDay = new Date(now.setHours(0,0,0,0));
this.headerFilterData = [{
text: 'Today',
value: [['OrderDate', '>=', startOfDay], 'and', ['OrderDate', '<=', now]],
template: 'boldFont'
}, {
text: 'This week',
value: [['OrderDate', '>=', startOfWeek], 'and', ['OrderDate', '<', startOfDay]]
}, {
text: 'Earlier',
value: ['OrderDate', '<', startOfWeek]
}];
}
}
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>
<DxHeaderFilter
:data-source="headerFilterData"
/>
</DxColumn>
<template #bold-font="{ data }">
<b>{{data.text}}</b>
</template>
</DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import {
DxDataGrid,
DxColumn,
DxHeaderFilter
} from 'devextreme-vue/data-grid';
const now = new Date();
const startOfWeek = new Date(
now.setDate(now.getDate() - now.getDay() - 1 + (now.getDay() === 0 ? -6 : 1))
);
const startOfDay = new Date(now.setHours(0,0,0,0));
export default {
components: {
DxDataGrid,
DxColumn,
DxHeaderFilter
},
data() {
return {
headerFilterData: [{
text: 'Today',
value: [['OrderDate', '>=', startOfDay], 'and', ['OrderDate', '<=', now]],
template: 'bold-font'
}, {
text: 'This week',
value: [['OrderDate', '>=', startOfWeek], 'and', ['OrderDate', '<', startOfDay]]
}, {
text: 'Earlier',
value: ['OrderDate', '<', startOfWeek]
}]
};
}
}
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { DataGrid, Column, HeaderFilter } from 'devextreme-react/data-grid';
const now = new Date();
const startOfWeek = new Date(
now.setDate(now.getDate() - now.getDay() - 1 + (now.getDay() === 0 ? -6 : 1))
);
const startOfDay = new Date(now.setHours(0, 0, 0, 0));
const renderBoldText = (data) => <b>{data.text}</b>;
const headerFilterData = [{
text: 'Today',
value: [['OrderDate', '>=', startOfDay], 'and', ['OrderDate', '<=', now]],
template: 'boldFont'
}, {
text: 'This week',
value: [['OrderDate', '>=', startOfWeek], 'and', ['OrderDate', '<', startOfDay]]
}, {
text: 'Earlier',
value: ['OrderDate', '<', startOfWeek]
}];
class App extends React.Component {
render() {
return (
<DataGrid>
<Column>
<HeaderFilter
dataSource={headerFilterData}
/>
</Column>
<Template name="boldFont" render={renderBoldText} />
</DataGrid>
);
}
}
export default App;Feedback