Column reorder in Vue Treegrid component

30 Aug 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.

app.vue

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

app.vue

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