Resource View with Hierarchical Tasks in JavaScript Gantt Chart Chart
The resource view in the JavaScript Gantt Chart control organizes tasks hierarchically by resource, displaying resources as parent nodes and their assigned tasks as child taskbars in a timeline. Enable it by setting viewType to ResourceView. Resources are declared in the resources collection and mapped through resourceFields to identify the resource ID, name, unit, and group. Each task then references its assigned resources through taskFields.resourceInfo in the task data source so resource-based grouping and workload visualization are applied automatically. Unassigned tasks are grouped under an Unassigned Task node, while the queryTaskbarInfo event can customize taskbar styles and overallocation indicators can highlight scheduling conflicts. Taskbars include ARIA labels for accessibility, and the view adapts to responsive layouts, although narrow screens may truncate resource names. Parent tasks are not supported, and tasks require scheduling details such as a start date and duration.
Configure resource view
Enable resource view by setting viewType to ResourceView and mapping the resource collection with resources and resourceFields. In the task data source, assign resources through taskFields.resourceInfo by providing the resource IDs or resource objects that correspond to the mapped resource fields. The following snippet shows the data structure used for resource-based assignment:
var resources = [
{
resourceId: 1,
resourceName: "Martin Tamer",
resourceGroup: "Planning Team",
Unit: 50,
},
{
resourceId: 2,
resourceName: "Rose Fuller",
resourceGroup: "Testing Team",
Unit: 70,
},
];
var data = [
{
TaskID: 1,
TaskName: "Planning",
StartDate: new Date("03/25/2019"),
Duration: 3,
resources: [1],
},
{
TaskID: 2,
TaskName: "Development",
StartDate: new Date("03/28/2019"),
Duration: 5,
resources: [2],
},
];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:
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 RowDD module. This allows vertical taskbar movement for reassignment, triggered by the rowDragStart and rowDrop events.
The following example enables drag-and-drop:
Customize the taskbar based on resource view
You can customize the taskbar appearance based on resource view using the queryTaskbarInfo event.
Hide columns in resource tab
To hide a column in the Gantt Chart’s resource view, handle the actionBegin event and set the visible property of the target column to false when the requestType is beforeOpenAddDialog or beforeOpenEditDialog.
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.