Example of Resource View in React Gantt Component


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.

More Details...


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.

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.