Column reorder in Vue Treegrid component
16 Mar 20234 minutes to read
Reordering can be done by drag and drop of a particular column header from one index to another index within the treegrid. To enable reordering, set the allowReordering
to true.
To use reordering, inject the Reorder
module in the treegrid.
<template>
<div id="app">
<ejs-treegrid :dataSource="data" childMapping='subtasks' :allowReordering='true' :treeColumnIndex='1' height='285px'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width=90 textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width=180></e-column>
<e-column field='startDate' headerText='Start Date' width=90 format="yMd" textAlign='Right'></e-column>
<e-column field='duration' headerText='Duration' width=80 textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin, Reorder } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
Vue.use(TreeGridPlugin);
export default {
data() {
return {
data: sampleData,
};
},
provide: {
treegrid: [ Reorder ]
}
}
</script>
You can disable reordering a particular column by setting the
columns.allowReordering
to false.
Reorder multiple columns
Multiple columns can be reordered at a time by using the reorderColumns
method.
<template>
<div id="app">
<ejs-button id='reorderMultipleCols' @click.native='reorder'>Reorder TASK ID AND DURATION TO LAST</ejs-button>
<ejs-treegrid ref='treegrid' :dataSource="data" childMapping='subtasks' :allowReordering='true' :treeColumnIndex='1' height='285px'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width=90 textAlign='Right'></e-column>
<e-column field='taskName' headerText='Task Name' width=180></e-column>
<e-column field='duration' headerText='Duration' width=80 textAlign='Right'></e-column>
<e-column field='progress' headerText='Progress' width=80 textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin, Reorder } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
Vue.use(TreeGridPlugin);
Vue.use(ButtonPlugin);
export default {
data() {
return {
data: sampleData,
};
},
provide: {
treegrid: [ Reorder ]
},
methods:{
reorder: function() {
this.$refs.treegrid.reorderColumns(['taskID','duration'],'progress');
}
}
}
</script>