Blazor Gantt Chart Example - Resource-Centric View
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 |
This sample demonstrates the resource breakdown view in the Blazor Gantt Chart, which visualizes tasks
assigned to each resource in a hierarchical structure. Tasks can be reassigned or edited directly within the chart.
If a task has no assigned resource, it will appear under the Unassigned Tasks category.
To enable this feature, set the ViewType
property to ResourceView.
When a resource is assigned multiple tasks scheduled on the same date, it results in overallocation. The number of overallocation instances is indicated
in square brackets next to the resource name. This feature can be activated by setting the
ShowOverallocation
property to true.
This sample also demonstrates how to plan and allocate resources based on task complexity and availability. Tasks without assigned resources can be
reassigned using row drag and drop, which requires the
AllowRowDragAndDrop
property to be set to true.
Resources are defined using the GanttResource component with the following properties:
Id– Maps the resource ID.Name– Maps the resource name.MaxUnits– Defines the maximum allocation units for a resource.DataSource– Specifies the data source for resource mapping.
Resource assignments are configured using the GanttAssignmentFields component:
PrimaryKey– Maps the primary key field.TaskID– Maps the task identifier.ResourceID– Maps the resource identifier.DataSource– Specifies the data source for resource assignment mapping.
A toggle button in this sample allows switching between resource view and project view, making it easy to access different perspectives and make informed decisions.
Additionally the toolbar provides built-in options for add, update, delete, expand, and collapse operations, enabling interactive task management.
For further details, refer to the documentation.