Angular TreeList - columnChooser.search

Configures the column chooser's search functionality.

Selector: dxo-search

app.component.html
app.component.ts
app.module.ts
  • <dx-tree-list ... >
  • <dxo-column-chooser ... >
  • <dxo-search
  • [editorOptions]="searchEditorOptions"
  • [enabled]="true"
  • [timeout]="800"
  • ></dxo-search>
  • </dxo-column-chooser>
  • </dx-tree-list>
  • 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 { DxTreeListModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxTreeListModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  •  
  • export class AppModule { }

editorOptions

Configures the search box.

Type: any
Default Value: {}

See the TextBox Configuration topic for information about properties you can specify in this object.

NOTE
The nested component that configures the editorOptions property does not support event bindings and two-way property bindings.
app.component.html
app.component.ts
app.module.ts
  • <dx-tree-list ... >
  • <dxo-column-chooser ... >
  • <dxo-search
  • [editorOptions]="searchEditorOptions"
  • // ...
  • ></dxo-search>
  • </dxo-column-chooser>
  • </dx-tree-list>
  • 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 { DxTreeListModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxTreeListModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  •  
  • export class AppModule { }

enabled

Specifies whether search is enabled in the column chooser.

Type:

Boolean

Default Value: false

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