Work in Blazor Gantt Chart Component

30 Jul 202121 minutes to read

The work is the total hours required to complete a task. Work can be mapped from the data source field using the property GanttTaskFields.Work. Work can be measured in Hour, Day, Minute. By default, work is measured in Hour and it can be changed, by using the property WorkUnit.

When the work field is mapped from the data source, the default task type will be FixedWork.

@using Syncfusion.Blazor.Gantt
<SfGantt @ref="Gantt" DataSource="@TaskCollection" Height="450px" Width="1000px" WorkUnit="WorkUnit.Hour" ProjectStartDate="@ProjectStart" ProjectEndDate="@ProjectEnd">
    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress"
        ParentID="ParentId" Work="Work" ResourceInfo="Resources"></GanttTaskFields>
    <GanttEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" AllowTaskbarEditing="true" ShowDeleteConfirmDialog="true"></GanttEditSettings>
    <GanttResourceFields Resources="GetResources" Id="ResourceId" Name="ResourceName" Unit="Unit" TResources="ResourceData"></GanttResourceFields>
    <GanttLabelSettings TValue="TaskData" RightLabel="Resources"></GanttLabelSettings>
</SfGantt>

@code{
    public SfGantt<TaskData> Gantt;
    public DateTime ProjectStart = new DateTime(2019, 03, 25);
    public DateTime ProjectEnd = new DateTime(2019, 05, 10);
    public List<TaskData> TaskCollection { get; set; }
    protected override void OnInitialized()
    {
        this.TaskCollection = GetTaskCollection();
    }
    public class ResourceData
    {
        public int ResourceId { get; set; }
        public string ResourceName { get; set; }
        public int Unit { get; set; }

    }
    List<ResourceData> GetResources = new List<ResourceData>() {  
        new ResourceData() { ResourceId= 1, ResourceName= "Martin Tamer" ,Unit=70},
        new ResourceData() { ResourceId= 2, ResourceName= "Rose Fuller" },
        new ResourceData() { ResourceId= 3, ResourceName= "Margaret Buchanan" },
        new ResourceData() { ResourceId= 4, ResourceName= "Fuller King" },
        new ResourceData() { ResourceId= 5, ResourceName= "Davolio Fuller" },
        new ResourceData() { ResourceId= 6, ResourceName= "Van Jack" },
        new ResourceData() { ResourceId= 7, ResourceName= "Fuller Buchanan" },
        new ResourceData() { ResourceId= 8, ResourceName= "Jack Davolio" },
        new ResourceData() { ResourceId= 9, ResourceName= "Tamer Vinet" },
        new ResourceData() { ResourceId= 10, ResourceName= "Vinet Fuller" },
        new ResourceData() { ResourceId= 11, ResourceName= "Bergs Anton" },
        new ResourceData() { ResourceId= 12, ResourceName= "Construction Supervisor" }
    };
    public class TaskData
    {
        public int TaskId { get; set; }
        public string TaskName { get; set; }
        public string TaskType { get; set; }
        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 double? Work { get; set; }
        public List<ResourceData> Resources { get; set; }
    }
    public static List<TaskData> GetTaskCollection()
    {
        List<TaskData> Tasks = new List<TaskData>() {

        new TaskData() {
            TaskId = 1,
            TaskName = "Project initiation",
            StartDate = new DateTime(2019, 03, 29),
            EndDate = new DateTime(2019, 04, 21),
            TaskType ="FixedDuration"
        },
        new TaskData() {
            TaskId = 2,
            TaskName = "Identify Site location",
            StartDate = new DateTime(2019, 03, 29),
            Progress = 30,
            ParentId = 1,
            Work=16,
            Resources = new List<ResourceData>(){ new ResourceData() { ResourceId=1,Unit=70} ,new ResourceData() { ResourceId=6} }
        },
        new TaskData() {
            TaskId = 3,
            TaskName = "Perform soil test",
            StartDate = new DateTime(2019, 03, 29),
            Resources = new List<ResourceData>(){ new ResourceData() { ResourceId=2} ,new ResourceData() { ResourceId=3} ,new ResourceData() { ResourceId=5} },
            ParentId = 1,
            Work=96
        },
        new TaskData() {
            TaskId = 4,
            TaskName = "Soil test approval",
            StartDate = new DateTime(2019, 03, 29),
            Duration = "1",
            Progress = 30,
            ParentId = 1,
            Resources = new List<ResourceData>(){ new ResourceData() { ResourceId=8} ,new ResourceData() { ResourceId=9} },
            Work=16
        },
        new TaskData() {
            TaskId = 5,
            TaskName = "Project estimation",
            StartDate = new DateTime(2019, 03, 29),
            EndDate = new DateTime(2019, 04, 21)
        },
        new TaskData() {
            TaskId = 6,
            TaskName = "Develop floor plan for estimation",
            StartDate = new DateTime(2019, 03, 29),
            Duration = "3",
            Progress = 30,
            ParentId = 5,
            Resources = new List<ResourceData>(){ new ResourceData() { ResourceId=4} },
            Work=30
        },
        new TaskData() {
            TaskId = 7,
            TaskName = "List materials",
            StartDate = new DateTime(2019, 04, 01),
            Duration = "3",
            Progress = 30,
            ParentId = 5,
            Work=48,
            Resources = new List<ResourceData>(){ new ResourceData() { ResourceId=6},new ResourceData() { ResourceId=8} },

        },
        new TaskData() {
            TaskId = 8,
            TaskName = "Estimation approval",
            StartDate = new DateTime(2019, 04, 01),
            Duration = "2",
            ParentId = 5,
            Work=60,
            Resources = new List<ResourceData>(){ new ResourceData() { ResourceId= 12},new ResourceData() { ResourceId= 5} }
        }
    };
        return Tasks;
    }
}

