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 Widget TreeList ColumnChooser DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget TreeList ColumnChooser

Set a column's allowHiding option to false if it should never be hidden. For columns whose headers should never appear in the column chooser, set the showInColumnChooser option 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
$("#treeListContainer").dxTreeList("instance");
treeList.showColumnChooser();
treeList.hideColumnChooser();
See Also