This sample explains the Resource break down view in the Gantt chart that is how to visualize the list of tasks assigned to each resource in hierarchy manner and switch the resources as per users need by task editing mode.If the no resources are mapped in a task, then it will come under “unassigned Tasks” category. This feature can be enabled by setting the viewType property to “ResourceView”.
When a resource is assigned with two or more tasks which is scheduleduling on a same date is termed as over allocation for a resource. The number of over allocation dates ranges are highlighted as with square bracket. The following sample demonstrates the over allocation for a resource. In this sample, over allocation can be hidden by using the CSS ‘visibility’ property on custom toolbar item action.
ID | Name | Work | Progress | Start Date | Duration | UniqueID |
|---|---|---|---|---|---|---|
| R-1 | Martin Tamer | 20.00 hours | 30 | 3/29/2024 | 4.17 days | 0 |
| T-2 | Identify site location | 10.00 hours | 30 | 3/29/2024 | 2.5 days | 1 |
| T-4 | Soil test approval | 10.00 hours | 30 | 4/2/2024 | 1.67 days | 2 |
| R-2 | Rose Fuller | 74.00 hours | 22 | 3/29/2024 | 10.93 days | 3 |
| T-3 | Perform soil test | 20.00 hours | 30 | 3/29/2024 | 3.57 days | 4 |
| T-6 | Develop floor plan for estimation | 30.00 hours | 30 | 4/5/2024 | 5.36 days | 5 |
| T-11 | Dig footer | 24.00 hours | 0 | 4/8/2024 | 3 days | 6 |
| R-3 | Margaret Buchanan | 64.00 hours | 30 | 4/1/2024 | 6 days | 7 |
| T-10 | Install plumbing grounds | 32.00 hours | 30 | 4/1/2024 | 4 days | 8 |
| T-12 | Electrical utilities | 32.00 hours | 30 | 4/3/2024 | 4 days | 9 |
| R-4 | Fuller King | 32.00 hours | 30 | 4/1/2024 | 4 days | 10 |
| T-9 | Excavate for foundations | 32.00 hours | 30 | 4/1/2024 | 4 days | 11 |
| R-5 | Davolio Fuller | 60.00 hours | 30 | 4/3/2024 | 10 days | 12 |
| T-8 | Estimation approval | 60.00 hours | 30 | 4/3/2024 | 10 days | 13 |
| R-6 | Van Jack | 40.00 hours | 30 | 4/8/2024 | 12.5 days | 14 |
| T-7 | List materials | 40.00 hours | 30 | 4/8/2024 | 12.5 days | 15 |
| R-0 | Unassigned Task | 0.00 hours | 30 | 4/4/2024 | 2 days | 16 |
| T-13 | Sign contract | 0.00 hours | 30 | 4/4/2024 | 2 days | 17 |
Mar 28, 2024 | Mar 31, 2024 | Apr 07, 2024 | Apr 14, 2024 | Apr 21, 2024 | Apr 28, 2024 | May 05, 2024 | May 12, 2024 |
|---|
T | F | S | 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 | S | M | T | W | T | F | S | S | M | T | W | T | F | S | S | M | T | W | T | F |
|---|
In this example, you can see the resource break down from a bulk of tasks done by mapping the predefined resource ID-s to each task and resource information can be shown by using the labelSetting property. Using the toolbar action, you can perform CRUD operation for resource allocation based on their availability and task complexity. The resources and tasks assigned to those resources can be grouped into categories. Resources can be mapped using the resourceFields:-. ID: To map resource ID. Name: To map resource name. Unit: To map resource unit. Group: To map resource group. Injecting module: The Gantt control features are segregated into individual feature-wise modules. To use a selection, inject the Selection module using the Gantt.Inject(Selection) method. To use markers, inject the DayMarkers module using the Gantt.Inject(DayMarkers) method. To edit, inject the Toolbar module using the Gantt.Inject(Toolbar) method and Edit module using the Gantt.Inject(Edit) method.