Resource view in Angular Gantt component
18 Oct 202524 minutes to read
The resource view in the Angular Gantt component organizes tasks hierarchically by resource, displaying resources as parent nodes and their assigned tasks as child taskbars in a timeline. Enabled by setting viewType to ResourceView, this view visualizes workloads, such as multiple tasks per resource, with taskbars showing duration, progress, and dependencies. Unassigned tasks group under an Unassigned Task node. The queryTaskbarInfo event customizes taskbar styles, and overallocation indicators highlight scheduling conflicts. Taskbars include ARIA labels for accessibility, ensuring screen reader compatibility, and adapt to responsive designs, though narrow screens may truncate resource names. Parent tasks are not supported, and tasks require scheduling (start date and duration).
Configure resource view
Enable resource view by setting viewType to ResourceView and mapping resources via resources and resourceFields. Tasks are assigned using taskFields.resourceInfo.
The following example configures resource view:
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, ToolbarService, EditService, SelectionService } from '@syncfusion/ej2-angular-gantt'
import { projectNewData } from './data';
@Component({
imports: [GanttModule],
providers: [ToolbarService, EditService, SelectionService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt height="430px" [dataSource]="data" [resources]="resources" [taskFields]="taskSettings" [resourceFields]="resourceFields" [editSettings]="editSettings" [columns]="columns" [toolbar]="toolbar" [labelSettings]="labelSettings" [splitterSettings]="splitterSettings" [allowSelection]='true' [allowResizing] = 'true' [highlightWeekends] = 'true' [treeColumnIndex]="1" [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate" viewType="ResourceView"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit{
public data?: object[];
public resources?: object[];
public taskSettings?: object;
public labelSettings?: object;
public projectStartDate?: Date;
public projectEndDate?: Date;
public resourceFields?: object;
public editSettings?: object;
public columns?: object[];
public toolbar?: string[];
public splitterSettings?: object;
public ngOnInit(): void {
this.data = projectNewData;
this.resources = [
{ resourceId: 1, resourceName: 'Martin Tamer' },
{ resourceId: 2, resourceName: 'Rose Fuller' },
{ resourceId: 3, resourceName: 'Margaret Buchanan' },
{ resourceId: 4, resourceName: 'Fuller King' },
{ resourceId: 5, resourceName: 'Davolio Fuller' },
{ resourceId: 6, resourceName: 'Van Jack' },
{ resourceId: 7, resourceName: 'Fuller Buchanan' },
{ resourceId: 8, resourceName: 'Jack Davolio' },
{ resourceId: 9, resourceName: 'Tamer Vinet' },
{ resourceId: 10, resourceName: 'Vinet Fuller' },
{ resourceId: 11, resourceName: 'Bergs Anton' },
{ resourceId: 12, resourceName: 'Construction Supervisor' }
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
resourceInfo: 'resources',
work: 'work',
child: 'subtasks'
};
this.resourceFields = {
id: 'resourceId',
name: 'resourceName',
unit: 'Unit',
group: 'resourceGroup'
};
this.editSettings = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
this.columns = [
{ field: 'TaskID', visible: false },
{ field: 'TaskName', headerText: 'Name', width: 250 },
{ field: 'work', headerText: 'Work' },
{ field: 'Progress' },
{ field: 'resourceGroup', headerText: 'Group' },
{ field: 'StartDate' },
{ field: 'Duration' }
];
this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll'];
this.labelSettings = {
rightLabel: 'resources'
};
this.splitterSettings = {
columnIndex: 3
};
this.projectStartDate = new Date('03/25/2019');
this.projectEndDate = new Date('07/28/2019');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export let projectNewData: Object[] = [
{
TaskID: 1,
TaskName: 'Project initiation',
StartDate: new Date('03/29/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('03/29/2019'), Duration: 2,
Progress: 30, work: 10, resources: [{ resourceId: 1, resourceUnit: 50 }]
},
{
TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('03/29/2019'), Duration: 4,
resources: [{ resourceId: 2, resourceUnit: 70 }], Progress: 30, work: 20
},
{
TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('03/29/2019'), Duration: 1,
resources: [{ resourceId: 3, resourceUnit: 25 }, { resourceId: 1, resourceUnit: 75 }], Progress: 30, work: 10,
},
]
},
{
TaskID: 5,
TaskName: 'Project estimation', StartDate: new Date('03/29/2019'), EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('03/29/2019'),
Duration: 3, Progress: 30, resources: [{ resourceId: 4, resourceUnit: 50 }, { resourceId: 2, resourceUnit: 70 }], work: 30
},
{
TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/01/2019'), Duration: 3,
resources: [{ resourceId: 6, resourceUnit: 40 }], Progress: 30, work: 40
},
{
TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/01/2019'),
Duration: 2, resources: [{ resourceId: 5, resourceUnit: 75 }], Progress: 30, work: 60,
}
]
},
{
TaskID: 9, TaskName: 'Sign contract', StartDate: new Date('04/01/2019'), Duration: 1,
Progress: 30,
}
];This configuration groups tasks by resources, displaying them as child nodes.
Visualize resource overallocation
Overallocation occurs when tasks exceed a resource’s daily capacity, calculated from dayWorkingTime and resource unit in resourceFields.unit. Enable indicators with showOverAllocation set to true (default: false), highlighting affected date ranges with square brackets.
The following example toggles overallocation visibility:
import { Component, ViewEncapsulation, OnInit, ViewChild } from '@angular/core';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GanttComponent, GanttModule, ToolbarService, EditService, SelectionService } from '@syncfusion/ej2-angular-gantt'
import { projectNewData } from './data';
@Component({
imports: [GanttModule],
providers: [ToolbarService, EditService, SelectionService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt #gantt id="ganttDefault" [dataSource]="data" [resources]="resources" [taskFields]="taskSettings"
[resourceFields]="resourceFields" [editSettings]="editSettings" [columns]="columns" [toolbar]="toolbar" [labelSettings]="labelSettings"
[splitterSettings]="splitterSettings" [allowSelection]='true' [allowResizing] = 'true' [highlightWeekends] = 'true'
[treeColumnIndex]="1" [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate" viewType="ResourceView"
[showOverAllocation] = 'true' (toolbarClick)="toolbarClick($event)"></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
@ViewChild('gantt', { static: true }) public ganttInstance?: GanttComponent
public data?: object[];
public resources?: object[];
public taskSettings?: object;
public labelSettings?: object;
public projectStartDate?: Date;
public projectEndDate?: Date;
public resourceFields?: object;
public editSettings?: object;
public columns?: object[];
public toolbar?: (string | object)[];
public splitterSettings?: object;
public ngOnInit(): void {
this.data = projectNewData;
this.resources = [
{ resourceId: 1, resourceName: 'Martin Tamer', resourceGroup: 'Planning Team' },
{ resourceId: 2, resourceName: 'Rose Fuller', resourceGroup: 'Testing Team' },
{ resourceId: 3, resourceName: 'Margaret Buchanan', resourceGroup: 'Approval Team' }
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
resourceInfo: 'resources',
work: 'work',
child: 'subtasks'
};
this.resourceFields = {
id: 'resourceId',
name: 'resourceName',
unit: 'Unit',
group: 'resourceGroup'
};
this.editSettings = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
this.columns = [
{ field: 'TaskID', visible: false },
{ field: 'TaskName', headerText: 'Name', width: 250 },
{ field: 'work', headerText: 'Work' },
{ field: 'Progress' },
{ field: 'resourceGroup', headerText: 'Group' },
{ field: 'StartDate' },
{ field: 'Duration' }
];
this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll',
{ text: 'Show/Hide Overallocation', tooltipText: 'Show/Hide Overallocation', id: 'showhidebar' }];
this.labelSettings = {
rightLabel: 'resources',
taskLabel: 'Progress'
}
this.projectStartDate = new Date('03/25/2019');
this.projectEndDate = new Date('07/28/2019');
}
public toolbarClick(args: ClickEventArgs): void {
if (args.item.id === 'showhidebar') {
this.ganttInstance!.showOverAllocation = this.ganttInstance!.showOverAllocation ? false : true;
}
};
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));export let projectNewData: Object[] = [
{
TaskID: 1,
TaskName: 'Project initiation',
StartDate: new Date('03/29/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('03/29/2019'), Duration: 3,
Progress: 30, work: 10, resources: [{ resourceId: 1, resourceUnit: 50 }]
},
{
TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('04/03/2019'), Duration: 4,
resources: [{ resourceId: 1, resourceUnit: 70 }], Predecessor: 2, Progress: 30, work: 20
},
{
TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/09/2019'), Duration: 4,
resources: [{ resourceId: 1, resourceUnit: 25 }], Predecessor: 3, Progress: 30, work: 10,
},
]
},
{
TaskID: 5,
TaskName: 'Project estimation', StartDate: new Date('03/29/2019'), EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/01/2019'),
Duration: 5, Progress: 30, resources: [{ resourceId: 2, resourceUnit: 50 }], work: 30
},
{
TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 4,
resources: [{ resourceId: 2, resourceUnit: 40 }], Predecessor: '6FS-2', Progress: 30, work: 40
},
{
TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/09/2019'),
Duration: 4, resources: [{ resourceId: 2, resourceUnit: 75 }], Predecessor: '7FS-1', Progress: 30, work: 60,
}
]
},
{
TaskID: 9,
TaskName: 'Site work',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 10, TaskName: 'Install temporary power service', StartDate: new Date('04/01/2019'), Duration: 14,
Progress: 30, resources: [{ resourceId: 3, resourceUnit: 75 }]
},
{
TaskID: 11, TaskName: 'Clear the building site', StartDate: new Date('04/08/2019'),
Duration: 9, Progress: 30, Predecessor: '10FS-9', resources: [3]
},
{
TaskID: 12, TaskName: 'Sign contract', StartDate: new Date('04/12/2019'),
Duration: 5, resources: [3], Predecessor: '11FS-5'
},
]
}
];This configuration highlights scheduling conflicts for workload management.
Manage unassigned tasks
Tasks not assigned to any resource are termed unassigned tasks. These tasks are automatically grouped under a node labeled Unassigned Task and displayed at the bottom of the Gantt data collection. The system validates task assignments during load time based on the taskFields.resourceInfo mapping property in the data source.
When a resource is subsequently assigned to an unassigned task, the task automatically moves to become a child of the respective resource node.
Enable taskbar drag and drop
Enable taskbar drag-and-drop between resources with allowTaskbarDragAndDrop set to true, requiring the RowDDService module. This allows vertical taskbar movement for reassignment, triggered by the rowDragStart and rowDrop events.
The following example enables drag-and-drop:
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttAllModule, ToolbarService, EditService, SelectionService } from '@syncfusion/ej2-angular-gantt'
import { projectNewData } from './data';
@Component({
imports: [GanttAllModule],
providers: [ToolbarService, EditService, SelectionService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt [dataSource]="data" [resources]="resources" [taskFields]="taskSettings"
[resourceFields]="resourceFields" [editSettings]="editSettings" [columns]="columns" [toolbar]="toolbar" [labelSettings]="labelSettings"
[allowSelection]='true' [allowResizing] = 'true' [highlightWeekends] = 'true' [treeColumnIndex]="1" [allowTaskbarDragAndDrop] = 'true'
[projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate" viewType="ResourceView" [showOverAllocation] = 'true'
[enableMultiTaskbar]= 'true' ></ejs-gantt>`,
encapsulation: ViewEncapsulation.None
})
export class AppComponent implements OnInit {
public data?: object[];
public resources?: object[];
public taskSettings?: object;
public labelSettings?: object;
public projectStartDate?: Date;
public projectEndDate?: Date;
public resourceFields?: object;
public editSettings?: object;
public columns?: object[];
public toolbar?: (string | object)[];
public ngOnInit(): void {
this.data = projectNewData;
this.resources = [
{ resourceId: 1, resourceName: 'Martin Tamer', resourceGroup: 'Planning Team', isExpand: false },
{ resourceId: 2, resourceName: 'Rose Fuller', resourceGroup: 'Testing Team', isExpand: true },
{ resourceId: 3, resourceName: 'Margaret Buchanan', resourceGroup: 'Approval Team', isExpand: false }
];
this.taskSettings = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
dependency: 'Predecessor',
resourceInfo: 'resources',
work: 'work',
expandState: 'isExpand',
child: 'subtasks'
};
this.resourceFields = {
id: 'resourceId',
name: 'resourceName',
unit: 'Unit',
group: 'resourceGroup'
};
this.editSettings = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true
};
this.columns = [
{ field: 'TaskID' },
{ field: 'TaskName', headerText: 'Name', width: 250 },
{ field: 'work', headerText: 'Work' },
{ field: 'Progress' },
{ field: 'resourceGroup', headerText: 'Group' },
{ field: 'StartDate' },
{ field: 'Duration' }
];
this.toolbar = ['ExpandAll', 'CollapseAll'];
this.labelSettings = {
rightLabel: 'resources',
taskLabel: 'TaskName'
};
this.projectStartDate = new Date('03/25/2019');
this.projectEndDate = new Date('07/28/2019');
}
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));/**
* TreeGrid DataSource
*/
export let projectNewData: Object[] = [
{
TaskID: 1,
TaskName: 'Project initiation',
StartDate: new Date('03/29/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 2, TaskName: 'Identify site location', StartDate: new Date('03/29/2019'), Duration: 3,
Progress: 30, work: 10, resources: [{ resourceId: 1, resourceUnit: 50 }]
},
{
TaskID: 3, TaskName: 'Perform soil test', StartDate: new Date('04/03/2019'), Duration: 4,
resources: [{ resourceId: 1, resourceUnit: 70 }], Predecessor: 2, Progress: 30, work: 20
},
{
TaskID: 4, TaskName: 'Soil test approval', StartDate: new Date('04/09/2019'), Duration: 4,
resources: [{ resourceId: 1, resourceUnit: 25 }], Predecessor: 3, Progress: 30, work: 10,
},
]
},
{
TaskID: 5,
TaskName: 'Project estimation', StartDate: new Date('03/29/2019'), EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 6, TaskName: 'Develop floor plan for estimation', StartDate: new Date('04/01/2019'),
Duration: 5, Progress: 30, resources: [{ resourceId: 2, resourceUnit: 50 }], work: 30
},
{
TaskID: 7, TaskName: 'List materials', StartDate: new Date('04/04/2019'), Duration: 4,
resources: [{ resourceId: 2, resourceUnit: 40 }], Predecessor: '6FS-2', Progress: 30, work: 40
},
{
TaskID: 8, TaskName: 'Estimation approval', StartDate: new Date('04/09/2019'),
Duration: 4, resources: [{ resourceId: 2, resourceUnit: 75 }], Predecessor: '7FS-1', Progress: 30, work: 60,
}
]
},
{
TaskID: 9,
TaskName: 'Site work',
StartDate: new Date('04/04/2019'),
EndDate: new Date('04/21/2019'),
subtasks: [
{
TaskID: 10, TaskName: 'Install temporary power service', StartDate: new Date('04/01/2019'), Duration: 14,
Progress: 30, resources: [{ resourceId: 3, resourceUnit: 75 }]
},
{
TaskID: 11, TaskName: 'Clear the building site', StartDate: new Date('04/08/2019'),
Duration: 9, Progress: 30, Predecessor: '10FS-9', resources: [3]
},
{
TaskID: 12, TaskName: 'Sign contract', StartDate: new Date('04/12/2019'),
Duration: 5, resources: [3], Predecessor: '11FS-5'
},
]
}
];This configuration supports dynamic task reassignment.
Limitations
- Resource view does not support parent tasks; all tasks must be child tasks under resources or the Unassigned Task node.
- Unscheduled tasks (lacking start date or duration) are not supported in resource view.