Search results

Column Reordering in React Gantt component

02 Dec 2022 / 3 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 component.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Reorder } 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.splitterSettings = {
            columnIndex: 5
        };
    }
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} splitterSettings={this.splitterSettings} allowReordering={true} height='450px'>
           <Inject services={[Reorder]}/>
        </GanttComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));
Copied to clipboard
<!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/20.3.56/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>
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Reorder } 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 splitterSettings: any = {
    columnIndex : 5
};
    render() {
        return <GanttComponent dataSource={data} taskFields={this.taskFields} splitterSettings={this.splitterSettings}
        allowReordering={true} height = '450px'>
           <Inject services={[Reorder]} />
        </GanttComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('root'));

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

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.
Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Reorder } 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.splitterSettings = {
            columnIndex: 5
        };
    }
    columnDrop() {
        alert('columnDrop event is Triggered');
    }
    columnDragStart() {
        alert('columnDragStart event is Triggered');
    }
    columnDrag() {
        alert('columnDrag event is Triggered');
    }
    render() {
        return (<div>
    <GanttComponent dataSource={data} taskFields={this.taskFields} allowReordering={true} columnDragStart={this.columnDragStart} columnDrag={this.columnDrag} columnDrop={this.columnDrop} splitterSettings={this.splitterSettings} height='450px' ref={gantt => this.ganttInstance = gantt}>
    <Inject services={[Reorder]}/>
    </GanttComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));
Copied to clipboard
<!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/20.3.56/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>
Copied to clipboard
import { createElement } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Reorder } 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 splitterSettings: any = {
columnIndex : 5
};
public columnDrop(){
    alert('columnDrop event is Triggered');
}
public columnDragStart(){
   alert('columnDragStart event is Triggered');
}
public columnDrag(){
   alert('columnDrag event is Triggered');
}
render() {
    return (<div>
    <GanttComponent dataSource={data} taskFields={this.taskFields} allowReordering={true}
    columnDragStart= { this.columnDragStart } columnDrag= { this.columnDrag } columnDrop= { this.columnDrop }
    splitterSettings={this.splitterSettings} height = '450px' ref={gantt => this.ganttInstance = gantt}>
    <Inject services={[Reorder]} />
    </GanttComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('root'));

Reorder multiple columns

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

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Reorder } 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.splitterSettings = {
            position: '90%'
        };
    }
    clickHandler() {
        this.ganttInstance.reorderColumns(['TaskID', 'TaskName'], 'Progress');
    }
    render() {
        return (<div>
    <ButtonComponent onClick={this.clickHandler.bind(this)}>Reorder Task ID and Task Name to Last</ButtonComponent>
    <GanttComponent dataSource={data} taskFields={this.taskFields} splitterSettings={this.splitterSettings} allowReordering={true} height='450px' ref={gantt => this.ganttInstance = gantt}>
        <Inject services={[Reorder]}/>
    </GanttComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));
Copied to clipboard
<!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/20.3.56/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>
Copied to clipboard
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { GanttComponent, Inject, Reorder } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
class App extends React.Component<{}, {}>{
private ganttInstance: any;
public taskFields: any = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
child: 'subtasks'
  };
  public splitterSettings: any = {
  position : '90%'
  };
  public clickHandler(){
this.ganttInstance.reorderColumns(['TaskID','TaskName'],'Progress');
  }
render() {
    return (<div>
    <ButtonComponent onClick= { this.clickHandler.bind(this)}>Reorder Task ID and Task Name to Last</ButtonComponent>
    <GanttComponent dataSource={data} taskFields={this.taskFields}
    splitterSettings={this.splitterSettings} allowReordering={true} height = '450px' ref={gantt => this.ganttInstance = gantt}>
        <Inject services={[Reorder]} />
    </GanttComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('root'));