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.

App.vue
  • <template>
  • <DxTreeList ... >
  • <DxColumnChooser
  • :enabled="true"
  • mode="dragAndDrop" <!-- or "select" -->
  • />
  • </DxTreeList>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxTreeList, {
  • DxColumnChooser
  • } from 'devextreme-vue/tree-list';
  •  
  • export default {
  • components: {
  • DxTreeList,
  • DxColumnChooser
  • },
  • // ...
  • }
  • </script>

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.

App.vue
  • <template>
  • <DxTreeList ... >
  • <DxColumnChooser
  • :enabled="true"
  • />
  • <DxColumn ...
  • :allow-hiding="false" <!-- cannot be hidden -->
  • />
  • <DxColumn ...
  • :show-in-column-chooser="false" <!-- does not appear in the column chooser even when hidden -->
  • />
  • </DxTreeList>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxTreeList, {
  • DxColumnChooser,
  • DxColumn
  • } from 'devextreme-vue/tree-list';
  •  
  • export default {
  • components: {
  • DxTreeList,
  • DxColumnChooser,
  • DxColumn
  • },
  • // ...
  • }
  • </script>

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

App.vue
  • <template>
  • <DxTreeList ...
  • :ref="treeListRefKey">
  • </DxTreeList>
  • </template>
  •  
  • <script>
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import DxTreeList from 'devextreme-vue/tree-list';
  •  
  • const treeListRefKey = "my-tree-list";
  •  
  • export default {
  • components: {
  • DxTreeList
  • },
  • data() {
  • return() {
  • treeListRefKey
  • }
  • },
  • methods: {
  • showColumnChooser() {
  • this.treeList.showColumnChooser();
  • },
  • hideColumnChooser() {
  • this.treeList.hideColumnChooser();
  • }
  • },
  • computed: {
  • treeList: function() {
  • return this.$refs[treeListRefKey].instance;
  • }
  • }
  • }
  • </script>

View Demo

See Also