Column Reorder in React Gantt Chart Component

31 Jan 202624 minutes to read

The Syncfusion^® React Gantt Chart component supports column reordering by dragging a column header to a new position.

To enable column reordering, set the allowReordering property to true in the Gantt configuration and inject the Reorder in the service array.

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Reorder } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const splitterSettings = {
    columnIndex: 5
  };
  return <GanttComponent dataSource={data} taskFields={taskFields} splitterSettings={splitterSettings} allowReordering={true} height='450px'>
    <Inject services={[Reorder]} />
  </GanttComponent>
};
ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, SplitterSettings, Inject, Reorder } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
function App() {
  const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };
  const splitterSettings: SplitterSettings = {
    columnIndex: 5
  };
  return <GanttComponent dataSource={data} taskFields={taskFields} splitterSettings={splitterSettings} allowReordering={true} height='450px'>
    <Inject services={[Reorder]} />
  </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/33.2.3/tailwind3.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>

You can modify the appearance of column headers during drag-and-drop using the columnDrag and columnDrop events.

After columns are reordered, their data positions also change. Ensure any dependent logic is updated to reflect the new column order.

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

Disable column reordering for specific columns

In Syncfusion^® React Gantt Chart component, columns are reordered by default. To restrict reordering for a specific column, set its allowReordering property to false.

