Splitting and merging tasks in React Gantt component

31 Mar 202314 minutes to read

Splitting task at load time

To split task at load time, we can define segment details in both hierarchical and self-referential way.
Refer below link for more details.

Split task at load time

Split task dynamically

The task can be split dynamically, either by using the context menu or dialog.

Dialog: Segments tab is rendered in add/edit dialog, when the taskFields.segments or taskFields.segmentId property is mapped. Using this tab, we can split the task based on the original start and end date of a particular task.
Context menu: When the taskFields.segments or taskFields.segmentId property is mapped and the enableContextMenu property is enabled, Split Task item will be included in the context menu.

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,
               Segments: [
                   { StartDate: new Date("04/02/2019"), Duration: 2 },
                   { StartDate: new Date("04/04/2019"), Duration: 2 }
                 ] },
               { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50  },
               { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4 , Progress: 50 },
           ]
       },
       {
           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 },
               { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
               { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
           ]
       }
];

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, Toolbar, ContextMenu } from '@syncfusion/ej2-react-gantt';
function App() {
       const taskFields = {
           id: 'TaskID',
           name: 'TaskName',
           startDate: 'StartDate',
           endDate: 'EndDate',
           duration: 'Duration',
           progress: 'Progress',
           child: 'subtasks',
           segments: 'Segments'
       };
        const editOptions = {
           allowEditing: true,
           allowAdding: true,
           allowDeleting: true,
           allowTaskbarEditing: true
       };
      const toolbarOptions = ['Add', 'Edit', 'Delete', 'Cancel', 'Update', 'ExpandAll', 'CollapseAll'];
       return <GanttComponent dataSource={GanttData} taskFields={taskFields} allowSelection={true} editSettings={editOptions} toolbar={toolbarOptions} enableContextMenu={true} height='450px'>
           <Inject services={[Edit, Selection, Toolbar, ContextMenu]}/>
       </GanttComponent>;
}
;
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,
               Segments: [
                   { StartDate: new Date("04/02/2019"), Duration: 2 },
                   { StartDate: new Date("04/04/2019"), Duration: 2 }
                 ] },
               { TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50  },
               { TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4 , Progress: 50 },
           ]
       },
       {
           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 },
               { TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
               { TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 }
           ]
       }
];

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject, Edit, Selection, Toolbar, ContextMenu } from '@syncfusion/ej2-react-gantt';
function App() {
       const taskFields = {
           id: 'TaskID',
           name: 'TaskName',
           startDate: 'StartDate',
           endDate: 'EndDate',
           duration: 'Duration',
           progress: 'Progress',
           child: 'subtasks',
           segments: 'Segments'
       };
        const editOptions = {
           allowEditing: true,
           allowAdding: true,
           allowDeleting: true,
           allowTaskbarEditing: true
       };
      const toolbarOptions = ['Add', 'Edit', 'Delete', 'Cancel', 'Update', 'ExpandAll', 'CollapseAll'];
       return <GanttComponent dataSource={GanttData} taskFields={taskFields} allowSelection={true} editSettings={editOptions} toolbar={toolbarOptions} enableContextMenu={true} height='450px'>
           <Inject services={[Edit, Selection, Toolbar, ContextMenu]}/>
       </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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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

</html>

Merge tasks

The split tasks can be merged either by using the Merge Task item of the Context menu or by using the dialog. We can also merge the tasks, by simply dragging the segments together in the UI.

Limitations of Split tasks

Parent and milestone tasks cannot be split into segments.
The task must have a width greater than the timeline unit cell in order to be split.
Split task is not supported in the Resource view.