Taskbar in Angular Gantt component
18 Oct 202524 minutes to read
The taskbar in the Angular Gantt component visually represents tasks on the timeline, showing duration, progress, and dependencies, enabling intuitive project management. Taskbars support customization through properties like taskbarHeight for sizing and queryTaskbarInfo event for conditional formatting based on task data like progress. Multi-taskbar support in resource view, enabled by enableMultiTaskbar, summarizes child task progress in collapsed parent taskbars. Connector lines, styled via connectorLineWidth and connectorLineBackground, illustrate dependencies. Tooltips, controlled by tooltipSettings, provide hover details for taskbars, baselines, and timelines, with templates for custom content. Editing interactions include dragging for rescheduling (via allowTaskbarDragAndDrop) and resizing for duration, progress changes, triggering events like taskbarEditing and taskbarEdited for validation.
Customize taskbar height
Taskbar height for child and parent tasks is set using the taskbarHeight property, which accepts pixel values and must be less than rowHeight to avoid overflow.
The following example sets a custom taskbar height:
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [GanttModule],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskFields" [taskbarHeight]="50" [rowHeight]="60"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit{
public data?: object[];
public taskFields?: object;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
isParent: true,
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0, Progress: 50, isParent: false },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [2, 3, 5], isParent: false },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 50, isParent: false },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
isParent: true,
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, resources: [4], isParent: false },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, resources: [4, 8], isParent: false },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: "6SS", Progress: 50, resources: [12, 5], isParent: false }
]
},
];
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));This code applies a 40px height to taskbars, ensuring visual consistency while maintaining responsiveness.
Apply conditional formatting
Conditional formatting replaces default taskbar appearance using the queryTaskbarInfo event, accessing task data to modify colors, progress bars, or styles based on criteria like progress.
The following example formats taskbars by progress:
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, IQueryTaskbarInfoEventArgs } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [GanttModule],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskFields" (queryTaskbarInfo) = "queryTaskbarInfo($event)"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit{
public data?: object[];
public taskFields?: object;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
isParent: true,
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0, Progress: 50, isParent: false },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 70, resources: [2, 3, 5], isParent: false },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 80, isParent: false },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
isParent: true,
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, resources: [4], isParent: false },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 70, resources: [4, 8], isParent: false },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: "6SS", Progress: 50, resources: [12, 5], isParent: false }
]
},
];
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
}
public queryTaskbarInfo(args: IQueryTaskbarInfoEventArgs) {
const data = args.data as CustomGanttData;
if (data.Progress === 50) {
args.progressBarBgColor = "red";
} else if (data.Progress === 70) {
args.progressBarBgColor = "yellow";
} else if (data.Progress === 80) {
args.progressBarBgColor = "lightgreen";
}
}
}
interface CustomGanttData {
Progress?: number;
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));In the event handler, args.data.progress determines args.taskbarBgColor and args.progressBarBgColor, enabling dynamic styling for critical tasks or milestones.
Customize gripper icons
Gripper icons for taskbar editing (start, end, progress) are customized by targeting CSS classes like .e-gantt-left-resize-gripper or .e-gantt-right-resize-gripper with custom styles, overriding default icons for branded appearances.
The following example changes gripper icons:
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [ GanttModule ],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [editSettings]="editSettings" ></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit{
public data?: object[];
public taskSettings?: object;
public editSettings?: object;
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 },
{ 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',
dependency: 'Predecessor',
child: 'subtasks'
};
this.editSettings = {
allowEditing: true,
editMode: 'Auto',
allowTaskbarEditing: true
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Apply CSS to .e-gantt-progress-resize-gripper for progress handles, ensuring touch-friendly sizing for responsive interactions.
Control taskbar and notes icon visibility
Taskbars and notes icons can be hidden dynamically using the queryTaskbarInfo and queryCellInfo events, enabling conditional visibility based on task data (e.g., hiding milestones or empty notes for cleaner timelines). Hiding taskbars affects only the timeline element, not the row or labels, and requires taskFields.notes for notes icon rendering.
The following example hides taskbars for specific tasks and notes icons for empty notes:
import { Component } from '@angular/core';
import { GanttModule, IQueryTaskbarInfoEventArgs, QueryCellInfoEventArgs } from '@syncfusion/ej2-angular-gantt';
@Component({
imports: [GanttModule],
standalone: true,
selector: 'app-root',
template: `
<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskFields" (queryTaskbarInfo)="queryTaskbarInfo($event)"(queryCellInfo)="queryCellInfo($event)">
</ejs-gantt>`,
})
export class AppComponent {
public data: object[] = [
{ TaskId: 1, TaskName: 'Project Initiation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
{ TaskId: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0, Progress: 30, Info: 'Measure the total property area alloted for construction', ParentId: 1 },
{ TaskId: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2', Info: 'Obtain an engineered soil test of lot where construction is planned.', ParentId: 1 },
{ TaskId: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3', Progress: 30, ParentId: 1 },
{ TaskId: 5, TaskName: 'Project Estimation', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
{ TaskId: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '4', Progress: 30, Info: 'Develop floor plans and obtain a materials list for estimations', ParentId: 5 },
{ TaskId: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '6', Info: '', ParentId: 5 },
{ TaskId: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: '7', Info: '', ParentId: 5 },
{ TaskId: 9, TaskName: 'Sign Contract', StartDate: new Date('04/04/2019'), Duration: 1, Predecessor: '8', Progress: 30, Info: 'If required obtain approval from HOA' },
{ TaskId: 10, TaskName: 'Project Approval and kick off', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), Duration: 0, Predecessor: '9' }
];
public taskFields: object = {
id: 'TaskId',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentId',
notes: 'Info'
};
public queryTaskbarInfo(args: IQueryTaskbarInfoEventArgs): void {
if ((args.data as any).TaskId >= 7 && (args.data as any).TaskId <= 10) {
(args.taskbarElement as any).style.visibility = 'hidden';
}
}
public queryCellInfo(args: QueryCellInfoEventArgs): void {
if (args.column.field === 'Info' && (!(args.data as any).Info || (args.data as any).Info.trim() === '')) {
const notesIcon = args.cell.querySelector('.e-notes-info');
if (notesIcon) {
(notesIcon as any).style.visibility = 'hidden';
}
}
}
}This code hides taskbars for tasks with IDs 7–10 (e.g., estimation tasks) and notes icons for empty Info fields, using queryTaskbarInfo and queryCellInfo. The .e-notes-info class ensures robust icon targeting, and taskFields.notes enables notes rendering.
Prevent taskbar editing for specific tasks
Taskbar editing, including dragging, resizing, or adding dependencies, can be prevented for specific tasks (e.g., locked milestones or completed tasks) using the actionBegin event for validation and queryTaskbarInfo to hide editing UI elements like grippers and connector points. This ensures visual and functional restrictions, with ARIA attributes updated for accessibility.
The following example prevents editing for Task ID 4:
import { Component } from '@angular/core';
import { GanttModule, IActionBeginEventArgs, IQueryTaskbarInfoEventArgs, EditService } from '@syncfusion/ej2-angular-gantt';
@Component({
imports: [GanttModule],
providers: [EditService],
standalone: true,
selector: 'app-root',
template: `
<ejs-gantt id="ganttDefault" height="430px" [dataSource]="taskData" [taskFields]="taskSettings" [labelSettings]="labelSettings" [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate"
[editSettings]="editSettings" (actionBegin)="actionBegin($event)" (queryTaskbarInfo)="queryTaskbarInfo($event">
</ejs-gantt>`,
encapsulation: ViewEncapsulation.None,
styles: [
.e-gantt-chart .e-prevent-reschedule .e-right-resize-gripper,
.e-gantt-chart .e-prevent-reschedule .e-left-resize-gripper,
.e-gantt-chart .e-prevent-reschedule .e-progress-resize-gripper {
display: none !important;
}
.e-gantt-chart .e-prevent-add-relation-left .e-left-connectorpoint-outer-div {
display: none !important;
}
.e-gantt-chart .e-prevent-add-relation-right .e-right-connectorpoint-outer-div {
display: none !important;
}
]
})
export class AppComponent {
public taskData: object[] = [
{ TaskId: 1, TaskName: 'Product Concept', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
{ TaskId: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30, ParentId: 1 },
{ TaskId: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3, ParentId: 1 },
{ TaskId: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 2, Predecessor: '2', Progress: 30, ParentId: 1 },
{ TaskId: 5, TaskName: 'Concept Approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4', Indicators: [{ 'date': '04/10/2019', 'name': '#briefing', 'title': 'Product concept briefing' }] },
{ TaskId: 6, TaskName: 'Market Research', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
{ TaskId: 7, TaskName: 'Demand Analysis', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentId: 6 },
{ TaskId: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', Progress: 30, ParentId: 7 },
{ TaskId: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', ParentId: 7 },
{ TaskId: 10, TaskName: 'Competitor Analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '7, 8', Progress: 30, ParentId: 6 }
];
public taskSettings: object = {
id: 'TaskId',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentId'
};
public labelSettings: object = {
leftLabel: 'TaskName'
};
public projectStartDate: Date = new Date('03/28/2019');
public projectEndDate: Date = new Date('04/18/2019');
public editSettings: object = {
allowTaskbarEditing: true,
};
public queryTaskbarInfo(args: IQueryTaskbarInfoEventArgs): void {
if (args.data.TaskId === 4) {
args.taskbarElement.style.cursor = 'default';
args.taskbarElement.classList.add('e-prevent-reschedule', 'e-prevent-add-relation-left', 'e-prevent-add-relation-right');
}
}
public actionBegin(args: IActionBeginEventArgs): void {
if (args.data?.TaskId === 4 && [
'ChildDrag', 'ProgressResizing', 'LeftResizing', 'RightResizing',
'ConnectorPointLeftDrag', 'ConnectorPointRightDrag'
].includes(args.taskBarEditAction)) {
args.cancel = true; // Prevent editing for Task ID 4.
}
}
}This code prevents dragging, resizing, and dependency changes for Task ID 4 by canceling edit actions in actionBegin and hiding grippers/connector points in queryTaskbarInfo using CSS classes defined in the styles array. The EditService and allowTaskbarEditing enable editing for other tasks, while ViewEncapsulation.None ensures styles apply to Gantt’s DOM.
Customize taskbar templates
Taskbar templates allow full replacement of the default taskbar UI, enabling custom designs with elements like progress bars, badges, or icons. Use the taskbarTemplate property for child tasks, parentTaskbarTemplate for parents, milestoneTemplate for milestones. The template receives data (task object) and ganttProperties (e.g., width, progress), with calculateProgressWidth for dynamic sizing. Integrate with queryTaskbarInfo for conditional logic or styling.
The following example customizes the taskbar template with a progress bar and notification badge showing progress percentage:
import { Component } from '@angular/core';
import { GanttModule, IGanttData } from '@syncfusion/ej2-angular-gantt';
@Component({
imports: [GanttModule],
standalone: true,
selector: 'app-root',
template: `
<ejs-gantt height="430px" [dataSource]="taskData" [taskFields]="taskSettings" [labelSettings]="labelSettings" [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate" [taskbarTemplate]="taskbarTemplate">
</ejs-gantt>
<ng-template #taskbarTemplate let-data="data">
<div
class="e-gantt-child-taskbar-inner-div e-gantt-child-taskbar"
style="height:22px; margin-top: -1px"
tabindex="-1"
[style.width.px]="data.ganttProperties.width">
<div
class="e-gantt-child-progressbar-inner-div e-gantt-child-progressbar"
style="border-style:solid;height:100%;border-top-right-radius:0px;border-bottom-right-radius:0px;"
[style.width.px]="calculateProgressWidth(data)">
</div>
<div class="e-notification-badge-container">
<span class="e-badge e-badge-secondary e-badge-notification e-badge-overlap">%</span>
</div>
</div>
</ng-template>`
})
export class AppComponent {
public calculateProgressWidth(data: IGanttData): number {
return (data.ganttProperties.progress * data.ganttProperties.width) / 100;
}
public taskData: object[] = [
{ TaskId: 1, TaskName: 'Product Concept', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
{ TaskId: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30, ParentId: 1 },
{ TaskId: 3, TaskName: 'Defining target audience', StartDate: new Date('04/02/2019'), Duration: 3, ParentId: 1 },
{ TaskId: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/02/2019'), Duration: 2, Predecessor: '2', Progress: 30, ParentId: 1 },
{ TaskId: 5, TaskName: 'Concept Approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3,4', Indicators: [{ 'date': '04/10/2019', 'name': '#briefing', 'title': 'Product concept briefing' }] },
{ TaskId: 6, TaskName: 'Market Research', StartDate: new Date('04/02/2019'), EndDate: new Date('04/21/2019') },
{ TaskId: 7, TaskName: 'Demand Analysis', StartDate: new Date('04/04/2019'), EndDate: new Date('04/21/2019'), ParentId: 6 },
{ TaskId: 8, TaskName: 'Customer strength', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', Progress: 30, ParentId: 7 },
{ TaskId: 9, TaskName: 'Market opportunity analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '5', ParentId: 7 },
{ TaskId: 10, TaskName: 'Competitor Analysis', StartDate: new Date('04/04/2019'), Duration: 4, Predecessor: '7, 8', Progress: 30, ParentId: 6 }
];
public taskSettings: object = {
id: 'TaskId',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'ParentId'
};
public labelSettings: object = {
leftLabel: 'TaskName'
};
public projectStartDate: Date = new Date('03/28/2019');
public projectEndDate: Date = new Date('04/18/2019');
}This code creates a custom taskbar with a progress bar sized by calculateProgressWidth(data) and a notification badge displaying task progress. The template uses let-data=”data” to access the full task object, ensuring the badge shows the correct progress value.
Enable multi-taskbar support
In project view, multi-taskbar support, enabled by enableMultiTaskbar, renders parent taskbars summarizing child progress when collapsed, providing aggregated visualization.
The following example enables multi-taskbar:
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { SelectionService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { projectViewMultiTaskData } from './data';
@Component({
imports: [GanttModule],
providers: [SelectionService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt [dataSource]="data" [enableMultiTaskbar]="true" [taskFields]="taskSettings" [treeColumnIndex]="1" [allowSelection]="true" height="430px"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: Object[];
public taskSettings?: object;
public ngOnInit(): void {
this.data = projectViewMultiTaskData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
progress: 'Progress',
child: 'subtasks',
expandState: 'isExpand'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export let projectViewMultiTaskData: Object[] = [
{
TaskID: 1,
TaskName: 'Product Concept',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
isExpand: false,
subtasks: [
{ TaskID: 2, TaskName: 'Defining the product and its usage', StartDate: new Date('04/02/2019'), Duration: 3, Progress: 30 },
{ TaskID: 3, TaskName: 'Defining target audience', StartDate: new Date('04/04/2019'), Duration: 3 },
{ TaskID: 4, TaskName: 'Prepare product sketch and notes', StartDate: new Date('04/10/2019'), Duration: 3, Predecessor: "2", Progress: 30 },
]
},
{
TaskID: 5,
TaskName: 'Feedback and Testing',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
isExpand: true,
subtasks: [
{ TaskID: 6, TaskName: 'Internal testing and feedback', StartDate: new Date('04/04/2019'), Duration: 5, Progress: 30 },
{ TaskID: 7, TaskName: 'Customer testing and feedback', StartDate: new Date('04/10/2019'), Duration: 7, Progress: 30 }
]
},
{
TaskID: 8,
TaskName: 'Product Development',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
isExpand: false,
subtasks: [
{ TaskID: 9, TaskName: 'Important improvements', StartDate: new Date('04/04/2019'), Duration: 2, Progress: 30 },
{ TaskID: 10, TaskName: 'Address any unforeseen issues', StartDate: new Date('04/06/2019'), Duration: 2, Progress: 30 }
]
},
{
TaskID: 11,
TaskName: 'Final Product',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
isExpand: true,
subtasks: [
{ TaskID: 12, TaskName: 'Branding product', StartDate: new Date('04/06/2019'), Duration: 5 },
{ TaskID: 13, TaskName: 'Marketing and pre-sales', StartDate: new Date('04/12/2019'), Duration: 10, Progress: 30 }
]
}
]This feature aggregates child progress in parent taskbars, updating dynamically on child changes.
Customize connector lines
Connector lines for dependencies are styled using connectorLineWidth for thickness and connectorLineBackground for color, enhancing dependency visibility.
The following example customizes connectors:
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [GanttModule],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskFields" connectorLineBackground="red" [connectorLineWidth]='3'></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit{
public data?: object[];
public taskFields?: object;
public ngOnInit(): void {
this.data = [
{
TaskID: 1,
TaskName: 'Project Initiation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
isParent: true,
subtasks: [
{ TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2019'), Duration: 0, Progress: 50, isParent: false },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Progress: 50, resources: [2, 3, 5], isParent: false },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: "2FS", Progress: 50, isParent: false },
]
},
{
TaskID: 5,
TaskName: 'Project Estimation',
StartDate: new Date('04/02/2019'),
EndDate: new Date('04/21/2019'),
isParent: true,
subtasks: [
{ TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, resources: [4], isParent: false },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50, resources: [4, 8], isParent: false },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'), Duration: 0, Predecessor: "6SS", Progress: 50, resources: [12, 5], isParent: false }
]
},
],
this.taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));These properties apply to all connectors, with the queryTaskbarInfo event allowing per-dependency customization via args.connectorLineBackground.
Configure tooltips
Tooltips for taskbars, connectors, baselines, and event markers are enabled by default via tooltipSettings.showTooltip, set to true. Disable for specific elements or customize content with templates.
The following example enables tooltips:
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, SelectionService, DayMarkersService } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [GanttModule],
providers: [SelectionService, DayMarkersService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [renderBaseline]="true" [treeColumnIndex]="1" height="450px" baselineColor='red' [tooltipSettings]="tooltipSettings" [eventMarkers]="eventMarkers"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: Object[];
public taskSettings?: object;
public columns?: object[];
public timelineSettings?: object;
public labelSettings?: object;
public tooltipSettings?: object;
public eventMarkers?: object[];
public dayWorkingTime?: object[];
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', BaselineStartDate: new Date('04/02/2019'), BaselineEndDate: new Date('04/02/2019'), StartDate: new Date('04/02/2019'), Duration: 0, Progress: 50 },
{ TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), BaselineStartDate: new Date('04/04/2019'), BaselineEndDate: new Date('04/09/2019'), Duration: 4, Progress: 50 },
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), BaselineStartDate: new Date('04/08/2019'), BaselineEndDate: new Date('04/12/2019'), Duration: 4, Predecessor: "2FS", 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', BaselineStartDate: new Date('04/04/2019'), BaselineEndDate: new Date('04/08/2019'), StartDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), BaselineStartDate: new Date('04/02/2019'), BaselineEndDate: new Date('04/04/2019'), Duration: 3, Progress: 50 },
{ TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/02/2019'), BaselineStartDate: new Date('04/02/2019'), BaselineEndDate: new Date('04/08/2019'), Duration: 0, Predecessor: "6SS", Progress: 50 }
]
},
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
baselineStartDate: "BaselineStartDate",
baselineEndDate: "BaselineEndDate",
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.tooltipSettings = {
showTooltip: true
}
this.eventMarkers = [
{
day: '04/10/2019',
label: 'Project approval and kick-off'
}
];
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));Tooltips display on hover, with touch-and-hold support for mobile via the tooltip popup.
Customize tooltip templates
You can customize the following tooltip types in the Gantt chart using the tooltipSettings configuration:
Taskbar tooltip
Taskbar tooltips are customized using tooltipSettings.taskbar template, accessing task data for formatted content.
The following example customizes taskbar tooltips:
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { editingData } from './data';
@Component({
imports: [GanttModule],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [tooltipSettings]="tooltipSettings">
<ng-template #tooltipSettingsTaskbar let-data>
<div> <ng-container>TaskID: </ng-container> </div>
</ng-template>
</ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: object[];
public taskSettings?: object;
public tooltipSettings?: object;
public ngOnInit(): void {
this.data = editingData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
baselineStartDate: "BaselineStartDate",
baselineEndDate: "BaselineEndDate",
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.tooltipSettings = {
showTooltip: true
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export let editingData: Object[] = [
{
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: 0,
Progress: 30, resources: [1], info: 'Measure the total property area alloted for construction'
},
{
TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',
resources: [2, 3, 5], info: 'Obtain an engineered soil test of lot where construction is planned.' +
'From an engineer or company specializing in soil testing'
},
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3', Progress: 30 },
]
},
{
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, Predecessor: '4', Progress: 30, resources: 4,
info: 'Develop floor plans and obtain a materials list for estimations'
},
{
TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),
Duration: 3, Predecessor: '6', resources: [4, 8], info: ''
},
{
TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),
Duration: 0, Predecessor: '7', resources: [12, 5], info: ''
}
]
},
{
TaskID: 9, TaskName: 'Sign Contract', StartDate: new Date('04/04/2019'), Duration: 1,
Predecessor: '8', Progress: 30, resources: [12],
info: 'If required obtain approval from HOA (homeowners association) or ARC (architectural review committee)'
},
{
TaskID: 10,
TaskName: 'Project Approval and kick off',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
Duration: 0,
Predecessor: '9'
},
{
TaskID: 11,
TaskName: 'Site Work',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 12, TaskName: 'Clear the building site', StartDate: new Date('04/04/2019'),
Duration: 2, Progress: 30, Predecessor: '9', resources: [6, 7],
info: 'Clear the building site (demolition of existing home if necessary)'
},
{
TaskID: 13, TaskName: 'Install temporary power service', StartDate: new Date('04/04/2019'),
Duration: 2, Predecessor: '12', resources: [6, 7], info: ''
},
]
},
{
TaskID: 14,
TaskName: 'Foundation',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 15, TaskName: 'Excavate for foundations', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '13', resources: [2, 8],
info: 'Excavate the foundation and dig footers (Scope of work is dependent of foundation designed by engineer)'
},
{
TaskID: 16, TaskName: 'Dig footer', StartDate: new Date('04/04/2019'),
Duration: 2, Predecessor: '15FF', resources: [8], info: ''
},
{
TaskID: 17, TaskName: 'Install plumbing grounds', StartDate: new Date('04/04/2019'), Duration: 4,
Progress: 30, Predecessor: '15', resources: [9], info: ''
},
{
TaskID: 18, TaskName: 'Pour a foundation and footer with concrete', StartDate: new Date('04/04/2019'),
Duration: 1, Predecessor: '17', resources: [8, 9, 10], info: ''
},
{
TaskID: 19, TaskName: 'Cure basement walls', StartDate: new Date('04/04/2019'), Duration: 4,
Progress: 30, Predecessor: '18', resources: [10], info: ''
},
]
},
{
TaskID: 20,
TaskName: 'Framing',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 21, TaskName: 'Add load-bearing structure', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '19', resources: [4, 5],
info: 'Build the main load-bearing structure out of thick pieces of wood and' +
'possibly metal I-beams for large spans with few supports'
},
{
TaskID: 22, TaskName: 'Install floor joists', StartDate: new Date('04/04/2019'),
Duration: 3, Predecessor: '21', resources: [2, 3], info: 'Add floor and ceiling joists and install subfloor panels'
},
{
TaskID: 23, TaskName: 'Add ceiling joists', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '22SS', resources: [5], info: ''
},
{
TaskID: 24, TaskName: 'Install subfloor panels', StartDate: new Date('04/04/2019'),
Duration: 3, Predecessor: '23', resources: [8, 9]
},
{
TaskID: 25, TaskName: 'Frame floor walls', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '24', resources: [10], info: ''
},
{
TaskID: 26, TaskName: 'Frame floor decking', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '25SS', resources: [4, 8], info: ''
},
]
},
{
TaskID: 27,
TaskName: 'Exterior finishing',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 28, TaskName: 'Cover outer walls and roof in OSB', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '26', resources: [2, 8],
info: 'Cover outer walls and roof in OSB or plywood and a water-resistive barrier'
},
{
TaskID: 29, TaskName: 'Add water resistive barrier', StartDate: new Date('04/04/2019'),
Duration: 3, Predecessor: '28', resources: [1, 10],
info: 'Cover the walls with siding, typically vinyl, wood, or brick veneer but possibly stone or other materials'
},
{
TaskID: 30, TaskName: 'Install roof shingles', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '29', resources: [8, 9], info: 'Install roof shingles or other covering for flat roof'
},
{ TaskID: 31, TaskName: 'Install windows', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '29', resources: 7 },
]
},
{
TaskID: 32,
TaskName: 'Utilities',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 33, TaskName: 'Install internal plumbing', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '26', resources: [1, 10]
},
{
TaskID: 34, TaskName: 'Install HVAC', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '33',
resources: [4, 9], info: 'Add internal plumbing, HVAC, electrical, and natural gas utilities'
},
{
TaskID: 35, TaskName: 'Electrical utilities', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '34'
},
{
TaskID: 36, TaskName: 'Natural gas utilities', StartDate: new Date('04/04/2019'), Duration: 3,
Predecessor: '35', resources: 11
},
{
TaskID: 37, TaskName: 'Install bathroom fixtures', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '35', resources: [3, 7]
},
],
info: 'Building inspector visits if necessary to approve utilities and framing'
},
{
TaskID: 38,
TaskName: 'Interior finsihing',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 39, TaskName: 'Install insulation', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '37', resources: [1, 8], info: 'Frame interior walls with wooden 2×4s'
},
{
TaskID: 40, TaskName: 'Install drywall panels', StartDate: new Date('04/04/2019'), Duration: 3,
Predecessor: '39', resources: 5,
info: 'Install insulation and interior drywall panels (cementboard for wet areas) and to complete walls and ceilings'
},
{
TaskID: 41, TaskName: 'Spackle', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '40', resources: 10
},
{
TaskID: 42, TaskName: 'Apply primer', StartDate: new Date('04/04/2019'), Duration: 3,
Predecessor: '41', resources: [10, 11]
},
{
TaskID: 43, TaskName: 'Paint wall and ceilings', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '42', resources: [2, 9]
},
{
TaskID: 44, TaskName: 'Install modular kitchen', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '43', resources: [5, 7]
},
]
},
{
TaskID: 45,
TaskName: 'Flooring',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 46, TaskName: 'Tile kitchen, bathroom and entry walls', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '44', resources: [4, 9, 3],
info: 'Additional tiling on top of cementboard for wet areas, such as the bathroom and kitchen backsplash'
},
{
TaskID: 47, TaskName: 'Tile floor', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '46SS',
resources: [2, 8], info: 'Installation of final floor covering, such as floor tile, carpet, or wood flooring'
},
]
},
{
TaskID: 48,
TaskName: 'Final Acceptance',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 49, TaskName: 'Final inspection', StartDate: new Date('04/04/2019'), Duration: 2,
Progress: 30, Predecessor: '47', resources: 12, info: 'Ensure the contracted items'
},
{
TaskID: 50, TaskName: 'Cleanup for occupancy', StartDate: new Date('04/04/2019'), Duration: 2,
Predecessor: '49', resources: [1, 5], info: 'Installation of major appliances'
},
{
TaskID: 51, TaskName: 'Property Handover', StartDate: new Date('04/04/2019'), Duration: 0,
Predecessor: '50', info: 'Ending the contract'
},
]
},
];The template uses data to display fields like TaskName and Progress, ensuring responsive display.
Connector line tooltip
Connector tooltips, customized via tooltipSettings.connectorLine, show dependency details like type and offset.
The following example customizes connector tooltips:
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { editingData } from './data';
@Component({
imports: [ GanttModule],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [tooltipSettings]="tooltipSettings">
<ng-template #tooltipSettingsConnectorLine let-data>
<div>
<ng-container> Offset : </ng-container>
</div>
</ng-template>
</ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit{
public data?: object[];
public taskSettings?: object;
public tooltipSettings?: object;
public ngOnInit(): void {
this.data = editingData;
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
child: 'subtasks'
};
this.tooltipSettings = {
showTooltip: true
};
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export let editingData: Object[] = [
{
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: 0,
Progress: 30, resources: [1], info: 'Measure the total property area alloted for construction'
},
{
TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',
resources: [2, 3, 5], info: 'Obtain an engineered soil test of lot where construction is planned.' +
'From an engineer or company specializing in soil testing'
},
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3', Progress: 30 },
]
},
{
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, Predecessor: '4', Progress: 30, resources: 4,
info: 'Develop floor plans and obtain a materials list for estimations'
},
{
TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),
Duration: 3, Predecessor: '6', resources: [4, 8], info: ''
},
{
TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),
Duration: 0, Predecessor: '7', resources: [12, 5], info: ''
}
]
},
{
TaskID: 9, TaskName: 'Sign Contract', StartDate: new Date('04/04/2019'), Duration: 1,
Predecessor: '8', Progress: 30, resources: [12],
info: 'If required obtain approval from HOA (homeowners association) or ARC (architectural review committee)'
},
{
TaskID: 10,
TaskName: 'Project Approval and kick off',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
Duration: 0,
Predecessor: '9'
},
{
TaskID: 11,
TaskName: 'Site Work',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 12, TaskName: 'Clear the building site', StartDate: new Date('04/04/2019'),
Duration: 2, Progress: 30, Predecessor: '9', resources: [6, 7],
info: 'Clear the building site (demolition of existing home if necessary)'
},
{
TaskID: 13, TaskName: 'Install temporary power service', StartDate: new Date('04/04/2019'),
Duration: 2, Predecessor: '12', resources: [6, 7], info: ''
},
]
},
{
TaskID: 14,
TaskName: 'Foundation',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 15, TaskName: 'Excavate for foundations', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '13', resources: [2, 8],
info: 'Excavate the foundation and dig footers (Scope of work is dependent of foundation designed by engineer)'
},
{
TaskID: 16, TaskName: 'Dig footer', StartDate: new Date('04/04/2019'),
Duration: 2, Predecessor: '15FF', resources: [8], info: ''
},
{
TaskID: 17, TaskName: 'Install plumbing grounds', StartDate: new Date('04/04/2019'), Duration: 4,
Progress: 30, Predecessor: '15', resources: [9], info: ''
},
{
TaskID: 18, TaskName: 'Pour a foundation and footer with concrete', StartDate: new Date('04/04/2019'),
Duration: 1, Predecessor: '17', resources: [8, 9, 10], info: ''
},
{
TaskID: 19, TaskName: 'Cure basement walls', StartDate: new Date('04/04/2019'), Duration: 4,
Progress: 30, Predecessor: '18', resources: [10], info: ''
},
]
},
{
TaskID: 20,
TaskName: 'Framing',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 21, TaskName: 'Add load-bearing structure', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '19', resources: [4, 5],
info: 'Build the main load-bearing structure out of thick pieces of wood and' +
'possibly metal I-beams for large spans with few supports'
},
{
TaskID: 22, TaskName: 'Install floor joists', StartDate: new Date('04/04/2019'),
Duration: 3, Predecessor: '21', resources: [2, 3], info: 'Add floor and ceiling joists and install subfloor panels'
},
{
TaskID: 23, TaskName: 'Add ceiling joists', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '22SS', resources: [5], info: ''
},
{
TaskID: 24, TaskName: 'Install subfloor panels', StartDate: new Date('04/04/2019'),
Duration: 3, Predecessor: '23', resources: [8, 9]
},
{
TaskID: 25, TaskName: 'Frame floor walls', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '24', resources: [10], info: ''
},
{
TaskID: 26, TaskName: 'Frame floor decking', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '25SS', resources: [4, 8], info: ''
},
]
},
{
TaskID: 27,
TaskName: 'Exterior finishing',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 28, TaskName: 'Cover outer walls and roof in OSB', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '26', resources: [2, 8],
info: 'Cover outer walls and roof in OSB or plywood and a water-resistive barrier'
},
{
TaskID: 29, TaskName: 'Add water resistive barrier', StartDate: new Date('04/04/2019'),
Duration: 3, Predecessor: '28', resources: [1, 10],
info: 'Cover the walls with siding, typically vinyl, wood, or brick veneer but possibly stone or other materials'
},
{
TaskID: 30, TaskName: 'Install roof shingles', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '29', resources: [8, 9], info: 'Install roof shingles or other covering for flat roof'
},
{ TaskID: 31, TaskName: 'Install windows', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '29', resources: 7 },
]
},
{
TaskID: 32,
TaskName: 'Utilities',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 33, TaskName: 'Install internal plumbing', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '26', resources: [1, 10]
},
{
TaskID: 34, TaskName: 'Install HVAC', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '33',
resources: [4, 9], info: 'Add internal plumbing, HVAC, electrical, and natural gas utilities'
},
{
TaskID: 35, TaskName: 'Electrical utilities', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '34'
},
{
TaskID: 36, TaskName: 'Natural gas utilities', StartDate: new Date('04/04/2019'), Duration: 3,
Predecessor: '35', resources: 11
},
{
TaskID: 37, TaskName: 'Install bathroom fixtures', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '35', resources: [3, 7]
},
],
info: 'Building inspector visits if necessary to approve utilities and framing'
},
{
TaskID: 38,
TaskName: 'Interior finsihing',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 39, TaskName: 'Install insulation', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '37', resources: [1, 8], info: 'Frame interior walls with wooden 2×4s'
},
{
TaskID: 40, TaskName: 'Install drywall panels', StartDate: new Date('04/04/2019'), Duration: 3,
Predecessor: '39', resources: 5,
info: 'Install insulation and interior drywall panels (cementboard for wet areas) and to complete walls and ceilings'
},
{
TaskID: 41, TaskName: 'Spackle', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '40', resources: 10
},
{
TaskID: 42, TaskName: 'Apply primer', StartDate: new Date('04/04/2019'), Duration: 3,
Predecessor: '41', resources: [10, 11]
},
{
TaskID: 43, TaskName: 'Paint wall and ceilings', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '42', resources: [2, 9]
},
{
TaskID: 44, TaskName: 'Install modular kitchen', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '43', resources: [5, 7]
},
]
},
{
TaskID: 45,
TaskName: 'Flooring',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 46, TaskName: 'Tile kitchen, bathroom and entry walls', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '44', resources: [4, 9, 3],
info: 'Additional tiling on top of cementboard for wet areas, such as the bathroom and kitchen backsplash'
},
{
TaskID: 47, TaskName: 'Tile floor', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '46SS',
resources: [2, 8], info: 'Installation of final floor covering, such as floor tile, carpet, or wood flooring'
},
]
},
{
TaskID: 48,
TaskName: 'Final Acceptance',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 49, TaskName: 'Final inspection', StartDate: new Date('04/04/2019'), Duration: 2,
Progress: 30, Predecessor: '47', resources: 12, info: 'Ensure the contracted items'
},
{
TaskID: 50, TaskName: 'Cleanup for occupancy', StartDate: new Date('04/04/2019'), Duration: 2,
Predecessor: '49', resources: [1, 5], info: 'Installation of major appliances'
},
{
TaskID: 51, TaskName: 'Property Handover', StartDate: new Date('04/04/2019'), Duration: 0,
Predecessor: '50', info: 'Ending the contract'
},
]
},
];Baseline tooltip
A baseline tooltip can be customized using the tooltipSettings.baseline property.
The following example customizes baseline tooltips:
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { DayMarkersService } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { baselineData } from './data';
@Component({
imports: [GanttModule],
providers: [DayMarkersService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns" [timelineSettings]="timelineSettings" [renderBaseline]="true" [treeColumnIndex]="1" height="450px" [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate" [dayWorkingTime]="dayWorkingTime" baselineColor='red'>
<ng-template #tooltipSettingsBaseline let-data>
<div> <ng-container>Baseline StartDate : </ng-container> </div>
</ng-template>
</ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: Object[];
public taskSettings?: object;
public columns?: object[];
public timelineSettings?: object;
public labelSettings?: object;
public tooltipSettings?: object;
public projectStartDate?: Date;
public projectEndDate?: Date;
public dayWorkingTime?: object[];
public ngOnInit(): void {
this.data = baselineData;
this.taskSettings = {
id: 'TaskId',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
baselineStartDate: 'BaselineStartDate',
baselineEndDate: 'BaselineEndDate'
};
this.columns = [
{ field: 'TaskName', headerText: 'Service Name', width: '250', clipMode: 'EllipsisWithTooltip' },
{ field: 'BaselineStartDate', headerText: 'Planned start time' },
{ field: 'BaselineEndDate', headerText: 'Planned end time' },
{ field: 'StartDate', headerText: 'Start time' },
{ field: 'EndDate', headerText: 'End time' },
];
this.dayWorkingTime = [{ from: 0, to: 24 }];
this.timelineSettings = {
timelineUnitSize: 70,
topTier: {
unit: 'None',
},
bottomTier: {
unit: 'Minutes',
count: 15,
format: 'hh:mm a'
},
};
this.projectStartDate = new Date('03/05/2018 09:30:00 AM');
this.projectEndDate = new Date('03/05/2018 7:00:00 PM');
this.tooltipSettings = {
showTooltip: true
}
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export let baselineData: Object[] = [
{
TaskId: 1, TaskName: 'Receive vehicle and create job card', BaselineStartDate: new Date('03/05/2018 10:00:00 AM'),
BaselineEndDate: new Date('03/05/2018 10:00:00 AM'), StartDate: new Date('03/05/2018 10:00:00 AM'),
EndDate: new Date('03/05/2018 10:00:00 AM')
},
{
TaskId: 2, TaskName: 'Allot mechanic and send vehicle to service bay', BaselineStartDate: new Date('03/05/2018 10:00:00 AM'),
BaselineEndDate: new Date('03/05/2018 10:15:00 AM'), StartDate: new Date('03/05/2018 10:15:00 AM'),
EndDate: new Date('03/05/2018 10:20:00 AM')
},
{
TaskId: 3, TaskName: 'Change the Receive vehicle and create job cardengine oil',
BaselineStartDate: new Date('03/05/2018 10:15:00 AM'),
BaselineEndDate: new Date('03/05/2018 10:45:00 AM'), StartDate: new Date('03/05/2018 10:20:00 AM'),
EndDate: new Date('03/05/2018 10:35:00 AM')
},
{
TaskId: 4, TaskName: 'Replace the oil filter', BaselineStartDate: new Date('03/05/2018 10:45:00 AM'),
BaselineEndDate: new Date('03/05/2018 11:15:00 AM'), StartDate: new Date('03/05/2018 10:35:00 AM'),
EndDate: new Date('03/05/2018 11:00:00 AM')
},
{
TaskId: 5, TaskName: 'Replace the air filter', BaselineStartDate: new Date('03/05/2018 10:45:00 AM'),
BaselineEndDate: new Date('03/05/2018 11:15:00 AM'), StartDate: new Date('03/05/2018 10:35:00 AM'),
EndDate: new Date('03/05/2018 11:00:00 AM')
},
{
TaskId: 6, TaskName: 'Replace the fuel filter', BaselineStartDate: new Date('03/05/2018 11:15:00 AM'),
BaselineEndDate: new Date('03/05/2018 11:25:00 AM'), StartDate: new Date('03/05/2018 11:00:00 AM'),
EndDate: new Date('03/05/2018 11:20:00 AM')
},
{
TaskId: 7, TaskName: 'Replace the cabin filter', BaselineStartDate: new Date('03/05/2018 11:00:00 AM'),
BaselineEndDate: new Date('03/05/2018 11:20:00 AM'), StartDate: new Date('03/05/2018 11:00:00 AM'),
EndDate: new Date('03/05/2018 11:25:00 AM')
},
{
TaskId: 8, TaskName: 'Replace the spark plugs', BaselineStartDate: new Date('03/05/2018 11:00:00 AM'),
BaselineEndDate: new Date('03/05/2018 11:30:00 AM'), StartDate: new Date('03/05/2018 11:25:00 AM'),
EndDate: new Date('03/05/2018 11:45:00 AM')
},
{
TaskId: 9, TaskName: 'Check level and refill brake fluid/clutch fluid', BaselineStartDate: new Date('03/05/2018 11:20:00 AM'),
BaselineEndDate: new Date('03/05/2018 11:40:00 AM'), StartDate: new Date('03/05/2018 11:30:00 AM'),
EndDate: new Date('03/05/2018 11:50:00 AM')
},
{
TaskId: 10, TaskName: 'Check Brake Pads/Liners, Brake Discs/Drums, and replace if worn out.',
BaselineStartDate: new Date('03/05/2018 11:40:00 AM'),
BaselineEndDate: new Date('03/05/2018 12:00:00 PM'), StartDate: new Date('03/05/2018 11:50:00 AM'),
EndDate: new Date('03/05/2018 12:20:00 PM')
},
{
TaskId: 11, TaskName: 'Check level and refill power steering fluid', BaselineStartDate: new Date('03/05/2018 11:40:00 AM'),
BaselineEndDate: new Date('03/05/2018 12:00:00 PM'), StartDate: new Date('03/05/2018 11:50:00 AM'),
EndDate: new Date('03/05/2018 12:15:00 PM')
},
{
TaskId: 12, TaskName: 'Check level and refill Automatic/Manual Transmission Fluid',
BaselineStartDate: new Date('03/05/2018 12:00:00 PM'),
BaselineEndDate: new Date('03/05/2018 12:35:00 PM'), StartDate: new Date('03/05/2018 11:50:00 AM'),
EndDate: new Date('03/05/2018 12:20:00 PM')
},
{
TaskId: 13, TaskName: 'Grease and lubricate components', BaselineStartDate: new Date('03/05/2018 12:20:00 PM'),
BaselineEndDate: new Date('03/05/2018 12:35:00 PM'), StartDate: new Date('03/05/2018 12:20:00 PM'),
EndDate: new Date('03/05/2018 12:45:00 PM')
},
{
TaskId: 14, TaskName: 'Inspect and replace the timing belt or timing chain if needed',
BaselineStartDate: new Date('03/05/2018 12:35:00 PM'),
BaselineEndDate: new Date('03/05/2018 1:00:00 PM'), StartDate: new Date('03/05/2018 12:45:00 PM'),
EndDate: new Date('03/05/2018 1:00:00 PM')
},
{
TaskId: 15, TaskName: 'Wheel Balancing', BaselineStartDate: new Date('03/05/2018 1:00:00 PM'),
BaselineEndDate: new Date('03/05/2018 1:20:00 PM'), StartDate: new Date('03/05/2018 1:00:00 PM'),
EndDate: new Date('03/05/2018 1:45:00 PM')
},
{
TaskId: 16, TaskName: 'Wheel Alignment', BaselineStartDate: new Date('03/05/2018 1:20:00 PM'),
BaselineEndDate: new Date('03/05/2018 1:45:00 PM'), StartDate: new Date('03/05/2018 1:45:00 PM'),
EndDate: new Date('03/05/2018 2:45:00 PM')
},
{
TaskId: 17, TaskName: 'Check for proper operation of all lights, wipers etc.', BaselineStartDate: new Date('03/05/2018 1:50:00 PM'),
BaselineEndDate: new Date('03/05/2018 02:30:00 PM'), StartDate: new Date('03/05/2018 02:45:00 PM'),
EndDate: new Date('03/05/2018 03:30:00 PM')
},
{
TaskId: 18, TaskName: 'Check for any Error codes in the ECU and take corrective action.',
BaselineStartDate: new Date('03/05/2018 2:30:00 PM'),
BaselineEndDate: new Date('03/05/2018 3:30:00 PM'), StartDate: new Date('03/05/2018 03:30:00 PM'),
EndDate: new Date('03/05/2018 04:15:00 PM')
},
{
TaskId: 19, TaskName: 'Use scan tool read trouble code', BaselineStartDate: new Date('03/05/2018 03:30:00 PM'),
BaselineEndDate: new Date('03/05/2018 04:45:00 PM'), StartDate: new Date('03/05/2018 04:15:00 PM'),
EndDate: new Date('03/05/2018 04:45:00 PM')
},
{
TaskId: 20, TaskName: 'Exterior washing', BaselineStartDate: new Date('03/05/2018 04:45:00 PM'),
BaselineEndDate: new Date('03/05/2018 05:15:00 PM'), StartDate: new Date('03/05/2018 04:45:00 PM'),
EndDate: new Date('03/05/2018 05:30:00 PM')
},
{
TaskId: 21, TaskName: 'Interior vacuuming', BaselineStartDate: new Date('03/05/2018 05:15:00 PM'),
BaselineEndDate: new Date('03/05/2018 05:45:00 PM'), StartDate: new Date('03/05/2018 05:30:00 PM'),
EndDate: new Date('03/05/2018 06:00:00 PM')
},
{
TaskId: 22, TaskName: 'Final service inspection', BaselineStartDate: new Date('03/05/2018 05:45:00 PM'),
BaselineEndDate: new Date('03/05/2018 06:00:00 PM'), StartDate: new Date('03/05/2018 06:00:00 PM'),
EndDate: new Date('03/05/2018 06:30:00 PM')
},
{
TaskId: 23, TaskName: 'Vehicle handover', BaselineStartDate: new Date('03/05/2018 06:00:00 PM'),
BaselineEndDate: new Date('03/05/2018 06:00:00 PM'), StartDate: new Date('03/05/2018 06:30:00 PM'),
EndDate: new Date('03/05/2018 06:30:00 PM')
}
];Timeline tooltip
Timeline tooltips, customized with tooltipSettings.timeline, display date details.
The following example customizes timeline tooltips:
import { CommonModule } from '@angular/common';
import { GanttModule } from '@syncfusion/ej2-angular-gantt'
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { editingData } from './data';
@Component({
imports: [GanttModule, CommonModule],
standalone: true,
selector: "app-root",
template: `
<ejs-gantt height="430px" [dataSource]="data" [taskFields]="taskSettings" [tooltipSettings]="tooltipSettings">
<ng-template #tooltipSettingsTimeline let-data>
<ng-container *ngIf="data.tier === 'topTier'; else bottomTierTemplate">
<div *ngIf="executeTopTierTooltip(data.value, data.date, data.tier)">
<div
[style.border-bottom]="'2px solid white'"
[style.padding-bottom]="'5px'"
[style.text-align]="'center'"
>
<span style="font-weight: bold; font-size: 14px;"></span>
</div>
<div style="display: flex; padding-bottom: 5px; padding-top: 5px;">
<span style="font-weight: bold;">Active Tasks:</span>
<span style="padding-left: 2px;"></span>
</div>
<div style="display: flex; padding-bottom: 5px;">
<span style="font-weight: bold;">Milestones:</span>
<span style="padding-left: 2px;"></span>
</div>
<div style="display: flex; padding-bottom: 5px;">
<span style="font-weight: bold;">Overall Progress:</span>
<span style="padding-left: 2px;"></span>
</div>
</div>
</ng-container>
<ng-template #bottomTierTemplate>
<div *ngIf="executeBottomTierTooltip(data.date, data.tier)">
<div
[style.border-bottom]="'2px solid white'"
[style.padding-bottom]="'5px'"
[style.text-align]="'center'"
>
<span style="font-weight: bold; font-size: 14px;"></span>
</div>
<div style="display: flex; padding-bottom: 5px; padding-top: 5px;">
<span style="font-weight: bold;">Active Tasks:</span>
<span style="padding-left: 2px;"></span>
</div>
<div style="display: flex; padding-bottom: 5px;">
<span style="font-weight: bold;">Milestones:</span>
<span style="padding-left: 2px;"></span>
</div>
<div style="display: flex; padding-bottom: 5px;">
<span style="font-weight: bold;">Overall Progress:</span>
<span style="padding-left: 2px;"></span>
</div>
</div>
</ng-template>
</ng-template>
</ejs-gantt>
`,
encapsulation: ViewEncapsulation.None,
})
export class AppComponent implements OnInit {
public data?: object[];
public taskSettings?: object;
public tooltipSettings?: object;
public topTierData: any;
public bottomTierData: any;
public ngOnInit(): void {
this.data = editingData;
this.taskSettings = {
id: "TaskID",
name: "TaskName",
startDate: "StartDate",
endDate: 'EndDate',
duration: "Duration",
progress: "Progress",
dependency: "Predecessor",
child: "subtasks",
};
this.tooltipSettings = {
showTooltip: true,
};
}
private getTooltipData(startDate: Date, endDate: Date, tier: string) {
let ganttElement = document.getElementsByClassName('e-gantt')[0] as any;
let gantt = ganttElement ? ganttElement.ej2_instances[0] : null;
if (!gantt) return { activeTasks: 0, milestones: 0, overallProgress: 0 };
let activeTasks = gantt.currentViewData.filter((task: any) => {
let taskStart = new Date(task.StartDate);
let taskEnd = new Date(task.EndDate);
taskStart.setHours(0, 0, 0, 0);
taskEnd.setHours(0, 0, 0, 0);
return tier === 'topTier'
? taskStart >= startDate && taskEnd <= endDate
: taskStart.getTime() === startDate.getTime() && taskEnd.getTime() === endDate.getTime();
});
let milestones = activeTasks.filter((task: any) => task.Duration === 0);
let totalProgress = activeTasks.reduce((acc: number, task: any) => acc + (task.Progress || 0), 0);
let overallProgress = activeTasks.length > 0 ? (totalProgress / activeTasks.length).toFixed(2) : "0";
return {
activeTasks: activeTasks.length,
milestones: milestones.length,
overallProgress: overallProgress,
};
}
public topTierTooltip(value: string, date: Date, tier: string): void {
let ganttElement = document.getElementsByClassName("e-gantt")[0] as any;
let gantt = ganttElement ? ganttElement.ej2_instances[0] : null;
if (!gantt) return;
let endDate = new Date(date);
if (gantt.timelineSettings.topTier.unit) {
endDate.setDate(endDate.getDate() + 6);
}
this.topTierData = this.getTooltipData(new Date(date), endDate, tier);
}
public bottomTierTooltip(date: string, tier: string): void {
let ganttElement = document.getElementsByClassName("e-gantt")[0] as any;
let gantt = ganttElement ? ganttElement.ej2_instances[0] : null;
if (!gantt) return;
let endDate = new Date(date);
if (gantt.timelineSettings.bottomTier.unit) {
endDate = new Date(date);
}
this.bottomTierData = this.getTooltipData(new Date(date), endDate, tier);
}
public executeTopTierTooltip(value: string, date: Date, tier: string): boolean {
this.topTierTooltip(value, date, tier);
return true;
}
public executeBottomTierTooltip(date: string, tier: string): boolean {
this.bottomTierTooltip(date, tier);
return true;
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export let editingData: Object[] = [
{
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: 0,
Progress: 30, resources: [1], info: 'Measure the total property area alloted for construction'
},
{
TaskID: 3, TaskName: 'Perform Soil test', StartDate: new Date('04/02/2019'), Duration: 4, Predecessor: '2',
resources: [2, 3, 5], info: 'Obtain an engineered soil test of lot where construction is planned.' +
'From an engineer or company specializing in soil testing'
},
{ TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/02/2019'), Duration: 0, Predecessor: '3', Progress: 30 },
]
},
{
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, Predecessor: '4', Progress: 30, resources: 4,
info: 'Develop floor plans and obtain a materials list for estimations'
},
{
TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'),
Duration: 3, Predecessor: '6', resources: [4, 8], info: ''
},
{
TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/04/2019'),
Duration: 0, Predecessor: '7', resources: [12, 5], info: ''
}
]
},
{
TaskID: 9, TaskName: 'Sign Contract', StartDate: new Date('04/04/2019'), Duration: 1,
Predecessor: '8', Progress: 30, resources: [12],
info: 'If required obtain approval from HOA (homeowners association) or ARC (architectural review committee)'
},
{
TaskID: 10,
TaskName: 'Project Approval and kick off',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
Duration: 0,
Predecessor: '9'
},
{
TaskID: 11,
TaskName: 'Site Work',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 12, TaskName: 'Clear the building site', StartDate: new Date('04/04/2019'),
Duration: 2, Progress: 30, Predecessor: '9', resources: [6, 7],
info: 'Clear the building site (demolition of existing home if necessary)'
},
{
TaskID: 13, TaskName: 'Install temporary power service', StartDate: new Date('04/04/2019'),
Duration: 2, Predecessor: '12', resources: [6, 7], info: ''
},
]
},
{
TaskID: 14,
TaskName: 'Foundation',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 15, TaskName: 'Excavate for foundations', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '13', resources: [2, 8],
info: 'Excavate the foundation and dig footers (Scope of work is dependent of foundation designed by engineer)'
},
{
TaskID: 16, TaskName: 'Dig footer', StartDate: new Date('04/04/2019'),
Duration: 2, Predecessor: '15FF', resources: [8], info: ''
},
{
TaskID: 17, TaskName: 'Install plumbing grounds', StartDate: new Date('04/04/2019'), Duration: 4,
Progress: 30, Predecessor: '15', resources: [9], info: ''
},
{
TaskID: 18, TaskName: 'Pour a foundation and footer with concrete', StartDate: new Date('04/04/2019'),
Duration: 1, Predecessor: '17', resources: [8, 9, 10], info: ''
},
{
TaskID: 19, TaskName: 'Cure basement walls', StartDate: new Date('04/04/2019'), Duration: 4,
Progress: 30, Predecessor: '18', resources: [10], info: ''
},
]
},
{
TaskID: 20,
TaskName: 'Framing',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 21, TaskName: 'Add load-bearing structure', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '19', resources: [4, 5],
info: 'Build the main load-bearing structure out of thick pieces of wood and' +
'possibly metal I-beams for large spans with few supports'
},
{
TaskID: 22, TaskName: 'Install floor joists', StartDate: new Date('04/04/2019'),
Duration: 3, Predecessor: '21', resources: [2, 3], info: 'Add floor and ceiling joists and install subfloor panels'
},
{
TaskID: 23, TaskName: 'Add ceiling joists', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '22SS', resources: [5], info: ''
},
{
TaskID: 24, TaskName: 'Install subfloor panels', StartDate: new Date('04/04/2019'),
Duration: 3, Predecessor: '23', resources: [8, 9]
},
{
TaskID: 25, TaskName: 'Frame floor walls', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '24', resources: [10], info: ''
},
{
TaskID: 26, TaskName: 'Frame floor decking', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '25SS', resources: [4, 8], info: ''
},
]
},
{
TaskID: 27,
TaskName: 'Exterior finishing',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 28, TaskName: 'Cover outer walls and roof in OSB', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '26', resources: [2, 8],
info: 'Cover outer walls and roof in OSB or plywood and a water-resistive barrier'
},
{
TaskID: 29, TaskName: 'Add water resistive barrier', StartDate: new Date('04/04/2019'),
Duration: 3, Predecessor: '28', resources: [1, 10],
info: 'Cover the walls with siding, typically vinyl, wood, or brick veneer but possibly stone or other materials'
},
{
TaskID: 30, TaskName: 'Install roof shingles', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '29', resources: [8, 9], info: 'Install roof shingles or other covering for flat roof'
},
{ TaskID: 31, TaskName: 'Install windows', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '29', resources: 7 },
]
},
{
TaskID: 32,
TaskName: 'Utilities',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 33, TaskName: 'Install internal plumbing', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '26', resources: [1, 10]
},
{
TaskID: 34, TaskName: 'Install HVAC', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '33',
resources: [4, 9], info: 'Add internal plumbing, HVAC, electrical, and natural gas utilities'
},
{
TaskID: 35, TaskName: 'Electrical utilities', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '34'
},
{
TaskID: 36, TaskName: 'Natural gas utilities', StartDate: new Date('04/04/2019'), Duration: 3,
Predecessor: '35', resources: 11
},
{
TaskID: 37, TaskName: 'Install bathroom fixtures', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '35', resources: [3, 7]
},
],
info: 'Building inspector visits if necessary to approve utilities and framing'
},
{
TaskID: 38,
TaskName: 'Interior finsihing',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 39, TaskName: 'Install insulation', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '37', resources: [1, 8], info: 'Frame interior walls with wooden 2×4s'
},
{
TaskID: 40, TaskName: 'Install drywall panels', StartDate: new Date('04/04/2019'), Duration: 3,
Predecessor: '39', resources: 5,
info: 'Install insulation and interior drywall panels (cementboard for wet areas) and to complete walls and ceilings'
},
{
TaskID: 41, TaskName: 'Spackle', StartDate: new Date('04/04/2019'), Duration: 3,
Progress: 30, Predecessor: '40', resources: 10
},
{
TaskID: 42, TaskName: 'Apply primer', StartDate: new Date('04/04/2019'), Duration: 3,
Predecessor: '41', resources: [10, 11]
},
{
TaskID: 43, TaskName: 'Paint wall and ceilings', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '42', resources: [2, 9]
},
{
TaskID: 44, TaskName: 'Install modular kitchen', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '43', resources: [5, 7]
},
]
},
{
TaskID: 45,
TaskName: 'Flooring',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 46, TaskName: 'Tile kitchen, bathroom and entry walls', StartDate: new Date('04/04/2019'),
Duration: 3, Progress: 30, Predecessor: '44', resources: [4, 9, 3],
info: 'Additional tiling on top of cementboard for wet areas, such as the bathroom and kitchen backsplash'
},
{
TaskID: 47, TaskName: 'Tile floor', StartDate: new Date('04/04/2019'), Duration: 3, Predecessor: '46SS',
resources: [2, 8], info: 'Installation of final floor covering, such as floor tile, carpet, or wood flooring'
},
]
},
{
TaskID: 48,
TaskName: 'Final Acceptance',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 49, TaskName: 'Final inspection', StartDate: new Date('04/04/2019'), Duration: 2,
Progress: 30, Predecessor: '47', resources: 12, info: 'Ensure the contracted items'
},
{
TaskID: 50, TaskName: 'Cleanup for occupancy', StartDate: new Date('04/04/2019'), Duration: 2,
Predecessor: '49', resources: [1, 5], info: 'Installation of major appliances'
},
{
TaskID: 51, TaskName: 'Property Handover', StartDate: new Date('04/04/2019'), Duration: 0,
Predecessor: '50', info: 'Ending the contract'
},
]
},
];Tooltip Touch interaction
To perform touch and hold action on a element, refer to tooltip popup.