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"
- }
- });
- });
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();
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.