Task type

The work, duration and resource unit fields of a task depends upon each other and will change automatically on editing any one of these fields. But we can also set these field’s values as constant using the TaskType property. FixedUnit is the default TaskType. The following values can be set to the TaskType property.

  • FixedDuration - Duration task field will remain constant while updating resource unit or work field.
  • FixedWork - Work field will remain constant while updating resource unit or duration fields.
  • FixedUnit - Resource units will remain constant while updating duration or work field.
@using Syncfusion.Blazor.Gantt
<SfGantt @ref="Gantt" DataSource="@TaskCollection" Height="450px" Width="900px" HighlightWeekends="true" ProjectStartDate="@ProjectStart" ProjectEndDate="@ProjectEnd">
    <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress" ParentID="ParentId"
        Work="Work" ResourceInfo="Resources" TaskType="TaskType"></GanttTaskFields>
    <GanttEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" AllowTaskbarEditing="true"></GanttEditSettings>
    <GanttResourceFields Resources="@ResourceCollection" Id="ResourceId" Name="ResourceName" Unit="Unit" TResources="ResourceAlloacteData"></GanttResourceFields>
    <GanttLabelSettings TValue="TaskData" RightLabel="Resources"></GanttLabelSettings>
</SfGantt>

@code{
    public DateTime ProjectStart = new DateTime(2019, 03, 25);
    public DateTime ProjectEnd = new DateTime(2019, 05, 10);
    public SfGantt<TaskData> Gantt;
    public List<TaskData> TaskCollection { get; set; }
    public List<ResourceAlloacteData> ResourceCollection { get; set; }
    protected override void OnInitialized()
    {
        this.TaskCollection = GetTaskCollection();
        this.ResourceCollection = GetResources;
    }
    public class ResourceAlloacteData
    {
        public int ResourceId { get; set; }
        public string ResourceName { get; set; }
        public int Unit { get; set; }
    }
    public static List<ResourceAlloacteData> GetResources = new List<ResourceAlloacteData>()
    {
        new ResourceAlloacteData() { ResourceId= 1, ResourceName= "Martin Tamer"},
        new ResourceAlloacteData() { ResourceId= 2, ResourceName= "Rose Fuller" },
        new ResourceAlloacteData() { ResourceId= 3, ResourceName= "Margaret Buchanan" },
        new ResourceAlloacteData() { ResourceId= 4, ResourceName= "Fuller King" },
        new ResourceAlloacteData() { ResourceId= 5, ResourceName= "Davolio Fuller" },
        new ResourceAlloacteData() { ResourceId= 7, ResourceName= "Fuller Buchanan" },
        new ResourceAlloacteData() { ResourceId= 8, ResourceName= "Jack Davolio" },
        new ResourceAlloacteData() { ResourceId= 9, ResourceName= "Tamer Vinet" },
        new ResourceAlloacteData() { ResourceId= 10, ResourceName= "Vinet Fuller" },
        new ResourceAlloacteData() { ResourceId= 11, ResourceName= "Bergs Anton" },
        new ResourceAlloacteData() { ResourceId= 12, ResourceName= "Construction Supervisor" }
    };

    public class TaskData
    {
        public int TaskId { get; set; }
        public string TaskName { get; set; }
        public string TaskType { get; set; }
        public DateTime StartDate { get; set; }
        public DateTime EndDate { get; set; }
        public string Duration { get; set; }
        public double Progress { get; set; }
        public int? ParentId { get; set; }
        public string Notes { get; set; }
        public double? Work { get; set; }
        public List<ResourceAlloacteData> Resources { get; set; }
    }

    public static List<TaskData> GetTaskCollection()
    {
        List<TaskData> Tasks = new List<TaskData>() {
            new TaskData() {
                TaskId = 1,
                TaskName = "Project initiation",
                StartDate = new DateTime(2019, 03, 28),
                EndDate = new DateTime(2019, 07, 28),
                TaskType ="FixedDuration",
                Work=128,
                Duration="4"
            },
            new TaskData() {
                TaskId = 2,
                TaskName = "Identify Site location",
                StartDate = new DateTime(2019, 03, 29),
                Progress = 30,
                ParentId = 1,
                Duration="2",
                Work=16,
                TaskType="Fixed work",
                Resources = new List<ResourceAlloacteData>(){ new ResourceAlloacteData() { ResourceId=1, Unit=70} ,new ResourceAlloacteData() { ResourceId=6} }
            },
            new TaskData() {
                TaskId = 3,
                TaskName = "Perform soil test",
                StartDate = new DateTime(2019, 03, 29),
                Resources = new List<ResourceAlloacteData>(){ new ResourceAlloacteData() { ResourceId=2} ,new ResourceAlloacteData() { ResourceId=3} },
                ParentId = 1,
                Work=96,
                Duration="4",
                TaskType="Fixed work"
            },
            new TaskData() {
                TaskId = 4,
                TaskName = "Soil test approval",
                StartDate = new DateTime(2019, 03, 29),
                Duration = "1",
                Progress = 30,
                ParentId = 1,
                Resources = new List<ResourceAlloacteData>(){ new ResourceAlloacteData() { ResourceId=8} ,new ResourceAlloacteData() { ResourceId=9} },
                Work=16,
                TaskType="Fixed work"
            },
            new TaskData() {
                TaskId = 5,
                TaskName = "Project estimation",
                StartDate = new DateTime(2019, 04, 02),
                EndDate = new DateTime(2019, 04, 06),
                TaskType="Fixed Duration",
                Duration="4"
            },
            new TaskData() {
                TaskId = 6,
                TaskName = "Develop floor plan for estimation",
                StartDate = new DateTime(2019, 04, 02),
                Duration = "3",
                Progress = 30,
                ParentId = 5,
                Resources = new List<ResourceAlloacteData>(){ new ResourceAlloacteData() { ResourceId=4} },
                Work=30,
                TaskType="Fixed work"
            },
            new TaskData() {
                TaskId = 7,
                TaskName = "List materials",
                StartDate = new DateTime(2019, 04, 03),
                Duration = "3",
                Progress = 30,
                ParentId = 5,
                TaskType="Fixedwork",
                Work=48,
                Resources = new List<ResourceAlloacteData>(){ new ResourceAlloacteData() { ResourceId=4},new ResourceAlloacteData() { ResourceId=8} },
            },
            new TaskData() {
                TaskId = 8,
                TaskName = "Estimation approval",
                StartDate = new DateTime(2019, 04, 03),
                Duration = "2",
                ParentId = 5,
                Work=60,
                TaskType="Fixedwork",
                Resources = new List<ResourceAlloacteData>(){ new ResourceAlloacteData() { ResourceId= 12},new ResourceAlloacteData() { ResourceId= 5} },
            }
        };
        return Tasks;
    }
}

Following table explains how the work, duration and resource unit fields will gets updated on changing any of the fields

Task Type Changes in Duration Changes in work Changes in Resource Units
Fixed Duration Will updates work value Will updates Resource unit Will updates work value
Fixed Work Will updates Resource unit. Note: For manually scheduled task work will update. Will updates Duration value. Note: For manually scheduled task resource unit updates. Will updates Duration value. Note: For manually scheduled task work field updates.
Fixed Unit Will updates work value Will updates Duration value. Note: For manually scheduled task resource unit updates. Will updates Duration value. Note: For manually scheduled task work field updates.

Fixed Unit is the default TaskType in Gantt. The above calculations are not applicable for Milestones.

You can refer to our Blazor Gantt Chart feature tour page for its groundbreaking feature representations. You can also explore our Blazor Gantt Chart example to knows how to render and configure the gantt.