Blazor Gantt Chart Example - Resource-Centric View
This sample explains the resource breakdown view in the Gantt chart, which is how to visualize the list of tasks assigned to each resource in a hierarchical manner and switch the resources as per the user's needs by task editing mode. If no resources are mapped to a task, then it will come under the “Unassigned Tasks” category. This feature can be enabled by setting the ViewType to ResourceView.
When a resource is assigned two or more tasks that are scheduled on the same date, this is termed overallocation for the resource. The number of overallocation dates is highlighted in square brackets. This feature can be enabled by setting ShowOverallocation to true. The following sample demonstrates the overallocation of a resource.
ID | Name | Work (Hours) | Progress | Start Date | Duration |
|---|
| -2 | Martin Tamer | 32 Hours | 40 | 3/29/2022 | 2 days | |
| 2 | Identify Site location | 16 Hours | 30 | 3/29/2022 | 2 days | |
| 3 | Site Analyze | 16 Hours | 50 | 3/29/2022 | 2 days | |
| -3 | Rose Fuller | 110 Hours | 40 | 3/29/2022 | 12.5 days | |
| 6 | Project estimation | 50 Hours | 40 | 3/29/2022 | 6.25 days | |
| 12 | Ground floor initiation | 60 Hours | 40 | 4/5/2022 | 7.5 days | |
| -4 | Margaret Buchanan | 96 Hours | 40 | 3/31/2022 | 12 days | |
| 4 | Perform soil test | 96 Hours | 40 | 3/31/2022 | 12 days | |
| -5 | Fuller King | 30 Hours | 30 | 4/18/2022 | 3.75 days | |
| 7 | Develop floor plan for estimation | 30 Hours | 30 | 4/18/2022 | 3.75 days | |
| -6 | Davolio Fuller | 120 Hours | 70 | 4/6/2022 | 10.5 days | |
| 18 | Tile test | 60 Hours | 100 | 4/6/2022 | 7.5 days | |
| 19 | Tile work initation | 60 Hours | 40 | 4/11/2022 | 7.5 days | |
| -7 | Fuller Buchanan | 60 Hours | 40 | 4/1/2022 | 7.5 days | |
| 13 | First floor initiation | 60 Hours | 40 | 4/1/2022 | 7.5 days | |
| -8 | Jack Davolio | 120 Hours | 40 | 4/1/2022 | 8.5 days | |
| 14 | Electric work initiation | 60 Hours | 40 | 4/1/2022 | 7.5 days | |
| 17 | Wiring test | 60 Hours | 40 | 4/4/2022 | 7.5 days | |
| -9 | Tamer Vinet | 48 Hours | 30 | 4/1/2022 | 6 days | |
| 8 | List materials | 48 Hours | 30 | 4/1/2022 | 6 days | |
| -10 | Vinet Fuller | 60 Hours | 40 | 4/4/2022 | 7.5 days | |
| 15 | Plumbing work | 60 Hours | 40 | 4/4/2022 | 7.5 days | |
| -11 | Bergs Anton | 60 Hours | 40 | 4/1/2022 | 7.5 days | |
| 16 | Interior work | 60 Hours | 40 | 4/1/2022 | 7.5 days | |
| -12 | Construction Supervisor | 60 Hours | 30 | 4/11/2022 | 7.5 days | |
| 9 | Estimation approval | 60 Hours | 30 | 4/11/2022 | 7.5 days | |
| -1 | Unassigned Tasks | 120 Hours | 50 | 4/1/2022 | 4 days | |
| 10 | Building approval | 60 Hours | 50 | 4/1/2022 | 4 days | |
| 20 | Building test | 60 Hours | 50 | 4/1/2022 | 4 days |
Mar 27, 2022 | Apr 03, 2022 | Apr 10, 2022 | Apr 17, 2022 |
S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F | S |
In this example, you can plan and allocate resources to tasks in the project based on task complexity and resource availability. The user can also assign resources to tasks with no resources by row drag and drop. To achieve this action, set the AllowRowDragAndDrop property to true. In this demo, there is a set of predefined resources, and those IDs are assigned to the resource assignment collection. Resource information can be shown in a Gantt chart by using the LabelSettings property.
Resources can be mapped using GanttResource component with the following properties:
Id- To map resource IDName- To map resource nameMaxUnits- To map resource unitDataSource- To map resource data source
Resource assignment can be mapped using GanttAssignmentFields component with the following properties:
PrimaryKey- To map primary keyTaskID- To map task IDResourceID- To map resource IDDataSource- To map resource assignment data source
By utilizing the toggle button in this example, you can effortlessly transition between the resource view and project view, enabling you to conveniently access the desired perspective and make well-informed decisions based on the available information.
More information about resource view in Gantt can be found in this documentation section.