Sorting in EJ2 TypeScript Gantt Chart Control

8 Jul 202624 minutes to read

The Syncfusion^® EJ2 TypeScript 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.

index.ts
index.html
import { Gantt, Sort } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';

Gantt.Inject(Sort);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    allowSorting: true
});
gantt.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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>

    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>
    </div>
</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 TypeScript 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.

index.ts
index.html
import { Gantt, Sort, SortSettingsModel, TaskFieldsModel } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';

Gantt.Inject(Sort);

let taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
};

let sortingOptions: SortSettingsModel = {
    columns: [
        { field: 'TaskID', direction: 'Descending' },
        { field: 'TaskName', direction: 'Ascending' }
    ]
};

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: taskFields,
    allowSorting: true,
    sortSettings: sortingOptions
});

gantt.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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>
    </div>
</body>

</html>

Sort columns externally

You can externally sort columns, remove a specific sort, or clear all sorting in the Syncfusion^® EJ2 TypeScript Gantt Chart control using button clicks.

Add sort columns

You can externally sort a column in the Syncfusion^® EJ2 TypeScript Gantt Chart control using the sortColumn method with parameters for column name, sort direction, and multi-sort configuration.

index.ts
index.html
import { Gantt, Sort, TaskFieldsModel, SplitterSettingsModel } from '@syncfusion/ej2-gantt';
import { Button } from '@syncfusion/ej2-buttons';
import { GanttData } from './datasource.ts';

Gantt.Inject(Sort);

let taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
};

let splitterSettings: SplitterSettingsModel = {
    columnIndex: 3
};

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    allowSorting: true,
    taskFields: taskFields,
    splitterSettings: splitterSettings
});

gantt.appendTo('#Gantt');

let sortBtn: Button = new Button();
sortBtn.appendTo('#sortColumn');

document.getElementById('sortColumn')!.addEventListener('click', () => {
    gantt.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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <button id="sortColumn">Sort TaskName Column</button>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>
    </div>
</body>

</html>

Remove sort columns

You can externally remove sorting from a specific column in the Syncfusion^® EJ2 TypeScript Gantt Chart control using the removeSortColumn method by passing the column name.

index.ts
index.html
import { Gantt, Sort, TaskFieldsModel, ColumnModel, SplitterSettingsModel, SortSettingsModel } from '@syncfusion/ej2-gantt';
import { DropDownList } from '@syncfusion/ej2-dropdowns';
import { Button } from '@syncfusion/ej2-buttons';
import { GanttData } from './datasource.ts';

Gantt.Inject(Sort);

let taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
};

let columns: ColumnModel[] = [
    { 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 }
];

let splitterSettings: SplitterSettingsModel = {
    columnIndex: 3
};

let sortSettings: SortSettingsModel = {
    columns: [
        { field: 'TaskID', direction: 'Descending' },
        { field: 'TaskName', direction: 'Ascending' }
    ]
};

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '430px',
    allowSorting: true,
    taskFields: taskFields,
    columns: columns,
    splitterSettings: splitterSettings,
    sortSettings: sortSettings
});

gantt.appendTo('#Gantt');

let dropDown: DropDownList = new 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');

let button: Button = new Button({ cssClass: 'e-outline' });
button.appendTo('#removeSort');

document.getElementById('removeSort')!.addEventListener('click', () => {
    let field: string = dropDown.value as string;
    gantt.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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <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>
</body>

</html>

Clear sorting

You can clear all sorted columns in the Syncfusion^® EJ2 TypeScript Gantt Chart control using the clearSorting method to reset the Gantt Chart to its unsorted state.

index.ts
index.html
import { Gantt, Sort, TaskFieldsModel, SortSettingsModel } from '@syncfusion/ej2-gantt';
import { Button } from '@syncfusion/ej2-buttons';
import { GanttData } from './datasource.ts';

Gantt.Inject(Sort);

let taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    parentID: 'ParentID'
};

let sortSettings: SortSettingsModel = {
    columns: [
        { field: 'TaskID', direction: 'Descending' },
        { field: 'TaskName', direction: 'Ascending' }
    ]
};

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    allowSorting: true,
    taskFields: taskFields,
    sortSettings: sortSettings
});

gantt.appendTo('#Gantt');

let clearBtn: Button = new Button();
clearBtn.appendTo('#clearSorting');

document.getElementById('clearSorting')!.addEventListener('click', () => {
    gantt.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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <button id="clearSorting">Clear Sorting</button>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>
    </div>
</body>

</html>

Customize sort icon

You can customize the sort icons in the Syncfusion^® EJ2 TypeScript 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';
}

index.ts
index.html
import { Gantt, Sort } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';

Gantt.Inject(Sort);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '450px',
    taskFields: {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        parentID: 'ParentID'
    },
    allowSorting: true
});
gantt.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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        .e-gantt .e-icon-ascending::before {
            content: '\e7aa';
        }

        .e-gantt .e-icon-descending::before {
            content: '\e71f';
        }
    </style>
</head>

<body>

    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>
    </div>
</body>

</html>

Custom sorting

You can customize the default sort behavior for a column in the Syncfusion^® EJ2 TypeScript 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.

index.ts
index.html
import { Gantt, Sort, TaskFieldsModel, ColumnModel, SplitterSettingsModel, SortSettingsModel } from '@syncfusion/ej2-gantt';
import { GanttData } from './datasource.ts';

Gantt.Inject(Sort);

function customSortComparer(reference: any, comparer: any): number {
    if (reference < comparer) return -1;
    if (reference > comparer) return 1;
    return 0;
}

let taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
};

let columns: ColumnModel[] = [
    { 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 }
];

let splitterSettings: SplitterSettingsModel = {
    columnIndex: 3
};

let sortSettings: SortSettingsModel = {
    columns: [
        { field: 'TaskID', direction: 'Descending' },
        { field: 'StartDate', direction: 'Ascending' }
    ]
};

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: '430px',
    allowSorting: true,
    taskFields: taskFields,
    columns: columns,
    splitterSettings: splitterSettings,
    sortSettings: sortSettings
});

gantt.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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>

    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>
    </div>
</body>

</html>

Display null values always at bottom

You can customize the sorting behavior in the Syncfusion^® EJ2 TypeScript 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.

index.ts
index.html
import { Gantt, Sort, TaskFieldsModel, ColumnModel, SplitterSettingsModel, SortEventArgs } from '@syncfusion/ej2-gantt';
import { data } from './datasource.ts';

Gantt.Inject(Sort);

let currentSortOrder: 'Ascending' | 'Descending' = 'Ascending';

function customSortComparer(reference: string | null, comparer: string | null): number {
    const sortAsc: boolean = 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;
}

let taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
};

let columns: ColumnModel[] = [
    { 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 }
];

let splitterSettings: SplitterSettingsModel = {
    columnIndex: 3
};

let gantt: Gantt = new Gantt({
    dataSource: data,
    height: '430px',
    allowSorting: true,
    taskFields: taskFields,
    columns: columns,
    splitterSettings: splitterSettings,
    actionBegin: (args: SortEventArgs) => {
        if (args.requestType === 'sorting') {
            currentSortOrder = args.direction as 'Ascending' | 'Descending';
        }
    }
});

gantt.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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>

    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>
    </div>
</body>

</html>

Sorting custom columns

You can sort custom columns of various types such as string or numeric in the Syncfusion^® EJ2 TypeScript 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.

index.ts
index.html
import { Gantt, Sort, TaskFieldsModel, ColumnModel, SplitterSettingsModel } from '@syncfusion/ej2-gantt';
import { Button } from '@syncfusion/ej2-buttons';
import { data } from './datasource.ts';

Gantt.Inject(Sort);

let taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
};

let splitterSettings: SplitterSettingsModel = {
    columnIndex: 3
};

let columns: ColumnModel[] = [
    { 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 }
];

let gantt: Gantt = new Gantt({
    dataSource: data,
    height: '430px',
    allowSorting: true,
    taskFields: taskFields,
    splitterSettings: splitterSettings,
    columns: columns
});

gantt.appendTo('#Gantt');

let sortBtn: Button = new Button({ cssClass: 'e-outline' });
sortBtn.appendTo('#sortCustom');

document.getElementById('sortCustom')!.addEventListener('click', () => {
    gantt.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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <button id="sortCustom">Sort Custom Column</button>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>
    </div>
</body>

</html>

Prevent sorting on specific columns

You can prevent sorting on specific columns in the Syncfusion^® EJ2 TypeScript 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.

index.ts
index.html
import { Gantt, Sort, TaskFieldsModel, ColumnModel, SplitterSettingsModel } from '@syncfusion/ej2-gantt';
import { data } from './datasource.ts';

Gantt.Inject(Sort);

let message: string = '';

let taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
};

let columns: ColumnModel[] = [
    { 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 }
];

let splitterSettings: SplitterSettingsModel = {
    columnIndex: 3
};

let gantt: Gantt = new Gantt({
    dataSource: data,
    height: '430px',
    allowSorting: true,
    taskFields: taskFields,
    columns: columns,
    splitterSettings: splitterSettings,
    actionBegin: (args: any) => {
        if (args.requestType === 'sorting' && args.columnName === 'TaskID') {
            message = `${args.requestType} action cancelled for ${args.columnName} column`;
            args.cancel = true;
            updateMessage();
        }
    },
    actionComplete: (args: any) => {
        if (args.requestType === 'sorting' && args.columnName === 'StartDate') {
            message = `${args.requestType} action cancelled for ${args.columnName} column`;
            updateMessage();
        }
    }
});

gantt.appendTo('#Gantt');

function updateMessage(): void {
    const 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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>

    <div id='loader'>Loading....</div>
    <div id='container'>
        <div style="margin-left:100px;">
            <p id="message" style="color:red;"></p>
        </div>
        <div id='Gantt'></div>
    </div>
</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.

index.ts
index.html
import { Gantt, Sort, TaskFieldsModel, ColumnModel, SplitterSettingsModel, SortSettingsModel } from '@syncfusion/ej2-gantt';
import { data } from './datasource.ts';

Gantt.Inject(Sort);

let taskFields: TaskFieldsModel = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
};

let columns: ColumnModel[] = [
    { 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 }
];

let splitterSettings: SplitterSettingsModel = {
    columnIndex: 3
};

let sortSettings: SortSettingsModel = {
    allowUnsort: false
};

let gantt: Gantt = new Gantt({
    dataSource: data,
    height: '430px',
    allowSorting: true,
    taskFields: taskFields,
    columns: columns,
    splitterSettings: splitterSettings,
    sortSettings: sortSettings
});

gantt.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/34.1.29/tailwind3.css" rel="stylesheet" type="text/css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>

    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='Gantt'></div>
    </div>
</body>

</html>

Touch interaction

To perform a tap action on a column header in the Syncfusion^® EJ2 TypeScript 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.

Multiple Sorting

Search docs

Ask Syncfusion AI Assistant