To split task at load time, we can define segment details in both hierarchical and self-referential way. Refer below link for more details.
The task can be splitted 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.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
});
gantt.appendTo('#Gantt');<!DOCTYPE html>
<html lang="en">
<head>
<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/21.1.35/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>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='Gantt'></div>
</div>
</body>
</html>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.
Resource view.