JavaScript/jQuery 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.

JavaScript
  • $(function() {
  • $("#treeListContainer").dxTreeList({
  • columnChooser: {
  • enabled: true,
  • mode: "dragAndDrop" // or "select"
  • }
  • });
  • });

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.

JavaScript
  • $(function() {
  • $("#treeListContainer").dxTreeList({
  • columnChooser: { enabled: true },
  • columns: [{
  • // ...
  • allowHiding: false // cannot be hidden
  • }, {
  • // ...
  • showInColumnChooser: false // does not appear in the column chooser even when hidden
  • }]
  • });
  • });

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

JavaScript
  • var treeList = $("#treeListContainer").dxTreeList("instance");
  • treeList.showColumnChooser();
  • treeList.hideColumnChooser();

View Demo

See Also