search
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)
App.js
<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>
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} /> ); }
editorOptions
Type: any
Default Value: {}
See the TextBox Configuration topic for information about properties you can specify in this object.
NOTE
In Angular and Vue, the nested component that configures the editorOptions property does not support event bindings and two-way property bindings.
jQuery
JavaScript
$(function() { var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // ... fields: [{ // ... headerFilter: { // ... search: { editorOptions: { placeholder: 'Search value', mode: 'text', onValueChanged: (e) => { // handle the value change here } }, // ... } } }] }); $("#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', onValueChanged: (e) => { // handle the value change here } }, // ... } } }] }); } }
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)
App.js
<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', onValueChanged: (e) => { // handle the value change here } }, // ... } } }] }); 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', onValueChanged: (e) => { // handle the value change here } }, // ... } } }] }); </script>
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', onValueChanged: (e) => { // handle the value change here } }, // ... } } }] }); export default function App() { return ( <PivotGrid dataSource={pivotGridDataSource} /> ); }
timeout
Specifies a timeout, in milliseconds, during which a user may continue to modify the search value without starting the search operation.
Type:
Default Value: 500
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.