Resource multi taskbar in Angular Gantt component
18 Oct 202524 minutes to read
The resource multi taskbar feature in the Angular Gantt component visualizes multiple tasks assigned to a single resource in one row when collapsed in resource view, enabled by setting enableMultiTaskbar to true and viewType to ResourceView. This displays workloads, such as concurrent tasks assigned to a resource, like coding activities, in a compact timeline, highlighting overallocation or scheduling conflicts. Taskbars maintain individual properties (e.g., duration, progress) and support editing in collapsed rows, with expand/collapse controlled via grid-side arrows for visual consistency. The feature requires valid resourceInfo mappings in taskFields to associate tasks with resources. Taskbars include ARIA labels for accessibility and adapt to responsive designs, though narrow screens may clip labels for short tasks. By default, enableMultiTaskbar is false, requiring explicit activation.
Configure multi taskbar
Enable the multi taskbar feature by setting enableMultiTaskbar to true and viewType to ResourceView, with taskFields.resourceInfo mapping to a resource ID field. Resources are collapsed or expanded using grid-side arrows, and tasks are displayed in a single row when collapsed.
export class AppComponent {
public enableMultiTaskbar: boolean = true;
public viewType: string = 'ResourceView';
public taskSettings: object = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
resourceInfo: 'Resources'
};
}The following example demonstrates multi taskbar configuration:
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, ToolbarService, EditService, SelectionService } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [GanttModule],
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"
[projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate" viewType="ResourceView" [showOverAllocation] = 'true'
[enableMultiTaskbar]= 'true' [collapseAllParentTasks]= '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: ({ field: string; ss: any; headerText?: undefined; width?: undefined; } | { field: string; headerText: string; width: number; ss?: undefined; } | { field: string; headerText: string; ss?: undefined; width?: undefined; } | { field: string; ss?: undefined; headerText?: undefined; width?: undefined; })[] | undefined;
public toolbar?: object;
public ngOnInit(): void {
this.data = [
{
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.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 = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', '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));Configure taskbar overlap
The allowTaskbarOverlap property controls how multiple taskbars are displayed in a resource row:
- Overlapping mode (true, default): Taskbars overlap within standard row height, supporting full dependency connections, including between tasks of the same resource. Suitable for compact views with many tasks.
- Non-overlapping mode (false): Taskbars are vertically arranged in an extended row height, preventing overlap for clearer visibility of overallocation. Dependencies between tasks of the same resource are not supported due to vertical stacking, though inter-resource dependencies work.
The following example disables taskbar overlap:
export class AppComponent {
public enableMultiTaskbar: boolean = true;
public allowTaskbarOverlap: boolean = false;
public viewType: string = 'ResourceView';
}The following example demonstrates non-overlapping multi taskbar:
import { Component, ViewEncapsulation, OnInit } from '@angular/core';
import { GanttModule, ToolbarService, EditService, SelectionService } from '@syncfusion/ej2-angular-gantt'
@Component({
imports: [GanttModule],
providers: [ToolbarService, EditService, SelectionService],
standalone: true,
selector: 'app-root',
template:
`<ejs-gantt id="ganttDefault" [dataSource]="data" [resources]="resources" [taskFields]="taskSettings"
[resourceFields]="resourceFields" [editSettings]="editSettings" [columns]="columns" [toolbar]="toolbar" [labelSettings]="labelSettings"
[allowSelection]='true' [allowResizing] = 'true' [highlightWeekends] = 'true' [treeColumnIndex]="1" [allowTaskbarOverlap] = 'false'
[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 toolbar?: object;
public columns?: object[];
public ngOnInit(): void {
this.data = [
{
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.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));This configuration extends row height for clear task separation, ideal for identifying conflicts in small teams, but limits same-resource dependencies. Use overlapping mode for projects requiring extensive dependency mapping.