React

Search results

Sorting in React Gantt component

15 Oct 2021 / 6 minutes to read

Sorting enables you to sort data in the ascending or descending order. To sort a column, click the column header.

To sort multiple columns, press and hold the CTRL key and click the column header. You can clear sorting of any one of the multi-sorted columns by pressing and holding the SHIFT key and clicking the specific column header.

To enable sorting in the Gantt component, set the allowSorting property to true. Sorting options can be configured through the sortSettings property.

To sort, inject the Sort module into the Gantt component.

Source

Preview

index.tsx

index.html

App.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Sort } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
  };
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields}
          allowSorting={true} height='450px'>
         <Inject services={[Sort]} />
        </GanttComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('root'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Sort } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
    }
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} allowSorting={true} height='450px'>
         <Inject services={[Sort]}/>
        </GanttComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));

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.

Sorting column on Gantt initialization

The Gantt component can be rendered with sorted columns initially, and this can be achieved by using the sortSettings property. You can add columns that are sorted initially in the sortSettings.columns collection defined with field and direction properties. The following code example shows how to add the sorted column to Gantt initialization.

Source

Preview

index.tsx

index.html

App.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Sort, SortSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    child: 'subtasks'
  };
  public sortingOptions: SortSettingsModel = { columns: [{ field: 'TaskID', direction: 'Descending' }] };
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} sortSettings={this.sortingOptions} allowSorting={true} height='450px'>
          <Inject services={[Sort]} />
        </GanttComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('root'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Sort } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
        this.sortingOptions = { columns: [{ field: 'TaskID', direction: 'Descending' }] };
    }
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} sortSettings={this.sortingOptions} allowSorting={true} height='450px'>
          <Inject services={[Sort]}/>
        </GanttComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));

Sorting column dynamically

Columns in the Gantt component can be sorted dynamically using the sortColumn method. The following code example demonstrates how to invoke the sortColumn method by clicking the custom button.

Source

Preview

index.tsx

index.html

App.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Sort } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
   private gantt: any;
    public taskFields: any = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks'
    };

    public clickHandler() {
        this.gantt.sortModule.sortColumn('TaskID', "Descending", false);
    }
    render() {
        return (<div>
            <ButtonComponent onClick={this.clickHandler.bind(this)}>Sort Column</ButtonComponent>
            <GanttComponent dataSource={data} ref={g => this.gantt = g} taskFields={this.taskFields}
                allowSorting={true} height='450px'>
               <Inject services={[Sort]} />
            </GanttComponent></div>)
    }
};
ReactDOM.render(<App />, document.getElementById('root'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Sort } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
    }
    clickHandler() {
        this.gantt.sortModule.sortColumn('TaskID', "Descending", false);
    }
    render() {
        return (<div>
            <ButtonComponent onClick={this.clickHandler.bind(this)}>Sort Column</ButtonComponent>
            <GanttComponent dataSource={data} ref={g => this.gantt = g} taskFields={this.taskFields} allowSorting={true} height='450px'>
               <Inject services={[Sort]}/>
            </GanttComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));

Clear all the sorted columns dynamically

In the Gantt component, you can clear all the sorted columns and return to previous position using the clearSorting public method. The following code snippet shows how to clear all the sorted columns by clicking the custom button.

Source

Preview

index.tsx

index.html

App.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Sort, SortSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    child: 'subtasks',
  };
  private ganttInstance: any;
  public sortingOptions: SortSettingsModel = { columns: [{ field: 'TaskID', direction: 'Descending' }] };
  public clickHandler(){
  this.ganttInstance.clearSorting();
}
    render() {
        return (<div>
            <ButtonComponent onClick= { this.clickHandler.bind(this)}>Clear Sorting</ButtonComponent>
            <GanttComponent dataSource={data} taskFields={this.taskFields}  ref={gantt => this.ganttInstance = gantt} allowSorting={true} sortSettings={this.sortingOptions} height='450px'>
          <Inject services={[Sort]} />
        </GanttComponent></div>)
    }
};
ReactDOM.render(<App />, document.getElementById('root'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Sort } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            child: 'subtasks',
        };
        this.sortingOptions = { columns: [{ field: 'TaskID', direction: 'Descending' }] };
    }
    clickHandler() {
        this.ganttInstance.clearSorting();
    }
    render() {
        return (<div>
            <ButtonComponent onClick={this.clickHandler.bind(this)}>Clear Sorting</ButtonComponent>
            <GanttComponent dataSource={data} taskFields={this.taskFields} ref={gantt => this.ganttInstance = gantt} allowSorting={true} sortSettings={this.sortingOptions} height='450px'>
          <Inject services={[Sort]}/>
        </GanttComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));

Sorting events

During the sort action, the Gantt component triggers two events. The actionBegin event triggers before the sort action starts, and the actionComplete event triggers after the sort action is completed.

Source

Preview

index.tsx

index.html