The following example demonstrates how reordering is restricted for the TaskName column.

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Reorder } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  const taskFields = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const splitterSettings = {
    position: '75%'
  };

  return (
    <GanttComponent
      dataSource={data}
      taskFields={taskFields}
      splitterSettings={splitterSettings}
      allowReordering={true}
      treeColumnIndex={1}
      height="430px"
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
        <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="290" allowReordering={false} />
        <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
        <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
        <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
      </ColumnsDirective>
      <Inject services={[Reorder]} />
    </GanttComponent>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Reorder } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  const taskFields: any = {
    id: 'TaskID',
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    parentID: 'ParentID'
  };

  const splitterSettings: any = {
    position: '75%'
  };

  return (
    <GanttComponent
      dataSource={data}
      taskFields={taskFields}
      splitterSettings={splitterSettings}
      allowReordering={true}
      treeColumnIndex={1}
      height="430px"
    >
      <ColumnsDirective>
        <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
        <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="290" allowReordering={false} />
        <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
        <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
        <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
      </ColumnsDirective>
      <Inject services={[Reorder]} />
    </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/33.2.3/tailwind3.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>

Reorder columns programmatically

You can programmatically reorder columns in Syncfusion^® React Gantt Chart component using available methods based on field names, index, or target index.

To perform external column reordering, the column’s allowReordering property must be enabled.

Reorder columns using field names

You can reorder columns in the Gantt Chart component using the reorderColumns method. This method reorders one or more columns by specifying the source column(s) and the target column using their field names:

fromFName: The field name of the column to move.
toFName: The field name of the target column position.

The following demonstrates how to reorder columns by placing TaskName to position before TaskID, or moving TaskName, StartDate, Duration to position before TaskID.

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Reorder } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  let ganttInstance;

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

  const splitterSettings = {
    position: '75%'
  };

  const reorderSingleColumnUsingFieldName = () => {
    ganttInstance.reorderColumns('TaskName', 'TaskID');
  };

  const reorderMultipleColumnsUsingFieldName = () => {
    ganttInstance.reorderColumns(['TaskName', 'StartDate', 'Duration'], 'TaskID');
  };

  return (
    <div>
      <div style=>
        <button className="e-control e-btn e-info" style= onClick={reorderSingleColumnUsingFieldName}>
          Reorder Single Column
        </button>
        <button className="e-control e-btn e-info" onClick={reorderMultipleColumnsUsingFieldName}>
          Reorder Multiple Columns
        </button>
      </div>
      <div style=>
        <GanttComponent
          ref={(gantt) => (ganttInstance = gantt)}
          dataSource={data}
          taskFields={taskFields}
          splitterSettings={splitterSettings}
          allowReordering={true}
          treeColumnIndex={1}
          height="430px"
        >
          <ColumnsDirective>
            <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
            <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="290" />
            <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
            <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
            <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
          </ColumnsDirective>
          <Inject services={[Reorder]} />
        </GanttComponent>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Reorder, SplitterSettings } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  let ganttInstance: GanttComponent | null;

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

  const splitterSettings: SplitterSettings = {
    position: '75%'
  };

  const reorderSingleColumnUsingFieldName = () => {
    ganttInstance.reorderColumns('TaskName', 'TaskID');
  };

  const reorderMultipleColumnsUsingFieldName = () => {
    ganttInstance.reorderColumns(['TaskName', 'StartDate', 'Duration'], 'TaskID');
  };

  return (
    <div>
      <div style=>
        <button className="e-control e-btn e-info" style= onClick={reorderSingleColumnUsingFieldName}>
          Reorder Single Column
        </button>
        <button className="e-control e-btn e-info" onClick={reorderMultipleColumnsUsingFieldName}>
          Reorder Multiple Columns
        </button>
      </div>
      <div style=>
        <GanttComponent
          ref={(gantt) => (ganttInstance = gantt)}
          dataSource={data}
          taskFields={taskFields}
          splitterSettings={splitterSettings}
          allowReordering={true}
          treeColumnIndex={1}
          height="430px"
        >
          <ColumnsDirective>
            <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
            <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="290" />
            <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
            <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
            <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
          </ColumnsDirective>
          <Inject services={[Reorder]} />
        </GanttComponent>
      </div>
    </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/33.2.3/tailwind3.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>

Reorder columns using column index

You can reorder columns in the Gantt Chart component using the reorderColumnByIndex method of the grid object. This method repositions a column based on its current index and takes two parameters:

fromIndex: Index of the column to move.
toIndex: Target index to place the column.

The following demonstrates how to reorder the column at index 1 to position 3.

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Reorder } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  let ganttInstance;

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

  const splitterSettings = {
    position: '75%'
  };

  const reorderByIndex = () => {
    ganttInstance.treeGrid.grid.reorderColumnByIndex(1, 3);
  };

  return (
    <div>
      <div style=>
        <button className="e-control e-btn e-info" onClick={reorderByIndex}>
          Reorder Column by Index
        </button>
      </div>
      <div style=>
        <GanttComponent
          ref={(gantt) => (ganttInstance = gantt)}
          dataSource={data}
          taskFields={taskFields}
          splitterSettings={splitterSettings}
          allowReordering={true}
          treeColumnIndex={1}
          height="430px"
        >
          <ColumnsDirective>
            <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
            <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="290" />
            <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
            <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
            <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
          </ColumnsDirective>
          <Inject services={[Reorder]} />
        </GanttComponent>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Reorder, SplitterSettings } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  let ganttInstance: GanttComponent | null;

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

  const splitterSettings: SplitterSettings = {
    position: '75%'
  };

  const reorderByIndex = () => {
    ganttInstance.treeGrid.grid.reorderColumnByIndex(1, 3);
  };

  return (
    <div>
      <div style=>
        <button className="e-control e-btn e-info" onClick={reorderByIndex}>
          Reorder Column by Index
        </button>
      </div>
      <div style=>
        <GanttComponent
          ref={(gantt) => (ganttInstance = gantt)}
          dataSource={data}
          taskFields={taskFields}
          splitterSettings={splitterSettings}
          allowReordering={true}
          treeColumnIndex={1}
          height="430px"
        >
          <ColumnsDirective>
            <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
            <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="290" />
            <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
            <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
            <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
          </ColumnsDirective>
          <Inject services={[Reorder]} />
        </GanttComponent>
      </div>
    </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/33.2.3/tailwind3.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>

Reorder columns using target index

You can reorder single or multiple columns in the Gantt Chart component using the reorderColumnByTargetIndex method of the grid object. This method reorders columns based on their field names and the target index. It takes two parameters:

fieldName: The field name of the column to move.
toIndex: The index where the column should be placed.

The following demonstrates how to reorder a single column TaskID to index 3, or move multiple columns TaskID, TaskName to index 3.

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Reorder } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  let ganttInstance;

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

  const splitterSettings = {
    position: '75%'
  };

  const reorderSingleColumnByTargetIndex = () => {
    ganttInstance.treeGrid.grid.reorderColumnByTargetIndex('TaskID', 3);
  };

  const reorderMultipleColumnByTargetIndex = () => {
    ganttInstance.treeGrid.grid.reorderColumnByTargetIndex(['TaskID', 'TaskName'], 3);
  };

  return (
    <div>
      <div style=>
        <button className="e-control e-btn e-info" style= onClick={reorderSingleColumnByTargetIndex}>
          Reorder Single Column
        </button>
        <button className="e-control e-btn e-info" onClick={reorderMultipleColumnByTargetIndex}>
          Reorder Multiple Columns
        </button>
      </div>
      <div style=>
        <GanttComponent
          ref={(gantt) => (ganttInstance = gantt)}
          dataSource={data}
          taskFields={taskFields}
          splitterSettings={splitterSettings}
          allowReordering={true}
          treeColumnIndex={1}
          height="430px"
        >
          <ColumnsDirective>
            <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
            <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="290" />
            <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
            <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
            <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
          </ColumnsDirective>
          <Inject services={[Reorder]} />
        </GanttComponent>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Reorder } from '@syncfusion/ej2-react-gantt';
