# gantt-resource-view

> Resource-view Gantt assigns tasks to resources, supports row drag-and-drop and editing, and displays work and progress labels.

**Framework:** blazor  **Component:** Gantt  **Variant:** resource-view

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/blazor/gantt-resource-view.json
```

**Install Package(s)**

```bash
dotnet add package Syncfusion.Blazor.Gantt
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/gantt-resource-view/DataSource.cs

```cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace BlazorDemos.Pages.GanttChart.Data
{
    internal sealed class ResourceViewData
    {
        public sealed class TaskData
        {
            public int Id { get; set; }
            public string Name { get; set; } = string.Empty;
            public DateTime StartDate { get; set; }
            public DateTime? EndDate { get; set; }
            public string? Duration { get; set; }
            public int Progress { get; set; }
            public int? ParentId { get; set; }
            public string Predecessor { get; set; } = string.Empty;
            public string Notes { get; set; } = string.Empty;
            public double? Work { get; set; }
            public string TaskType { get; set; } = string.Empty;
            public DateTime BaselineStartDate { get; set; }
            public DateTime BaselineEndDate { get; set; }
            public string? Details { get; set; }
        }
        public sealed class ResourceInfoModel
        {
            public int Id { get; set; }
            public string Name { get; set; } = string.Empty;
            public double MaxUnit { get; set; }
            public string? Group { get; set; }
        }
        public sealed class AssignmentModel
        {
            public int Id { get; set; }
            public int TaskId { get; set; }
            public int ResourceId { get; set; }
            public double? Unit { get; set; }
        }
        public static List<ResourceInfoModel> GetResources = new List<ResourceInfoModel>()
        {
            new ResourceInfoModel() { Id= 1, Name= "Martin Tamer", Group="Planning Team"},
            new ResourceInfoModel() { Id= 2, Name= "Rose Fuller", Group="Testing Team" },
            new ResourceInfoModel() { Id= 3, Name= "Margaret Buchanan", Group="Approval Team" },
            new ResourceInfoModel() { Id= 4, Name= "Fuller King", Group="Development Team" },
            new ResourceInfoModel() { Id= 5, Name= "Davolio Fuller", Group="Approval Team" },
            new ResourceInfoModel() { Id= 6, Name= "Fuller Buchanan", Group="Development Team" },
        };
        /// <summary>
        /// Returns a list of predefined tasks for the resource view sample.
        /// </summary>
        public static List<TaskData> GetTaskCollection()
        {
            List<TaskData> Tasks = new List<TaskData>() {
                new TaskData() { Id = 1, Name = "Project initiation", StartDate = new DateTime(2022, 03, 28), EndDate = new DateTime(2022, 07, 28), TaskType ="FixedDuration", Work=128, Duration="4" },
                new TaskData() { Id = 2, Name = "Identify Site location", StartDate = new DateTime(2022, 03, 29), BaselineStartDate = new DateTime(2022, 03, 29), BaselineEndDate= new DateTime(2022, 03, 31),  Progress = 30, ParentId = 1, Duration="5", Work=16 },
                new TaskData() { Id = 3, Name = "Site analyze", StartDate = new DateTime(2022, 03, 29), BaselineStartDate = new DateTime(2022, 03, 29), BaselineEndDate= new DateTime(2022, 03, 31),  Progress = 50, ParentId = 1, Duration="5", Work=16 },
                new TaskData() { Id = 4, Name = "Perform soil test", StartDate = new DateTime(2022, 03, 29), ParentId = 1, Work=96, Duration="6", TaskType="FixedWork", Predecessor="2FS", Progress=40 },
                new TaskData() { Id = 5, Name = "Soil test approval", StartDate = new DateTime(2022, 03, 29), BaselineStartDate= new DateTime(2022, 03, 29), BaselineEndDate= new DateTime(2022, 03, 31), Duration="4", Progress = 30, ParentId = 1, Work=16, TaskType="FixedWork" },
                new TaskData() { Id = 6, Name = "Project estimation", StartDate = new DateTime(2022, 03, 29), EndDate = new DateTime(2022, 04, 2), TaskType="FixedDuration", Duration="7", Progress=40, Work=50 },
            };
            return Tasks;
        }
        /// <summary>
        /// Returns a list of predefined resource assignments.
        /// </summary>
        public static List<AssignmentModel> GetAssignmentCollection()
        {
            List<AssignmentModel> assignments = new List<AssignmentModel>()
            {
                new AssignmentModel(){ Id=1, TaskId = 2 , ResourceId=1, Unit=70},
                new AssignmentModel(){ Id=2, TaskId = 3 , ResourceId=1, Unit=70},
                new AssignmentModel(){ Id=3, TaskId = 4 , ResourceId=3},
                new AssignmentModel(){ Id=4, TaskId = 5 , ResourceId=8},
                new AssignmentModel(){ Id=5, TaskId = 6 , ResourceId=2},
            };
            return assignments;
        }
    }
}
```

