React 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.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ columnChooser: { enabled: true, mode: "dragAndDrop" // or "select" } }); });
Angular
<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.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ columnChooser: { enabled: true }, columns: [{ // ... allowHiding: false // cannot be hidden }, { // ... showInColumnChooser: false // does not appear in the column chooser even when hidden }] }); });
Angular
<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.
jQuery
var treeList = $("#treeListContainer").dxTreeList("instance"); treeList.showColumnChooser(); treeList.hideColumnChooser();
Angular
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.