search
jQuery
JavaScript
$(function(){ $("#dataGrid").dxDataGrid({ // ... columns: [ { // ... headerFilter: { // ... search: { editorOptions: { placeholder: 'Search city or state', mode: 'text' }, enabled: true, timeout: 900, searchExpr: ['City', 'State'], mode: 'equals', }, } }, // ... ], }) });
Angular
app.component.html
app.component.ts
app.module.ts
<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
App.vue (Options API)
App.vue (Composition API)
<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
App.js
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
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(){ $("#dataGrid").dxDataGrid({ // ... columns: [ { // ... headerFilter: { // ... search: { editorOptions: { placeholder: 'Search city or state', mode: 'text', onValueChanged: (e) => { // handle the value change here } }, // ... }, } }, // ... ], }) });
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ... > <dxi-column ... > <dxo-header-filter ... > <dxo-search [editorOptions]="searchEditorOptions" // ... ></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; constructor() { this.searchEditorOptions = { placeholder: 'Search city or state', 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 { DxDataGridModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxDataGridModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
App.vue (Options API)
App.vue (Composition API)
<template> <DxDataGrid ... > <DxColumn ... > <DxHeaderFilter ... > <DxSearch :editor-options="searchEditorOptions" // ... /> </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', onValueChanged: this.handleValueChange } }; }, methods: { handleValueChange(e) { // handle the value change here } } } </script>
<template> <DxDataGrid ... > <DxColumn ... > <DxHeaderFilter ... > <DxSearch :editor-options="searchEditorOptions" // ... /> </DxHeaderFilter> </DxColumn> </DxDataGrid> </template> <script setup> import 'devextreme/dist/css/dx.light.css'; import DxDataGrid, { DxColumn, DxHeaderFilter, DxSearch, // ... } from 'devextreme-vue/data-grid'; const searchEditorOptions = { placeholder: 'Search city or state', mode: 'text', onValueChanged: (e) => { // handle the value change here } }; // ... </script>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import DataGrid, { Column, HeaderFilter, Search, // ... } from 'devextreme-react/data-grid'; const searchEditorOptions = { placeholder: 'Search city or state', mode: 'text', onValueChanged: (e) => { // handle the value change here } }; export default function App() { return ( <DataGrid ... > <Column ... > <HeaderFilter ... > <Search editorOptions={searchEditorOptions} // ... /> </HeaderFilter> </Column> </DataGrid> ); }
See Also
searchExpr
jQuery
JavaScript
$(function(){ $("#dataGrid").dxDataGrid({ // ... columns: [ { // ... headerFilter: { // ... search: { // ... searchExpr: ['City', 'State'], }, } }, // ... ], }) });
Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ... > <dxi-column ... > <dxo-header-filter ... > <dxo-search ... [searchExpr]="searchFields" ></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 { searchFields; constructor() { 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
App.vue (Options API)
App.vue (Composition API)
<template> <DxDataGrid ... > <DxColumn ... > <DxHeaderFilter ... > <DxSearch ... :searchExpr="searchFields" /> </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 { searchFields: ['City', 'State'] }; } } </script>
<template> <DxDataGrid ... > <DxColumn ... > <DxHeaderFilter ... > <DxSearch ... :searchExpr="searchFields"" /> </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']; // ... </script>
React
App.js
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']; export default function App() { return ( <DataGrid ... > <Column ... > <HeaderFilter ... > <Search ... searchExpr={searchFields} /> </HeaderFilter> </Column> </DataGrid> ); }
See Also
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.