Column Sorting with Multi-Sort Support in EJ2 JavaScript Gantt Chart
10 Oct 202624 minutes to read
The Syncfusion® EJ2 JavaScript Gantt Chart control provides sorting functionality to arrange task data in ascending or descending order based on column values.
To enable sorting, set the allowSorting property to true. You can configure sorting behavior using the sortSettings property.
Sorting is applied by clicking a column header. For multi-column sorting, hold the CTRL key while selecting additional headers. To remove sorting from a specific column in a multi-sorted view, hold the SHIFT key and click the column header. For details on keyboard interactions, refer to the selection keyboard interaction documentation.
To enable sorting functionality, inject the Sort module into the Gantt control.
ej.gantt.Gantt.Inject(ej.gantt.Sort);
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
allowSorting: true
});
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/35.1.37/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.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>
- The Gantt columns are sorted in the ascending order. If you click the already sorted column, the sort direction toggles.
- To disable sorting for a particular column, set the columns.allowSorting property to false.
Initial sorting
You can apply sorting during the initial render of the Syncfusion EJ2 JavaScript Gantt Chart control by configuring the sortSettings.columns property. Each column should be defined with a specific field and direction, ensuring that the Gantt loads with the desired sort order applied to the specified columns.
The following code example shows how to add sorted columns during Gantt initialization, with field set to TaskID and direction to Descending, and another with field as TaskName and direction as Ascending.
ej.gantt.Gantt.Inject(ej.gantt.Sort);
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
allowSorting: true,
sortSettings: {
columns: [
{ field: 'TaskID', direction: 'Descending' },
{ field: 'TaskName', direction: 'Ascending' }
]
}
});
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/35.1.37/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.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>Sort columns externally
You can externally sort columns, remove a specific sort, or clear all sorting in the Syncfusion® EJ2 JavaScript Gantt Chart control using button clicks.
Add sort columns
You can externally sort a column in the Syncfusion® EJ2 JavaScript Gantt Chart control using the sortColumn method with parameters for column name, sort direction, and multi-sort configuration.
ej.gantt.Gantt.Inject(ej.gantt.Sort);
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '450px',
allowSorting: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
splitterSettings: {
columnIndex: 3
}
});
ganttChart.appendTo('#Gantt');
var sortBtn = new ej.buttons.Button();
sortBtn.appendTo('#sortColumn');
document.getElementById('sortColumn').addEventListener('click', function () {
ganttChart.sortModule.sortColumn('TaskID', 'Descending', false);
});<!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/35.1.37/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<button id="sortColumn">Sort TaskName Column</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>Remove sort columns
You can externally remove sorting from a specific column in the Syncfusion® EJ2 JavaScript Gantt Chart control using the removeSortColumn method by passing the column name.
ej.gantt.Gantt.Inject(ej.gantt.Sort);
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '430px',
allowSorting: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 120 },
{ field: 'TaskName', headerText: 'Task Name', width: 250 },
{ field: 'StartDate', headerText: 'Start Date', width: 150 },
{ field: 'Duration', headerText: 'Duration', width: 150 },
{ field: 'Progress', headerText: 'Progress', width: 150 }
],
splitterSettings: {
columnIndex: 3
},
sortSettings: {
columns: [
{ field: 'TaskID', direction: 'Descending' },
{ field: 'TaskName', direction: 'Ascending' }
]
}
});
ganttChart.appendTo('#Gantt');
var dropDown = new ej.dropdowns.DropDownList({
dataSource: [
{ text: 'Task ID', value: 'TaskID' },
{ text: 'Task Name', value: 'TaskName' },
{ text: 'Start Date', value: 'StartDate' },
{ text: 'Duration', value: 'Duration' },
{ text: 'Progress', value: 'Progress' }
],
fields: { text: 'text', value: 'value' },
index: 0,
width: '120px'
});
dropDown.appendTo('#columns');
var btn = new ej.buttons.Button({ cssClass: 'e-outline' });
btn.appendTo('#removeSort');
document.getElementById('removeSort').addEventListener('click', function () {
var field = dropDown.value;
ganttChart.removeSortColumn(field);
});<!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/35.1.37/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div style="display:flex; align-items:center; gap:10px; margin-bottom:20px;">
<label style="margin-right:10px; font-weight:bold;">
Column name:
</label>
<input type="text" id="columns" />
<button id="removeSort">Remove sort column</button>
</div>
<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>Clear sorting
You can clear all sorted columns in the Syncfusion® EJ2 JavaScript Gantt Chart control using the clearSorting method to reset the Gantt Chart to its unsorted state.
ej.gantt.Gantt.Inject(ej.gantt.Sort);
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '450px',
allowSorting: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
parentID: 'ParentID'
},
sortSettings: {
columns: [
{ field: 'TaskID', direction: 'Descending' },
{ field: 'TaskName', direction: 'Ascending' }
]
}
});
ganttChart.appendTo('#Gantt');
var clearBtn = new ej.buttons.Button();
clearBtn.appendTo('#clearSorting');
document.getElementById('clearSorting').addEventListener('click', function () {
ganttChart.clearSorting();
});<!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/35.1.37/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<button id="clearSorting">Clear Sorting</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>Customize sort icon
You can customize the sort icons in the Syncfusion® EJ2 JavaScript Gantt Chart control by overriding the .e-icon-ascending and .e-icon-descending CSS classes using the content property, as shown below:
.e-gantt .e-icon-ascending::before {
content: '\e7aa';
}
.e-gantt .e-icon-descending::before {
content: '\e71f';
}ej.gantt.Gantt.Inject(ej.gantt.Sort);
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '450px',
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
allowSorting: true
});
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/35.1.37/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
<style>
.e-gantt .e-icon-ascending::before {
content: '\e7aa';
}
.e-gantt .e-icon-descending::before {
content: '\e71f';
}
</style>
</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>Custom sorting
You can customize the default sort behavior for a column in the Syncfusion® EJ2 JavaScript Gantt Chart control by assigning a column.sortComparer function to define custom sorting logic.
The sorting process includes the following steps:
- Ascending → Descending → Clear Sorting (resets to original data source order).
- Child records are sorted within their respective parent groups.
- Null values in child records appear at the bottom of each parent group, not across the entire Gantt Chart dataset.
ej.gantt.Gantt.Inject(ej.gantt.Sort);
function customSortComparer(reference, comparer) {
if (reference < comparer) return -1;
if (reference > comparer) return 1;
return 0;
}
var ganttChart = new ej.gantt.Gantt({
dataSource: GanttData,
height: '430px',
allowSorting: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 120 },
{ field: 'TaskName', headerText: 'Task Name', width: 250, sortComparer: customSortComparer },
{ field: 'StartDate', headerText: 'Start Date', width: 150 },
{ field: 'Duration', headerText: 'Duration', width: 150 },
{ field: 'Progress', headerText: 'Progress', width: 150 }
],
splitterSettings: {
columnIndex: 3
},
sortSettings: {
columns: [
{ field: 'TaskID', direction: 'Descending' },
{ field: 'StartDate', direction: 'Ascending' }
]
}
});
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/35.1.37/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.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>Display null values always at bottom
You can customize the sorting behavior in the Syncfusion® EJ2 JavaScript Gantt Chart control to make null values consistently appear at the bottom, regardless of sort direction, by defining a column-level column.sortComparer function. By default, null values are placed at the bottom when sorting in ascending order and at the top when sorting in descending order. Applying a custom sortComparer helps override this default logic and is particularly useful when working with datasets where null entries should be visually separated from valid data.
The example below demonstrates how to display null values at the bottom of the Gantt Chart while sorting the TaskName column in both ascending and descending order.
ej.gantt.Gantt.Inject(ej.gantt.Sort);
var currentSortOrder = 'Ascending';
function customSortComparer(reference, comparer) {
var sortAsc = currentSortOrder === 'Ascending';
if (reference === null && comparer === null) return 0;
if (reference === null) return 1;
if (comparer === null) return -1;
if (reference < comparer) return sortAsc ? -1 : 1;
if (reference > comparer) return sortAsc ? 1 : -1;
return 0;
}
var ganttChart = new ej.gantt.Gantt({
dataSource: data,
height: '430px',
allowSorting: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 120 },
{ field: 'TaskName', headerText: 'Task Name', width: 250, sortComparer: customSortComparer },
{ field: 'StartDate', headerText: 'Start Date', width: 150 },
{ field: 'Duration', headerText: 'Duration', width: 150 },
{ field: 'Progress', headerText: 'Progress', width: 150 }
],
splitterSettings: {
columnIndex: 3
},
actionBegin: function (args) {
if (args.requestType === 'sorting') {
currentSortOrder = args.direction;
}
}
});
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/35.1.37/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.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>Sorting custom columns
You can sort custom columns of various types such as string or numeric in the Syncfusion® EJ2 JavaScript Gantt Chart control by adding them to the column collection. Initial sorting can be configured using the sortSettings property, or sorting can be triggered dynamically through external actions such as a button click.
The following code snippet demonstrates how to sort the CustomColumn using an external button.
ej.gantt.Gantt.Inject(ej.gantt.Sort);
var ganttChart = new ej.gantt.Gantt({
dataSource: data,
height: '430px',
allowSorting: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
splitterSettings: {
columnIndex: 3
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', width: 100 },
{ field: 'TaskName', headerText: 'Task Name', width: 200 },
{ field: 'StartDate', headerText: 'Start Date', width: 150 },
{ field: 'Duration', headerText: 'Duration', width: 100 },
{ field: 'Progress', headerText: 'Progress', width: 100 },
{ field: 'CustomColumn', headerText: 'Custom Column', width: 150 }
]
});
ganttChart.appendTo('#Gantt');
var sortBtn = new ej.buttons.Button({ cssClass: 'e-outline' });
sortBtn.appendTo('#sortCustom');
document.getElementById('sortCustom').addEventListener('click', function () {
ganttChart.sortModule.sortColumn('CustomColumn', 'Ascending', false);
});<!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/35.1.37/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<button id="sortCustom">Sort Custom Column</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>Prevent sorting on specific columns
You can prevent sorting on specific columns in the Syncfusion® EJ2 JavaScript Gantt Chart control by handling the actionBegin or actionComplete events. Alternatively, you can disable sorting for a column by setting its allowSorting property to false in the column configuration.
The following sample demonstrates how to prevent sorting for the TaskID and StartDate columns.
ej.gantt.Gantt.Inject(ej.gantt.Sort);
var message = '';
var ganttChart = new ej.gantt.Gantt({
dataSource: data,
height: '430px',
allowSorting: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
splitterSettings: {
columnIndex: 3
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
{ field: 'TaskName', headerText: 'Task Name', width: 250 },
{ field: 'StartDate', headerText: 'Start Date', width: 150 },
{ field: 'Duration', headerText: 'Duration', width: 150 },
{ field: 'Progress', headerText: 'Progress', width: 150 }
],
actionBegin: function (args) {
if (args.requestType === 'sorting' && args.columnName === 'TaskID') {
message = args.requestType + ' action cancelled for ' + args.columnName + ' column';
args.cancel = true;
updateMessage();
}
},
actionComplete: function (args) {
if (args.requestType === 'sorting' && args.columnName === 'StartDate') {
message = args.requestType + ' action cancelled for ' + args.columnName + ' column';
updateMessage();
}
}
});
ganttChart.appendTo('#Gantt');
function updateMessage() {
var msgElement = document.getElementById('message');
if (msgElement) {
msgElement.innerText = message;
}
}<!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/35.1.37/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.js" type="text/javascript"></script>
</head>
<body>
<div id="container">
<div style="margin-left:100px;">
<p id="message" style="color:red;"></p>
</div>
<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>Disable clear sort
By default, clicking a column header switches the sort order between ascending, descending, and unsorted. To restrict this to only ascending and descending, set sortSettings.allowUnsort to false. This ensures sorting remains active without reverting to an unsorted state.
ej.gantt.Gantt.Inject(ej.gantt.Sort);
var ganttChart = new ej.gantt.Gantt({
dataSource: data,
height: '430px',
allowSorting: true,
taskFields: {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentID'
},
columns: [
{ field: 'TaskID', headerText: 'Task ID', textAlign: 'Left', width: 100 },
{ field: 'TaskName', headerText: 'Task Name', width: 250 },
{ field: 'StartDate', headerText: 'Start Date', width: 150 },
{ field: 'Duration', headerText: 'Duration', width: 150 },
{ field: 'Progress', headerText: 'Progress', width: 150 }
],
splitterSettings: {
columnIndex: 3
},
sortSettings: {
allowUnsort: false
}
});
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/35.1.37/tailwind3.css" rel="stylesheet" type="text/css">
<script src="https://cdn.syncfusion.com/ej2/35.1.37/dist/ej2.min.js" type="text/javascript"></script>
<script src="es5-datasource.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>Touch interaction
To perform a tap action on a column header in the Syncfusion® EJ2 JavaScript Gantt Chart control, the sorting operation is triggered for the selected column. A popup appears when multi-column sorting is enabled. To sort multiple columns, tap the popup and then tap the desired column headers. The following screenshot shows Gantt touch sorting.