App.jsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Sort  } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
    public taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    child: 'subtasks'
  };
  public actionHandler (args: any) {
        alert(args.requestType + ' ' + args.type);
    }
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} allowSorting={true}
        actionBegin={this.actionHandler.bind(this)} actionComplete={this.actionHandler.bind(this)} height='450px'>
          <Inject services={[Sort]} />
        </GanttComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('root'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Sort } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            dependency: 'Predecessor',
            child: 'subtasks'
        };
    }
    actionHandler(args) {
        alert(args.requestType + ' ' + args.type);
    }
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} allowSorting={true} actionBegin={this.actionHandler.bind(this)} actionComplete={this.actionHandler.bind(this)} height='450px'>
          <Inject services={[Sort]}/>
        </GanttComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));

The args.requestType is the current action name. For example, for sorting the args.requestType, value is sorting.

Custom Sorting

In Gantt, you can sort custom columns of different types like string, numeric, etc., By adding the custom column in the column collection, you can perform initial sort using the sortSettings or you can also sort the column dynamically by a button click.

The following code snippets explains how to achieve this.

Source

Preview

index.jsx

index.tsx

index.html

let GanttData = [
    {
        TaskID: 1,
        TaskName: 'Project Initiation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, /*CustomColumn: 'BCustomColumn'*/ CustomColumn: '2' },
            { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, /*CustomColumn: 'BCustomColumn'*/ CustomColumn: '3' },
            { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, /*CustomColumn: 'BCustomColumn'*/ CustomColumn: '4' },
        ]
    },
    {
        TaskID: 5,
        TaskName: 'Project Estimation',
        StartDate: new Date('04/02/2019'),
        EndDate: new Date('04/21/2019'),
        subtasks: [
            { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, /*CustomColumn: 'BCustomColumn'*/ CustomColumn: '6' },
            { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, /*CustomColumn: 'BCustomColumn'*/ CustomColumn: '1' },
            { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, /*CustomColumn: 'BCustomColumn'*/ CustomColumn: '5' }
        ]
    },
];
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Sort, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
    }
    clickHandler() {
        this.gantt.sortModule.sortColumn('CustomColumn', 'Ascending', false);
    }
    render() {
        return (<div>
            <ButtonComponent onClick={this.clickHandler.bind(this)}>Sort Custom Column</ButtonComponent>
            <GanttComponent dataSource={GanttData} ref={gantt => this.ganttInstance = gantt} taskFields={this.taskFields} allowSorting={true} height='450px'>
            <ColumnsDirective>
              <ColumnDirective field='TaskID'></ColumnDirective>
              <ColumnDirective field='TaskName' width='250'></ColumnDirective>
              <ColumnDirective field='StartDate'></ColumnDirective>
              <ColumnDirective field='EndDate'></ColumnDirective>
              <ColumnDirective field='Duration'></ColumnDirective>
              <ColumnDirective field='Progress'></ColumnDirective>
              <ColumnDirective field='CustomColumn'></ColumnDirective>
            </ColumnsDirective>
               <Inject services={[Sort]}/>
            </GanttComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));

let GanttData  = [
        {
            TaskID: 1,
            TaskName: 'Project Initiation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, /*CustomColumn: 'BCustomColumn'*/ CustomColumn: '2' },
                { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, /*CustomColumn: 'BCustomColumn'*/ CustomColumn: '3'  },
                { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, /*CustomColumn: 'BCustomColumn'*/ CustomColumn: '4' },
            ]
        },
        {
            TaskID: 5,
            TaskName: 'Project Estimation',
            StartDate: new Date('04/02/2019'),
            EndDate: new Date('04/21/2019'),
            subtasks: [
                { TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, /*CustomColumn: 'BCustomColumn'*/ CustomColumn: '6' },
                { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, /*CustomColumn: 'BCustomColumn'*/ CustomColumn: '1' },
                { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, /*CustomColumn: 'BCustomColumn'*/ CustomColumn: '5' }
            ]
        },
    ];

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Sort, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-gantt';
class App extends React.Component<{}, {}>{
   private gantt: any;
    public taskFields: any = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks'
    };

    clickHandler() {
        this.gantt.sortModule.sortColumn('CustomColumn', 'Ascending', false);
    }
    render() {
        return (<div>
            <ButtonComponent onClick={this.clickHandler.bind(this)}>Sort Custom Column</ButtonComponent>
            <GanttComponent dataSource={GanttData} ref={gantt => this.ganttInstance = gantt} taskFields={this.taskFields}
                allowSorting={true} height='450px'>
            <ColumnsDirective>
              <ColumnDirective field='TaskID'></ColumnDirective>
              <ColumnDirective field='TaskName' width='250'></ColumnDirective>
              <ColumnDirective field='StartDate'></ColumnDirective>
              <ColumnDirective field='EndDate'></ColumnDirective>
              <ColumnDirective field='Duration'></ColumnDirective>
              <ColumnDirective field='Progress'></ColumnDirective>
              <ColumnDirective field='CustomColumn'></ColumnDirective>
            </ColumnsDirective>
               <Inject services={[Sort]} />
            </GanttComponent></div>)
    }
};
ReactDOM.render(<App />, document.getElementById('root'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Contents

Sorting column on Gantt initialization
Sorting column dynamically
Clear all the sorted columns dynamically
Sorting events
Custom Sorting

Contents

Sorting column on Gantt initialization
Sorting column dynamically
Clear all the sorted columns dynamically
Sorting events
Custom Sorting

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!