Vue 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>
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>
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.