Syncfusion AI Assistant

How can I help you?

Column reordering in Vue Gantt Chart component

3 Feb 202618 minutes to read

Column reordering can be done by dragging a column header from one index to another within the TreeGrid. To enable reordering, set the allowReordering property to true.

To reorder columns, inject the Reorder module in the provide section.

<template>
    <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
            :columns="columns" :allowReordering='true' :splitterSettings="splitterSettings"></ejs-gantt>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { GanttComponent as EjsGantt, Reorder } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
const data = editingData;
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks',
};
const height = '450px';
const splitterSettings = {
    columnIndex: 3
};
const columns = [
    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
    { field: 'TaskName', headerText: 'Task Name', width: '150' },
    { field: 'StartDate', headerText: 'Start Date', width: '150' },
    { field: 'Duration', headerText: 'Duration', width: '150' },
    { field: 'Progress', headerText: 'Progress', width: '150' },
];
provide('gantt', [Reorder]);
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :columns = "columns" :allowReordering = 'true' :splitterSettings = "splitterSettings"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, Reorder } from "@syncfusion/ej2-vue-gantt";
import { editingData  } from './data-source.js';

export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
         data: editingData,
         taskFields: {
             id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            },
            height:'450px',
            splitterSettings:{
            columnIndex:3
            },
        columns: [
            { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
            { field: 'TaskName', headerText: 'Task Name', width: '150' },
            { field: 'StartDate', headerText: 'Start Date', width: '150' },
            { field: 'Duration', headerText: 'Duration', width: '150' },
            { field: 'Progress', headerText: 'Progress', width: '150' },
        ]
      };
  },
  provide: {
      gantt: [Reorder]
  }
};
</script>

You can disable reordering for a particular column by setting the columns.allowReordering property to false.

Reorder Events

During the reorder action, the Gantt Chart component triggers the following events:

  1. The columnDragStart event triggers when the column header drag operation begins.
  2. The columnDrag event triggers while the column header is being dragged.
  3. The columnDrop event triggers when a column header is dropped onto a target column.
<template>
    <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
            :columns="columns" :allowReordering='true' :splitterSettings="splitterSettings" :columnDrag='columnDrag'
            :columnDrop='columnDrop' :columnDragStart='columnDragStart'></ejs-gantt>
    </div>
</template>
<script setup>
import { provide } from "vue";
import { GanttComponent as EjsGantt, Reorder } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
const data = editingData;
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks',
};
const height = '450px';
const splitterSettings = {
    columnIndex: 3
};
const columns = [
    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
    { field: 'TaskName', headerText: 'Task Name', width: '150' },
    { field: 'StartDate', headerText: 'Start Date', width: '150' },
    { field: 'Duration', headerText: 'Duration', width: '150' },
    { field: 'Progress', headerText: 'Progress', width: '150' },
]
const columnDragStart = function () {
    alert('columnDragStart event is Triggered');
}
const columnDrag = function () {
    alert('columnDrag event is Triggered');
}
const columnDrop = function () {
    alert('columnDrop event is Triggered');
}
provide('gantt', [Reorder]);
</script>
<template>
     <div>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height = "height" :columns = "columns" :allowReordering = 'true' :splitterSettings = "splitterSettings"
        :columnDrag='columnDrag' :columnDrop='columnDrop' :columnDragStart='columnDragStart'></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, Reorder } from "@syncfusion/ej2-vue-gantt";
import { editingData  } from './data-source.js';

export default {
name: "App",
components: {
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
         data: editingData,
         taskFields: {
             id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            },
            height:'450px',
            splitterSettings:{
            columnIndex:3
            },
        columns: [
            { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
            { field: 'TaskName', headerText: 'Task Name', width: '150' },
            { field: 'StartDate', headerText: 'Start Date', width: '150' },
            { field: 'Duration', headerText: 'Duration', width: '150' },
            { field: 'Progress', headerText: 'Progress', width: '150' },
        ]
      };
  },
    provide: {
        gantt: [Reorder]
    },
    methods: {
        columnDragStart: function() {
            alert('columnDragStart event is Triggered');
        },
        columnDrag: function() {
            alert('columnDrag event is Triggered');
        },
        columnDrop: function() {
            alert('columnDrop event is Triggered');
        }
    }
};
</script>

Reorder multiple columns

Multiple columns can be reordered at once using the reorderColumns method.

<template>
    <div>
        <ejs-button id="reorder" cssClass="e-info" v-on:click.native="change">Reorder</ejs-button>
        <br><br><br>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields="taskFields" :height="height"
            :columns="columns" :allowReordering='true' :splitterSettings="splitterSettings"></ejs-gantt>
    </div>
</template>
<script setup>
import { provide, ref } from "vue";
import { GanttComponent as EjsGantt, Reorder } from "@syncfusion/ej2-vue-gantt";
import { ButtonComponent as EjsButton } from "@syncfusion/ej2-vue-buttons";
import { editingData } from './data-source.js';
const gantt = ref(null); 
const data = editingData;
const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks',
};
const height = '450px';
const splitterSettings = {
    columnIndex: 3
};
const columns = [
    { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
    { field: 'TaskName', headerText: 'Task Name', width: '150' },
    { field: 'StartDate', headerText: 'Start Date', width: '150' },
    { field: 'Duration', headerText: 'Duration', width: '150' },
    { field: 'Progress', headerText: 'Progress', width: '150' },
]
const change = function (e) {
    var ganttChart = gantt.value.ej2Instances;
    ganttChart.reorderColumns(['TaskID', 'TaskName'], 'Progress');
}
provide('gantt', [Reorder]);
</script>
<template>
     <div>
        <ejs-button id="reorder" cssClass="e-info" v-on:click.native="change">Reorder</ejs-button>
        <br><br><br>
        <ejs-gantt ref='gantt' id="GanttContainer" :dataSource="data" :taskFields = "taskFields" :height="height" :columns = "columns" :allowReordering = 'true' :splitterSettings = "splitterSettings"></ejs-gantt>
    </div>
</template>
<script>

import { GanttComponent, Reorder } from "@syncfusion/ej2-vue-gantt";
import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
import { editingData  } from './data-source.js';


export default {
name: "App",
components: {
"ejs-button":ButtonComponent,
"ejs-gantt":GanttComponent
},
  data: function() {
      return{
            data: editingData,
            taskFields: {
             id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            },
            height:'450px',
            splitterSettings:{
            columnIndex:3
            },
        columns: [
            { field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: '100' },
            { field: 'TaskName', headerText: 'Task Name', width: '150' },
            { field: 'StartDate', headerText: 'Start Date', width: '150' },
            { field: 'Duration', headerText: 'Duration', width: '150' },
            { field: 'Progress', headerText: 'Progress', width: '150' },
        ]
      };
  },
  provide: {
      gantt: [Reorder]
  },
  methods: {
      change: function(e){
            var ganttChart = document.getElementById('GanttContainer').ej2_instances[0];
            ganttChart.reorderColumns(['TaskID','TaskName'],'Progress');
        }
    },
};
</script>