import { TaskFieldsModel, SplitterSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  let ganttInstance: GanttComponent;

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

  const splitterSettings: SplitterSettingsModel = {
    position: '75%'
  };

  const reorderSingleColumnByTargetIndex = () => {
    ganttInstance.treeGrid.grid.reorderColumnByTargetIndex('TaskID', 3);
  };

  const reorderMultipleColumnByTargetIndex = () => {
    ganttInstance.treeGrid.grid.reorderColumnByTargetIndex(['TaskID', 'TaskName'], 3);
  };

  return (
    <div>
      <div style=>
        <button className="e-control e-btn e-info" style= onClick={reorderSingleColumnByTargetIndex}>
          Reorder Single Column
        </button>
        <button className="e-control e-btn e-info" onClick={reorderMultipleColumnByTargetIndex}>
          Reorder Multiple Columns
        </button>
      </div>
      <div style=>
        <GanttComponent
          ref={(gantt) => (ganttInstance = gantt!)}
          dataSource={data}
          taskFields={taskFields}
          splitterSettings={splitterSettings}
          allowReordering={true}
          treeColumnIndex={1}
          height="430px"
        >
          <ColumnsDirective>
            <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
            <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="290" />
            <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
            <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
            <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
          </ColumnsDirective>
          <Inject services={[Reorder]} />
        </GanttComponent>
      </div>
    </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/33.2.3/tailwind3.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>

Customize column reorder behavior using events

You can customize the column reorder behavior in Syncfusion^® React Gantt using the columnDragStart, columnDrag, and columnDrop events. These events provide control over each stage of the column drag-and-drop process, allowing for custom logic or restrictions.

The following demonstrates how to handle specific fields during column reordering:

Cancel columnDrop for the TaskID field.
Cancel columnDrag for the Duration field.
Change header text for the TaskName field during the columnDragStart event.

index.jsx
index.tsx
index.html
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Reorder } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
  let ganttInstance;
  let messageElement;

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

  const splitterSettings = {
    position: '75%'
  };

  const columnDragStart = (args) => {
    messageElement.textContent = 'columnDragStart event triggered';
    if (args.column.field === 'TaskName') {
      args.column.headerText = 'Project Task';
      messageElement.textContent = `Header text changed for column: ${args.column.field}`;
    }
  };

  const columnDrag = (args) => {
    messageElement.textContent = 'columnDrag event triggered';
    if (args.column.field === 'Duration') {
      args.column.allowReordering = false;
      messageElement.textContent = `Reordering disabled for column: ${args.column.field}`;
    }
  };

  const columnDrop = (args) => {
    messageElement.textContent = 'columnDrop event triggered';
    if (args.column.field === 'TaskID') {
      args.column.allowReordering = false;
      messageElement.textContent = `Reordering cancelled for column: ${args.column.field}`;
    }
  };

  return (
    <div>
      <div style=>
        <p style= ref={(el) => (messageElement = el)}></p>
      </div>
      <div style=>
        <GanttComponent
          ref={(gantt) => (ganttInstance = gantt)}
          dataSource={data}
          taskFields={taskFields}
          splitterSettings={splitterSettings}
          allowReordering={true}
          treeColumnIndex={1}
          height="430px"
          columnDragStart={columnDragStart}
          columnDrag={columnDrag}
          columnDrop={columnDrop}
        >
          <ColumnsDirective>
            <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
            <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="290" />
            <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
            <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
            <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
          </ColumnsDirective>
          <Inject services={[Reorder]} />
        </GanttComponent>
      </div>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, ColumnsDirective, ColumnDirective, Inject, Reorder, ColumnDragEventArgs, TaskFieldsModel, SplitterSettingsModel } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';

function App() {
    let ganttInstance: GanttComponent;
    let messageElement: HTMLParagraphElement;

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

    const splitterSettings: SplitterSettingsModel = {
        position: '75%'
    };

    const columnDragStart = (args: ColumnDragEventArgs): void => {
        messageElement.textContent = 'columnDragStart event triggered';
        if (args.column.field === 'TaskName') {
            args.column.headerText = 'Project Task';
            messageElement.textContent = `Header text changed for column: ${args.column.field}`;
        }
    };

    const columnDrag = (args: ColumnDragEventArgs): void => {
        messageElement.textContent = 'columnDrag event triggered';
        if (args.column.field === 'Duration') {
            args.column.allowReordering = false;
            messageElement.textContent = `Reordering disabled for column: ${args.column.field}`;
        }
    };

    const columnDrop = (args: ColumnDragEventArgs): void => {
        messageElement.textContent = 'columnDrop event triggered';
        if (args.column.field === 'TaskID') {
            args.column.allowReordering = false;
            messageElement.textContent = `Reordering cancelled for column: ${args.column.field}`;
        }
    };

    return (
        <div>
            <div style=>
                <p style= ref={(el) => (messageElement = el!)}></p>
            </div>
            <div style=>
                <GanttComponent
                    ref={(gantt) => (ganttInstance = gantt!)}
                    dataSource={data}
                    taskFields={taskFields}
                    splitterSettings={splitterSettings}
                    allowReordering={true}
                    treeColumnIndex={1}
                    height="430px"
                    columnDragStart={columnDragStart}
                    columnDrag={columnDrag}
                    columnDrop={columnDrop}
                >
                    <ColumnsDirective>
                        <ColumnDirective field="TaskID" headerText="Task ID" textAlign="Right" width="90" />
                        <ColumnDirective field="TaskName" headerText="Task Name" textAlign="Left" width="290" />
                        <ColumnDirective field="StartDate" headerText="Start Date" textAlign="Right" width="120" />
                        <ColumnDirective field="Duration" headerText="Duration" textAlign="Right" width="90" />
                        <ColumnDirective field="Progress" headerText="Progress" textAlign="Right" width="120" />
                    </ColumnsDirective>
                    <Inject services={[Reorder]} />
                </GanttComponent>
            </div>
        </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/33.2.3/tailwind3.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>

Search docs

Ask Syncfusion AI Assistant