### src/components/gantt-resource-view/Gantt.razor

```razor
@page "/gantt-chart/resource-view"
@using Syncfusion.Blazor.Gantt
@using Syncfusion.Blazor.Navigations
@using BlazorDemos.Pages.GanttChart.Data

<div class="control-section e-gantt-resource-view-sample">
    <SfGantt @ref="GanttInstance" DataSource="@TaskCollection" Height="100%" Width="1200px" ShowOverallocation="@ShowOverallocation" TreeColumnIndex="1" AllowRowDragAndDrop="true" RowHeight="37"
			 Toolbar="@ToolbarItems" AllowResizing ViewType="@viewType">
		<GanttTaskFields Id="Id" Name="Name" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress"
						 ParentID="ParentId" Work="Work" Dependency="Predecessor">
		</GanttTaskFields>
		<GanttResource DataSource="ResourceCollection" Id="Id" Name="Name" MaxUnits="MaxUnit" Group="Group" TValue="ResourceViewData.TaskData" TResources="ResourceViewData.ResourceInfoModel"></GanttResource>
		<GanttAssignmentFields DataSource="AssignmentCollection" PrimaryKey="Id" TaskID="TaskId" ResourceID="ResourceId" TValue="ResourceViewData.TaskData" TAssignment="ResourceViewData.AssignmentModel"></GanttAssignmentFields>
		<GanttLabelSettings RightLabel="Resources" TaskLabel="Progress" TValue="ResourceViewData.TaskData"></GanttLabelSettings>
		<GanttEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" AllowTaskbarEditing="true"></GanttEditSettings>
		<GanttColumns>
			<GanttColumn Field="Id" Visible=false></GanttColumn>
			<GanttColumn Field="Name" HeaderText="Name" Width="250"></GanttColumn>
			<GanttColumn Field="Work" HeaderText="Work (Hours)"></GanttColumn>
			<GanttColumn Field="Progress"></GanttColumn>
			<GanttColumn Field="StartDate" HeaderText="Start Date"></GanttColumn>
			<GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
		</GanttColumns>
		<GanttEvents OnToolbarClick="ToolbarClickHandler" TValue="ResourceViewData.TaskData"></GanttEvents>
	</SfGantt>
</div>

@code {
    internal SfGantt<ResourceViewData.TaskData>? GanttInstance { get; set; }
        internal List<ResourceViewData.TaskData> TaskCollection { get; set; } = new List<ResourceViewData.TaskData>();
        internal List<ResourceViewData.ResourceInfoModel> ResourceCollection { get; set; } = new List<ResourceViewData.ResourceInfoModel>();
        internal static List<ResourceViewData.AssignmentModel> AssignmentCollection { get; set; } = new List<ResourceViewData.AssignmentModel>();
        internal List<Object>? ToolbarItems { get; set; }
        public bool ShowOverallocation { get; set; } = true;
        public bool IsCheck { get; set; } = true;
        private ViewType viewType = ViewType.ResourceView;
        /// <summary>
        /// Initializes the sample by loading task, resource, and assignment data, and configuring the toolbar.
        /// </summary>
        protected override async Task OnInitializedAsync()
        {
            TaskCollection = ResourceViewData.GetTaskCollection();
            ResourceCollection = ResourceViewData.GetResources;
            AssignmentCollection = ResourceViewData.GetAssignmentCollection();
            UpdateToolbar();
            await Task.CompletedTask.ConfigureAwait(true);
        }
        /// <summary>
        /// Handles toolbar button click events, toggling overallocation visibility.
        /// </summary>
        public void ToolbarClickHandler(ClickEventArgs args)
        {
            if (args is null)
            {
                return;
            }
            if (args.Item.Id == "ShowHideBar")
            {
                ShowOverallocation = ShowOverallocation ? false : true;
            }
        }
        /// <summary>
        /// Toggles between project view and resource view in the Gantt chart.
        /// </summary>
        public void Resource()
        {
            UpdateToolbar();
            if (viewType == ViewType.ResourceView)
            {
                viewType = ViewType.ProjectView;
            }
            else
            {
                viewType = ViewType.ResourceView;
            }
            StateHasChanged();
        }
        /// <summary>
        /// Updates the toolbar items based on the current view and overallocation settings.
        /// </summary>
        private void UpdateToolbar()
        {
#pragma warning disable BL0005 // Component parameter should not be set outside of its component.
            ToolbarItems = new List<Object>() {
            "Add", "Cancel", "Update", "Delete", "Edit", "CollapseAll", "ExpandAll",
            new ToolbarItem() {
                Text = "Show/Hide Overallocation",
                TooltipText = "Show/Hide Overallocation",
                Id = "ShowHideBar",
                Visible = IsCheck,
                PrefixIcon = "e-icons e-eye"
            }
        };
#pragma warning restore BL0005 // Component parameter should not be set outside of its component.
    }
}
```