Splitting and merging tasks in EJ2 TypeScript Gantt control

2 May 20234 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 dynamically

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

import { Gantt, Edit, Toolbar, Selection, ContextMenu } from '@syncfusion/ej2-gantt';
import { GanttData } from 'datasource.ts';

Gantt.Inject(Edit, Toolbar, Selection, ContextMenu);

let gantt: Gantt = new Gantt({
    dataSource: GanttData,
    height: "450px",
    taskFields: {
        id: "TaskID",
        name: "TaskName",
        startDate: "StartDate",
        endDate: "EndDate",
        duration: "Duration",
        progress: "Progress",
        child: "subtasks",
        segments: "Segments"
    toolbar: ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'],
    editSettings: {
        allowAdding: true,
        allowEditing: true,
        allowDeleting: true,
        allowTaskbarEditing: true,
        showDeleteConfirmDialog: true
    enableContextMenu: true

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

    <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/material.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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>

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


Merge tasks

The splitted 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

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