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.
- <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
- ],
- // ...
- })
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.
- <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.
- 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
- ],
- // ...
- })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.