Angular Gantt - headerFilter.search
Selector: dxo-search
Type:
jQuery
JavaScript
$(function(){ $("#gantt").dxGantt({ // ... headerFilter: { // ... search: { editorOptions: { placeholder: 'Search value', mode: 'text' }, enabled: true, timeout: 700, mode: 'equals' }, }, }) });
Angular
app.component.html
app.component.ts
app.module.ts
<dx-gantt ... > <dxo-header-filter ... > <dxo-search [editorOptions]="searchEditorOptions" [enabled]="true" [timeout]="700" mode="equals" ></dxo-search> </dxo-header-filter> </dx-gantt>
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 value', mode: 'text' }; // ... } // ... }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxGanttModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxGanttModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
App.vue (Options API)
App.vue (Composition API)
<template> <DxGantt ... > <DxHeaderFilter ... > <DxSearch :editor-options="searchEditorOptions" :enabled="true" :timeout="700" mode="equals" /> </DxHeaderFilter> </DxGantt> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxGantt, { DxHeaderFilter, DxSearch, // ... } from 'devextreme-vue/gantt'; export default { components: { DxGantt, DxHeaderFilter, DxSearch, // ... }, data() { return { searchEditorOptions: { placeholder: 'Search value', mode: 'text' } }; } } </script>
<template> <DxGantt ... > <DxHeaderFilter ... > <DxSearch :editor-options="searchEditorOptions" :enabled="true" :timeout="700" mode="equals" /> </DxHeaderFilter> </DxGantt> </template> <script setup> import 'devextreme/dist/css/dx.light.css'; import DxGantt, { DxHeaderFilter, DxSearch, // ... } from 'devextreme-vue/gantt'; const searchEditorOptions = { placeholder: 'Search value', mode: 'text' }; // ... </script>
React
App.js
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import Gantt, { HeaderFilter, Search, // ... } from 'devextreme-react/data-grid'; const searchEditorOptions = { placeholder: 'Search value', mode: 'text' }; export default function App() { return ( <Gantt ... > <HeaderFilter ... > <Search editorOptions={searchEditorOptions} enabled={true} timeout={700} mode="equals" /> </HeaderFilter> </Gantt> ); }
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(){ $("#gantt").dxGantt({ // ... 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-gantt ... > <dxi-column ... > <dxo-header-filter ... > <dxo-search [editorOptions]="searchEditorOptions" // ... ></dxo-search> </dxo-header-filter> </dxi-column> </dx-gantt>
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 { DxGanttModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxGanttModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
App.vue (Options API)
App.vue (Composition API)
<template> <DxGantt ... > <DxColumn ... > <DxHeaderFilter ... > <DxSearch :editor-options="searchEditorOptions" // ... /> </DxHeaderFilter> </DxColumn> </DxGantt> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxGantt, { DxColumn, DxHeaderFilter, DxSearch, // ... } from 'devextreme-vue/gantt'; export default { components: { DxGantt, 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> <DxGantt ... > <DxColumn ... > <DxHeaderFilter ... > <DxSearch :editor-options="searchEditorOptions" // ... /> </DxHeaderFilter> </DxColumn> </DxGantt> </template> <script setup> import 'devextreme/dist/css/dx.light.css'; import DxGantt, { DxColumn, DxHeaderFilter, DxSearch, // ... } from 'devextreme-vue/gantt'; 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 Gantt, { 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 ( <Gantt ... > <Column ... > <HeaderFilter ... > <Search editorOptions={searchEditorOptions} // ... /> </HeaderFilter> </Column> </Gantt> ); }
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 topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.