DevExtreme jQuery - PivotGridDataSource - fields.headerFilter
Configures the field's header filter.
Type:
jQuery
JavaScript
$(function() {
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
// ...
fields: [{
// ...
allowFiltering: true,
headerFilter: {
search: {
enabled: true,
// ...
}
}
}]
});
$("#pivotGridContainer").dxPivotGrid({
dataSource: pivotGridDataSource
});
});Angular
app.component.html
app.component.ts
app.module.ts
<dx-pivot-grid
[dataSource]="pivotGridDataSource">
</dx-pivot-grid>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
pivotGridDataSource: PivotGridDataSource;
constructor() {
this.pivotGridDataSource = new PivotGridDataSource({
// ...
fields: [{
// ...
allowFiltering: true,
headerFilter: {
// ...
search: {
enabled: true,
// ...
}
}
}]
});
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
import { DxPivotGridModule } from "devextreme-angular";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxPivotGridModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { } Vue
App.vue (Options API)
App.vue (Composition API)
<template>
<DxPivotGrid
:data-source="pivotGridDataSource"
/>
</template>
<script>
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-vue/pivot-grid';
const pivotGridDataSource = new PivotGridDataSource({
// ...
fields: [{
// ...
allowFiltering: true,
headerFilter: {
// ...
search: {
enabled: true,
// ...
}
}
}]
});
export default {
components: {
DxPivotGrid
},
data() {
return {
pivotGridDataSource
}
}
}
</script>
<template>
<DxPivotGrid
:data-source="pivotGridDataSource"
/>
</template>
<script setup>
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-vue/pivot-grid';
const pivotGridDataSource = new PivotGridDataSource({
// ...
fields: [{
// ...
allowFiltering: true,
headerFilter: {
// ...
search: {
enabled: true,
// ...
}
}
}]
});
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-react/pivot-grid';
const pivotGridDataSource = new PivotGridDataSource({
// ...
fields: [{
// ...
allowFiltering: true,
headerFilter: {
// ...
search: {
enabled: true,
// ...
}
}
}]
});
export default function App() {
return (
<PivotGrid
dataSource={pivotGridDataSource}
/>
);
} See Also
- fields[].allowFiltering
- PivotGrid.headerFilter
allowSearch
Use search.enabled instead.
Specifies whether searching is enabled in the header filter.
Type:
Default Value: undefined
allowSelectAll
Specifies whether a "Select All" option is available to users.
Type:
Default Value: true
height
Specifies the height of the popup menu containing filtering values.
Type:
Default Value: undefined
search
Configures the header filter's search functionality.
Type:
jQuery
JavaScript
$(function() {
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
// ...
fields: [{
// ...
headerFilter: {
// ...
search: {
editorOptions: {
placeholder: 'Search value',
mode: 'text'
},
enabled: true,
timeout: 600,
mode: 'equals'
}
}
}]
});
$("#pivotGridContainer").dxPivotGrid({
dataSource: pivotGridDataSource
});
});Angular
app.component.html
app.component.ts
app.module.ts
<dx-pivot-grid
[dataSource]="pivotGridDataSource">
</dx-pivot-grid>
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
pivotGridDataSource: PivotGridDataSource;
constructor() {
this.pivotGridDataSource = new PivotGridDataSource({
// ...
fields: [{
// ...
headerFilter: {
// ...
search: {
editorOptions: {
placeholder: 'Search value',
mode: 'text'
},
enabled: true,
timeout: 600,
mode: 'equals'
}
}
}]
});
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
import { DxPivotGridModule } from "devextreme-angular";
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxPivotGridModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { } Vue
App.vue (Options API)
App.vue (Composition API)
<template>
<DxPivotGrid
:data-source="pivotGridDataSource"
/>
</template>
<script>
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-vue/pivot-grid';
const pivotGridDataSource = new PivotGridDataSource({
// ...
fields: [{
// ...
headerFilter: {
// ...
search: {
editorOptions: {
placeholder: 'Search value',
mode: 'text'
},
enabled: true,
timeout: 600,
mode: 'equals'
}
}
}]
});
export default {
components: {
DxPivotGrid
},
data() {
return {
pivotGridDataSource
}
}
}
</script>
<template>
<DxPivotGrid
:data-source="pivotGridDataSource"
/>
</template>
<script setup>
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-vue/pivot-grid';
const pivotGridDataSource = new PivotGridDataSource({
// ...
fields: [{
// ...
headerFilter: {
// ...
search: {
editorOptions: {
placeholder: 'Search value',
mode: 'text'
},
enabled: true,
timeout: 600,
mode: 'equals'
}
}
}]
});
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-react/pivot-grid';
const pivotGridDataSource = new PivotGridDataSource({
// ...
fields: [{
// ...
headerFilter: {
// ...
search: {
editorOptions: {
placeholder: 'Search value',
mode: 'text'
},
enabled: true,
timeout: 600,
mode: 'equals'
}
}
}]
});
export default function App() {
return (
<PivotGrid
dataSource={pivotGridDataSource}
/>
);
} width
Specifies the width of the popup menu containing filtering values.
Type:
Default Value: undefined
Feedback