Column reordering in Vue Gantt component
16 Mar 202311 minutes to read
The column reordering can be done by dragging a column header from one index to another index within the TreeGrid. To enable reordering, set the allowReordering
property to true
.
To reorder the 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>
import Vue from "vue";
import { GanttPlugin, Reorder } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
Vue.use(GanttPlugin);
export default {
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 the reordering of a particular column by setting the
columns.allowReordering
property tofalse
.
Reorder Events
During the reorder action, the gantt component triggers the below three events.
- The
columnDragStart
event triggers when column header element drag (move) starts. - The
columnDrag
event triggers when column header element is dragged (moved) continuously. - The
columnDrop
event triggers when a column header element is dropped on the 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>
import Vue from "vue";
import { GanttPlugin, Reorder } from "@syncfusion/ej2-vue-gantt";
import { editingData } from './data-source.js';
Vue.use(GanttPlugin);
export default {
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 a time by 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>
import Vue from "vue";
import { GanttPlugin, Reorder } from "@syncfusion/ej2-vue-gantt";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { editingData } from './data-source.js';
Vue.use(GanttPlugin);
Vue.use(ButtonPlugin);
export default {
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>