JavaScript/jQuery DataGrid - columnChooser.search
jQuery
JavaScript
$(function(){
$("#dataGrid").dxDataGrid({
// ...
columnChooser: {
// ...
search: {
editorOptions: {
placeholder: 'Search column',
mode: 'text'
},
enabled: true,
timeout: 800
},
},
})
});Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ... >
<dxo-column-chooser ... >
<dxo-search
[editorOptions]="searchEditorOptions"
[enabled]="true"
[timeout]="800"
></dxo-search>
</dxo-column-chooser>
</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 column',
mode: 'text'
};
// ...
}
// ...
}
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 ... >
<DxColumnChooser ... >
<DxColumnChooserSearch
:editor-options="searchEditorOptions"
:enabled="true"
:timeout="800"
/>
</DxColumnChooser>
</DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
DxColumnChooser,
DxColumnChooserSearch,
// ...
} from 'devextreme-vue/data-grid';
export default {
components: {
DxDataGrid,
DxColumnChooser,
DxColumnChooserSearch,
},
data() {
return {
searchEditorOptions: {
placeholder: 'Search column',
mode: 'text'
}
};
}
}
</script>
<template>
<DxDataGrid ... >
<DxColumnChooser ... >
<DxColumnChooserSearch
:editor-options="searchEditorOptions"
:enabled="true"
:timeout="800"
/>
</DxColumnChooser>
</DxDataGrid>
</template>
<script setup>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
DxColumnChooser,
DxColumnChooserSearch,
// ...
} from 'devextreme-vue/data-grid';
const searchEditorOptions = {
placeholder: 'Search column',
mode: 'text'
};
// ...
</script>React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import DataGrid, {
ColumnChooser,
ColumnChooserSearch,
// ...
} from 'devextreme-react/data-grid';
const searchEditorOptions = {
placeholder: 'Search column',
mode: 'text'
};
export default function App() {
return (
<DataGrid ... >
<ColumnChooser ... >
<ColumnChooserSearch
editorOptions={searchEditorOptions}
enabled={true}
timeout={800}
/>
</ColumnChooser>
</DataGrid>
);
} editorOptions
Type:
any
Default Value: {}
See the TextBox Configuration topic for information about properties you can specify in this object.
Angular
NOTE
The nested component that configures the editorOptions property does not support event bindings and two-way property bindings.
Vue
NOTE
The nested component that configures the editorOptions property does not support event bindings and two-way property bindings.
jQuery
JavaScript
$(function(){
$("#dataGrid").dxDataGrid({
// ...
columnChooser: {
// ...
search: {
editorOptions: {
placeholder: 'Search column',
mode: 'text',
onValueChanged: (e) => {
// handle the value change here
}
},
// ...
},
},
})
});Angular
app.component.html
app.component.ts
app.module.ts
<dx-data-grid ... >
<dxo-column-chooser ... >
<dxo-search
[editorOptions]="searchEditorOptions"
// ...
></dxo-search>
</dxo-column-chooser>
</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 column',
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 ... >
<DxColumnChooser ... >
<DxColumnChooserSearch
:editor-options="searchEditorOptions"
// ...
/>
</DxColumnChooser>
</DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
DxColumnChooser,
DxColumnChooserSearch,
// ...
} from 'devextreme-vue/data-grid';
export default {
components: {
DxDataGrid
},
data() {
return {
searchEditorOptions: {
placeholder: 'Search column',
mode: 'text',
onValueChanged: this.handleValueChange
}
};
}
methods: {
handleValueChange(e) {
// handle the value change here
}
}
}
</script>
<template>
<DxDataGrid ... >
<DxColumnChooser ... >
<DxColumnChooserSearch
:editor-options="searchEditorOptions"
// ...
/>
</DxColumnChooser>
</DxDataGrid>
</template>
<script setup>
import 'devextreme/dist/css/dx.light.css';
import DxDataGrid, {
DxColumnChooser,
DxColumnChooserSearch,
// ...
} from 'devextreme-vue/data-grid';
const searchEditorOptions = {
placeholder: 'Search column',
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, {
ColumnChooser,
ColumnChooserSearch,
// ...
} from 'devextreme-react/data-grid';
const searchEditorOptions = {
placeholder: 'Search column',
mode: 'text',
onValueChanged: (e) => {
// handle the value change here
}
};
export default function App() {
return (
<DataGrid ... >
<ColumnChooser ... >
<ColumnChooserSearch
editorOptions={searchEditorOptions}
// ...
/>
</ColumnChooser>
</DataGrid>
);
} 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
Feedback