Angular Gantt - headerFilter
Selector: dxo-header-filter
Type:
The header filter allows users to filter values in an individual column. The header filter is a popup window that contains all unique values of a column. A click on the filter icon invokes the header filter.
Set the headerFilter.visible property to true to display filter icons for all columns. To hide the filter icon for an individual column, set the column’s allowHeaderFiltering property to false.
app.component.html
app.component.ts
app.module.ts
- <dx-gantt ... >
- <dxo-header-filter
- [visible]="true"
- [width]="280"
- [height]="350"
- [searchTimeout]="800" >
- </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 {
- // ...
- }
- import { BrowserModule } from '@angular/platform-browser';
- import { NgModule } from '@angular/core';
- import { AppComponent } from './app.component';
- import { DxGanttModule } from 'devextreme-angular';
- @NgModule({
- imports: [
- BrowserModule,
- DxGanttModule
- ],
- declarations: [AppComponent],
- bootstrap: [AppComponent]
- })
- export class AppModule { }
See Also
search
Selector: dxo-search
Type:
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 { }
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.