Splitting and merging tasks in Angular Gantt component

18 Oct 20258 minutes to read

Splitting and merging tasks in the Angular Gantt component enhances project management by allowing tasks to be divided into segments or recombined, representing breaks or continuous work periods. Split tasks at load time using taskFields.segments for hierarchical data or taskFields.segmentId for self-referential data, ensuring segments fit within the task’s start and end dates. Dynamically split tasks via the dialog’s Segments tab or context menu’s Split Task option, requiring EditService and valid taskFields mappings. Merge tasks using the context menu’s Merge Task option or by dragging segments together in the UI, with enableContextMenu and ContextMenuService enabled. Ensure tasks have sufficient width relative to the timeline unit and are not parent or milestone tasks to enable splitting, and avoid using split tasks with multi-taskbar features to maintain compatibility.

Split tasks at load time

Define task segments at load time using taskFields.segments or taskFields.segmentId mapped. This splits tasks into segments within their original start and end dates, ideal for representing interruptions like holidays in a project schedule.

For more details, see Split task at load time.

Split tasks dynamically

Split tasks dynamically using the dialog or context menu, requiring taskFields.segments or taskFields.segmentId mapped, EditService injected, and editSettings.allowEditing enabled:

  • Dialog: The Segments tab in the add/edit dialog allows splitting tasks based on their start and end dates.
  • Context Menu: Enable enableContextMenu and inject ContextMenuService to include the Split Task option in the context menu, enabling task splitting with a right-click.
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, ContextMenuService, ToolbarItem, EditSettingsModel, EditService, SelectionService, ToolbarService } from '@syncfusion/ej2-angular-gantt'

@Component({
    imports: [GanttModule],
    providers: [SelectionService, ContextMenuService, EditService, ToolbarService],
    standalone: true,
    selector: 'app-root',
    template:
        `<ejs-gantt height="450px" [dataSource]="data" [taskFields]="taskSettings" [editSettings]="editSettings" [toolbar]="toolbar" [enableContextMenu]="true"></ejs-gantt>`,
    encapsulation: ViewEncapsulation.None
})

export class AppComponent implements OnInit {
    public data?: object[];
    public taskSettings?: object;
    public editSettings?: EditSettingsModel;
    public toolbar?: ToolbarItem[];

    public ngOnInit(): void {
        this.data = [
            {
                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 }
                ]
            }
        ];
        this.taskSettings = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            endDate: 'EndDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks',
            segments: 'Segments'
        };
        this.editSettings = {
            allowAdding: true,
            allowEditing: true,
            allowDeleting: true
        };
        this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Merge tasks dynamically

Merge split tasks using the context menu’s Merge Task option, requiring enableContextMenu and ContextMenuService, or by dragging segments together in the UI. This recombines segments into a single task, ensuring continuity in the project timeline, with EditService and valid taskFields mappings required.

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 with Multi taskbar.

See also