search

Configures the header filter's search functionality.

Type:

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>        
    ); 
}

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>        
    ); 
}

enabled

Specifies whether search UI is enabled in the header filter.

Type:

Boolean

Default Value: false

mode

Specifies a comparison operation used to search header filter values.

Type:

SearchMode

Default Value: 'contains'

View Demo

searchExpr

Specifies a data object's field name or an expression whose value is compared to the search string.

Type:

getter

|

Array<getter>

Default Value: undefined

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>        
    ); 
}

timeout

Specifies a timeout, in milliseconds, during which a user may continue to modify the search value without starting the search operation.

Type:

Number

Default Value: 500

search

jQuery

Angular

Vue

React

See Also

editorOptions

jQuery

Angular

Vue

React

See Also

enabled

mode

searchExpr

jQuery

Angular

Vue

React

See Also

timeout