Column reordering in EJ2 JavaScript Gantt control

2 May 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 use the column reordering feature, inject the Reorder module to the Gantt control.

ej.gantt.Gantt.Inject(ej.gantt.Reorder);

var ganttChart = new ej.gantt.Gantt({
         dataSource: GanttData,
		 allowReordering: true,
	     taskFields: {
            id: 'TaskID',
            name: 'TaskName',
			startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
			parentID: 'ParentID'
        },
		height:'450px',
		splitterSettings:{
			columnIndex:5
		}
});
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/31.2.2/material.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <div id="container">
            <div id="Gantt"></div>        
        </div>
        <script>
        var ele = document.getElementById('container');
        if(ele) {
        ele.style.visibility = "visible";
        }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

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

Reorder multiple columns

Multiple columns can be reordered at a time by using the reorderColumns method.

ej.gantt.Gantt.Inject(ej.gantt.Reorder);

var ganttChart = new ej.gantt.Gantt({
         dataSource: GanttData,
		 allowReordering: true,
	     taskFields: {
            id: 'TaskID',
            name: 'TaskName',
			startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
			parentID: 'ParentID'
        },
		splitterSettings:{
		  position:'100%'
		},
		height:'450px',
		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' }
        ]
		
	});
ganttChart.appendTo('#Gantt');


var reorderMultipleCols = new ej.buttons.Button();
reorderMultipleCols.appendTo('#reorderMultipleCols');

document.getElementById('reorderMultipleCols').addEventListener('click', function(){
	ganttChart.reorderColumns(['TaskID','TaskName'],'Progress');
});
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/31.2.2/material.css" rel="stylesheet" type="text/css">        
        <script src="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

    <body>
        <div id="container">
            <button id="reorderMultipleCols">Reorder Task ID and Task Name to Last</button> 
            <div id="Gantt"></div>        
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>

Reorder Events

During the reorder action, the gantt component triggers the below three events.

  1. The columnDragStart event triggers when column header element drag (move) starts.
  2. The columnDrag event triggers when column header element is dragged (moved) continuously.
  3. The columnDrop event triggers when a column header element is dropped on the target column.
ej.gantt.Gantt.Inject(ej.gantt.Reorder);

var ganttChart = new ej.gantt.Gantt({
	dataSource: GanttData,
	allowReordering: true,
	taskFields: {
		id: 'TaskID',
		name: 'TaskName',
		startDate: 'StartDate',
		duration: 'Duration',
		progress: 'Progress',
		parentID: 'ParentID'
	},
	splitterSettings: {
		columnIndex: 4
	},
	height: '450px',
	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' }
	],
	columnDragStart: function () {
		console.log('columnDragStart event is Triggered');
	},
	columnDrag: function () {
		console.log('columnDrag event is Triggered');
	},
	columnDrop: function () {
		console.log('columnDrop event is Triggered');
	}
});
ganttChart.appendTo('#Gantt');
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>EJ2 Gantt</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Typescript Gantt Controls">
        <meta name="author" content="Syncfusion">
        <link href="index.css" rel="stylesheet">
        <link href="https://cdn.syncfusion.com/ej2/31.2.2/material.css" rel="stylesheet" type="text/css">
        <script src="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2.min.js" type="text/javascript"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
    <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
    <body>
        <div id="container">
            <div id="Gantt"></div>        
        </div>
        <script>
            var ele = document.getElementById('container');
            if(ele) {
            ele.style.visibility = "visible";
            }   
        </script>
        <script src="index.js" type="text/javascript"></script>
    </body>
</html>