User Interaction
Set the allowColumnReordering property to true to allow a user to reorder columns. If a specific column should not be moved, set its allowReordering property to false.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ // ... allowColumnReordering: true, columns: [ { dataField: "CompanyName", allowReordering: false }, // ... ] }); });
Angular
<dx-tree-list ... [allowColumnReordering]="true"> <dxi-column dataField="CompanyName" [allowReordering]="false"></dxi-column> </dx-tree-list>
import { DxTreeListModule } from "devextreme-angular"; // ... export class AppComponent { // ... } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
Vue
<template> <DxTreeList ... :allow-column-reordering="true"> <DxColumn data-field="CompanyName" :allow-reordering="false" /> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList, { DxColumn } from 'devextreme-vue/tree-list'; export default { components: { DxTreeList, DxColumn }, // ... } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList, { Column } from 'devextreme-react/tree-list'; export default function App() { return ( <TreeList ... allowColumnReordering={true}> <Column dataField="CompanyName" allowReordering={false} /> </TreeList> ); }
API
The columns array determines columns' order. You can reorder columns by moving their objects within the array or by changing the column's visibleIndex if you prefer to configure columns using the customizeColumns function.
jQuery
$(function() { $("#treeListContainer").dxTreeList({ // ... customizeColumns: function(columns) { columns[2].visibleIndex = 1; } }); });
Angular
import { DxTreeListModule } from "devextreme-angular"; // ... export class AppComponent { customizeColumns (columns) { columns[2].visibleIndex = 1; } } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
<dx-tree-list ... [customizeColumns]="customizeColumns"> </dx-tree-list>
Vue
<template> <DxTreeList ... :customize-columns="customizeColumns"> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList from 'devextreme-vue/tree-list'; export default { components: { DxTreeList }, methods: { customizeColumns(columns) { columns[2].visibleIndex = 1; } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList from 'devextreme-react/tree-list'; const customizeColumns = (columns) => { columns[2].visibleIndex = 1; }; export default function App() { return ( <TreeList ... customizeColumns={customizeColumns}> </TreeList> ); }
The visibleIndex property can also be changed at runtime to reorder columns regardless of the way you configured them. For this, call the columnOption(id, optionName, optionValue) method. The following code swaps the second and first column:
jQuery
$("#treeListContainer").dxTreeList("columnOption", 1, "visibleIndex", 0);
Angular
import { ..., ViewChild } from "@angular/core"; import { DxTreeListModule, DxTreeListComponent } from "devextreme-angular"; // ... export class AppComponent { @ViewChild(DxTreeListComponent, { static: false }) treeList: DxTreeListComponent; // Prior to Angular 8 // @ViewChild(DxTreeListComponent) treeList: DxTreeListComponent; swapColumns () { this.treeList.instance.columnOption(1, "visibleIndex", 0); } } @NgModule({ imports: [ // ... DxTreeListModule ], // ... })
Vue
<template> <DxTreeList ... > <DxColumn ... /> <DxColumn ... v-model:visible-index="secondColVisibleIndex" /> </DxTreeList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxTreeList, { DxColumn } from 'devextreme-vue/tree-list'; export default { components: { DxTreeList, DxColumn }, data() { return() { secondColVisibleIndex: 1 } }, methods: { swapColumns() { this.secondColVisibleIndex = 0; } } } </script>
React
import React, { useRef } from 'react'; import 'devextreme/dist/css/dx.light.css'; import TreeList from 'devextreme-react/tree-list'; export default function App() { const treeList = useRef(null); const swapColumns = () => { treeList.current.instance().columnOption(1, 'visibleIndex', 0); }; return ( <TreeList ref={treeList}> {/* ... */ } </TreeList> ); }
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.