Gantt Chart / Resource / Resource Multi Taskbar

Blazor Gantt Chart Example - Multiple Taskbars Per Resource

Loading Syncfusion Blazor Server Demos…

This sample demonstrates how to visualize tasks assigned to a resource within a collapsed parent row using the Blazor Gantt Chart, along with the ability to modify task scheduling while the row remains collapsed. This functionality is enabled by setting the EnableMultiTaskbar property of GanttTaskbarSettings to true.

It also showcases vertical drag-and-drop support for taskbars between different resources. To enable this feature, set the AllowTaskbarDragAndDrop property of GanttTaskbarSettings to true.

In this demo, resource assignments are defined using a collection that includes both resource IDs and task IDs, allowing tasks to be mapped to specific resources. Task-related resource information is displayed using the TaskLabel property of the GanttLabelSettings.

Resources are mapped 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 can be mapped using the GanttAssignmentFields component with the following properties:

  • 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.

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.

Transform your Blazor web apps today with Syncfusion® Blazor components
145+ high-performance and responsive UI components
Dedicated support
Hassle-free licensing
TRY IT FOR FREE