Example of Resource Multi Taskbar in React Gantt Component

/
/
ResourceMultiTaskbar

This sample explains you about, how to visualize the list of tasks assigned for a resource in a parent row of collapsed state. It is also possible to change the tasks scheduling in the collapsed state. This feature can be enabled by setting the enableMultiTaskbar property as "true".

More Details...

Loading....
Description

In this example, you can enable taskbar drag and drop from one resource to another resource vertically by enabling allowTaskbarDragAndDrop property. Also, you can prevent the taskbar overlap in resource task by disabling the allowTaskbarOverlap property.

In this example, you can see that, the resource breaks down from a bulk of tasks can be done by mapping the pre-defined resource ID-s to each task and the resource information can be shown by using the labelSetting property. Using the toolbar action, you can perform the CRUD operation for the 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.