Angular TreeList - Column Chooser

The column chooser allows a user to change the set of columns at runtime. It is configured using the columnChooser object and may operate in two modes: the default drag and drop mode and the select mode designed for touch devices.

HTML
TypeScript
  • <dx-tree-list ... >
  • <dxo-column-chooser
  • [enabled]="true"
  • mode="dragAndDrop"> <!-- or "select" -->
  • </dxo-column-chooser>
  • </dx-tree-list>
  • import { DxTreeListModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTreeListModule
  • ],
  • // ...
  • })

DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component TreeList ColumnChooser DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component TreeList ColumnChooser

Set a column's allowHiding property to false if it should never be hidden. For columns whose headers should never appear in the column chooser, set the showInColumnChooser property to false.

HTML
TypeScript
  • <dx-tree-list ... >
  • <dxo-column-chooser [enabled]="true"></dxo-column-chooser>
  • <dxi-column ...
  • [allowHiding]="false"> <!-- cannot be hidden -->
  • </dxi-column>
  • <dxi-column ...
  • [showInColumnChooser]="false"> <!-- does not appear in the column chooser even when hidden -->
  • </dxi-column>
  • </dx-tree-list>
  • import { DxTreeListModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTreeListModule
  • ],
  • // ...
  • })

Call the showColumnChooser() or hideColumnChooser() method to control the column chooser programmatically.

TypeScript
  • import { ..., ViewChild } from "@angular/core";
  • import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent;
  • // Prior to Angular 8
  • // @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent;
  • showColumnChooser () {
  • this.treeList.instance.showColumnChooser();
  • };
  • hideColumnChooser () {
  • this.treeList.instance.hideColumnChooser();
  • };
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTreeListModule
  • ],
  • // ...
  • })

View Demo

See Also