diff --git a/blazor/gantt-chart/frozen-columns.md b/blazor/gantt-chart/frozen-columns.md index 1395560708..30eeba4bbe 100644 --- a/blazor/gantt-chart/frozen-columns.md +++ b/blazor/gantt-chart/frozen-columns.md @@ -13,10 +13,13 @@ The frozen columns feature in the Syncfusion® - + @@ -30,31 +33,35 @@ To enable frozen columns, use the [FrozenColumns](https://help.syncfusion.com/cr public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2023, 02, 05), EndDate = new DateTime(2022, 02, 21) }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 02, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2023, 02, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 02, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2023, 02, 06), EndDate = new DateTime(2023, 02, 21) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2023, 02, 06), EndDate = new DateTime(2022, 02, 09) }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2023, 02, 06), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2023, 02, 06), EndDate = new DateTime(2023, 02, 08) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDByMDNKfZcGKCks?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Freeze particular column @@ -62,13 +69,15 @@ To freeze a specific column in the Gantt Chart, you can use the [IsFrozen](https In the following code snippet, the columns with the field names `TaskID` and `TaskName` are frozen by setting the IsFrozen property of the corresponding GanttColumn to true: -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + - + @@ -87,32 +96,35 @@ In the following code snippet, the columns with the field names `TaskID` and `Ta public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2023, 02, 05), EndDate = new DateTime(2022, 02, 21) }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 02, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2023, 02, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 02, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2023, 02, 06), EndDate = new DateTime(2023, 02, 21) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2023, 02, 06), EndDate = new DateTime(2022, 02, 09) }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2023, 02, 06), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2023, 02, 06), EndDate = new DateTime(2023, 02, 08) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Blazor Gantt Chart with Frozen Column](./images/blazor-Gantt-chart-frozen-columns.gif) + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZryittgJXbfxAFs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Freeze direction @@ -120,17 +132,19 @@ The [Freeze](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.Gantt The [FreezeDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html) property has two values: [FreezeDirection.Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html#Syncfusion_Blazor_Grids_FreezeDirection_Left) allows you to freeze columns on the left side, while [FreezeDirection.Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.FreezeDirection.html#Syncfusion_Blazor_Grids_FreezeDirection_Right) allows you to freeze columns on the right side. -To use `FreezeDirection` in the Blazor Gantt chart, you need to set `IsFrozen` property of GanttColumn in addition to the `Freeze` property. In the below code sample , the `TaskId` column is frozen on the left side of the grid, while the `TaskName` column is frozen on the right side. +To use `FreezeDirection` in the Blazor Gantt chart, you need to set `IsFrozen` property of GanttColumn in addition to the `Freeze` property. In the below code sample , the `TaskID` column is frozen on the left side of the grid, while the `TaskName` column is frozen on the right side. The following is the sample code for using `FreezeDirection` in the Blazor Gantt chart: -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + - + @@ -149,32 +163,35 @@ The following is the sample code for using `FreezeDirection` in the Blazor Gantt public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2023, 02, 05), EndDate = new DateTime(2022, 02, 21) }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 02, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2023, 02, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 02, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2023, 02, 06), EndDate = new DateTime(2023, 02, 21) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2023, 02, 06), EndDate = new DateTime(2022, 02, 09) }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2023, 02, 06), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2023, 02, 06), EndDate = new DateTime(2023, 02, 08) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Freeze direction in Blazor Gantt chart](./images/blazor-Gantt-chart-freeze-direction.gif) + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBICttKJXuJjOKE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Add or remove frozen columns by dragging the column separator @@ -182,13 +199,15 @@ The Gantt Chart allows users to add or remove frozen columns by dragging and dro To enable this feature, you need to set the [AllowFreezeLineMoving](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowFreezeLineMoving) property to true. If no columns are specified as frozen, the frozen column separator will be displayed at the left and right ends of the grid in Gantt Chart. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + - + @@ -207,42 +226,46 @@ To enable this feature, you need to set the [AllowFreezeLineMoving](https://help public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2023, 02, 05), EndDate = new DateTime(2022, 02, 21) }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 02, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2023, 02, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 02, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2023, 02, 06), EndDate = new DateTime(2023, 02, 21) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2023, 02, 06), EndDate = new DateTime(2022, 02, 09) }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2023, 02, 06), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2023, 02, 06), EndDate = new DateTime(2023, 02, 08) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Moving Freeze line in Blazor Gantt chart ](./images/blazor-Gantt-chart-freeze-line-moving.gif) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLeMZZKfMsDAtUw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Change default frozen line color The following code example shows how to change the color of the default frozen line in the Gantt Chart by customizing the CSS styles. The following demo provides an example of how to change the default frozen line color to blue. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @@ -264,32 +287,35 @@ The following code example shows how to change the color of the default frozen l public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2023, 02, 05), EndDate = new DateTime(2022, 02, 21) }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 02, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2023, 02, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 02, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2023, 02, 06), EndDate = new DateTime(2023, 02, 21) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2023, 02, 06), EndDate = new DateTime(2022, 02, 09) }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2023, 02, 06), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2023, 02, 06), EndDate = new DateTime(2023, 02, 08) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2023, 02, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2023, 02, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Changing freeze line color inBlazor Gantt Chart](./images/blazor-Gantt-chart-freezeline-color.png) + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrIMXtqJMKqKddi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Limitations diff --git a/blazor/gantt-chart/images/blazor-Gantt-chart-freeze-direction.gif b/blazor/gantt-chart/images/blazor-Gantt-chart-freeze-direction.gif deleted file mode 100644 index db854c13f5..0000000000 Binary files a/blazor/gantt-chart/images/blazor-Gantt-chart-freeze-direction.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-Gantt-chart-freeze-line-moving.gif b/blazor/gantt-chart/images/blazor-Gantt-chart-freeze-line-moving.gif deleted file mode 100644 index 793ed20a03..0000000000 Binary files a/blazor/gantt-chart/images/blazor-Gantt-chart-freeze-line-moving.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-Gantt-chart-freezeline-color.png b/blazor/gantt-chart/images/blazor-Gantt-chart-freezeline-color.png deleted file mode 100644 index 78a57ade93..0000000000 Binary files a/blazor/gantt-chart/images/blazor-Gantt-chart-freezeline-color.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-Gantt-chart-frozen-columns.gif b/blazor/gantt-chart/images/blazor-Gantt-chart-frozen-columns.gif deleted file mode 100644 index 1cebff4e7c..0000000000 Binary files a/blazor/gantt-chart/images/blazor-Gantt-chart-frozen-columns.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-auto-link-validation.png b/blazor/gantt-chart/images/blazor-gantt-chart-auto-link-validation.png deleted file mode 100644 index 468791febe..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-auto-link-validation.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-pdf-export.gif b/blazor/gantt-chart/images/blazor-gantt-chart-pdf-export.gif deleted file mode 100644 index 159617926c..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-pdf-export.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-offset-validation.gif b/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-offset-validation.gif deleted file mode 100644 index 74c067c89a..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-offset-validation.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-validation-disabled.PNG b/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-validation-disabled.PNG deleted file mode 100644 index 46d04a231b..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-predecessor-validation-disabled.PNG and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-resource-cell-edit.png b/blazor/gantt-chart/images/blazor-gantt-chart-resource-cell-edit.png deleted file mode 100644 index 419a108de3..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-resource-cell-edit.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-resource-dialogbox.gif b/blazor/gantt-chart/images/blazor-gantt-chart-resource-dialogbox.gif deleted file mode 100644 index 995a14b146..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-resource-dialogbox.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-resource-event.gif b/blazor/gantt-chart/images/blazor-gantt-chart-resource-event.gif deleted file mode 100644 index 9a94f3f648..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-resource-event.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-resource-method.gif b/blazor/gantt-chart/images/blazor-gantt-chart-resource-method.gif deleted file mode 100644 index 2596758077..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-resource-method.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-resource-multi-taskbar.gif b/blazor/gantt-chart/images/blazor-gantt-chart-resource-multi-taskbar.gif deleted file mode 100644 index 1818dcc9a3..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-resource-multi-taskbar.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-resource-multi-taskbar.png b/blazor/gantt-chart/images/blazor-gantt-chart-resource-multi-taskbar.png deleted file mode 100644 index e7d1e47a5c..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-resource-multi-taskbar.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-resource-taskbar-custom.png b/blazor/gantt-chart/images/blazor-gantt-chart-resource-taskbar-custom.png deleted file mode 100644 index 188654b948..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-resource-taskbar-custom.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-resource-view-dialogbox.gif b/blazor/gantt-chart/images/blazor-gantt-chart-resource-view-dialogbox.gif deleted file mode 100644 index 6e67952808..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-resource-view-dialogbox.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-resource-view-method.gif b/blazor/gantt-chart/images/blazor-gantt-chart-resource-view-method.gif deleted file mode 100644 index 64164bdf73..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-resource-view-method.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-resource-view-overallocation.png b/blazor/gantt-chart/images/blazor-gantt-chart-resource-view-overallocation.png deleted file mode 100644 index 36e51b5ebd..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-resource-view-overallocation.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-resource-view-unassign-task.png b/blazor/gantt-chart/images/blazor-gantt-chart-resource-view-unassign-task.png deleted file mode 100644 index 3adaf599bc..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-resource-view-unassign-task.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-resource-view.png b/blazor/gantt-chart/images/blazor-gantt-chart-resource-view.png deleted file mode 100644 index d2990c9335..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-resource-view.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-resource.png b/blazor/gantt-chart/images/blazor-gantt-chart-resource.png deleted file mode 100644 index bafeb3ef86..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-resource.png and /dev/null differ diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-respect-link.gif b/blazor/gantt-chart/images/blazor-gantt-chart-respect-link.gif deleted file mode 100644 index 0c592e37ba..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-respect-link.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/editing-tooltip-template.gif b/blazor/gantt-chart/images/editing-tooltip-template.gif deleted file mode 100644 index 99798509da..0000000000 Binary files a/blazor/gantt-chart/images/editing-tooltip-template.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/editing_tooltip.gif b/blazor/gantt-chart/images/editing_tooltip.gif deleted file mode 100644 index 6c695f5ccf..0000000000 Binary files a/blazor/gantt-chart/images/editing_tooltip.gif and /dev/null differ diff --git a/blazor/gantt-chart/images/pdf-custom-column-property.png b/blazor/gantt-chart/images/pdf-custom-column-property.png deleted file mode 100644 index 4d906313dc..0000000000 Binary files a/blazor/gantt-chart/images/pdf-custom-column-property.png and /dev/null differ diff --git a/blazor/gantt-chart/images/pdf-custom-column-width.png b/blazor/gantt-chart/images/pdf-custom-column-width.png deleted file mode 100644 index e0943ad7d4..0000000000 Binary files a/blazor/gantt-chart/images/pdf-custom-column-width.png and /dev/null differ diff --git a/blazor/gantt-chart/images/pdf-custom-taskbar-event.png b/blazor/gantt-chart/images/pdf-custom-taskbar-event.png deleted file mode 100644 index 9d8e411f57..0000000000 Binary files a/blazor/gantt-chart/images/pdf-custom-taskbar-event.png and /dev/null differ diff --git a/blazor/gantt-chart/images/pdf-custom-taskbar-property.png b/blazor/gantt-chart/images/pdf-custom-taskbar-property.png deleted file mode 100644 index 38762b3899..0000000000 Binary files a/blazor/gantt-chart/images/pdf-custom-taskbar-property.png and /dev/null differ diff --git a/blazor/gantt-chart/images/pdf-export-hidden-column.png b/blazor/gantt-chart/images/pdf-export-hidden-column.png deleted file mode 100644 index d8199a331f..0000000000 Binary files a/blazor/gantt-chart/images/pdf-export-hidden-column.png and /dev/null differ diff --git a/blazor/gantt-chart/managing-tasks.md b/blazor/gantt-chart/managing-tasks.md index f2925215f0..c82cdf05e0 100644 --- a/blazor/gantt-chart/managing-tasks.md +++ b/blazor/gantt-chart/managing-tasks.md @@ -11,8 +11,6 @@ documentation: ug The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component has options to dynamically insert, delete, and update tasks in a project. The primary key column is necessary to manage the tasks and perform CRUD operations in Gantt Chart. To define the primary key, set the `GanttColumn.IsPrimaryKey` property to `true` in the column. - - ## Cell edit type and its params The `GanttColumn.EditType` is used to customize the edit type of the particular column. You can set the `GanttColumn.EditType` based on data type of the column. @@ -42,13 +40,15 @@ Component |Example [DateTimePicker](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started) | @(new { @params = new { strictMode = true} }) [Checkbox](https://blazor.syncfusion.com/documentation/check-box/getting-started) | @(new { @params = new { checked = true} }) -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + - + @@ -75,32 +75,36 @@ Component |Example } public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21) }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08) }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }, }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVIsNjUCkvqfHQC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> If edit type is not defined in the column, then it will be considered as the **StringEdit** type (Textbox component). @@ -110,14 +114,16 @@ The cell edit template is used to add a custom component for a particular column The following code example describes, how to define the Edit template for a particular column. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.DropDowns; - + - + @{ @@ -155,32 +161,36 @@ The following code example describes, how to define the Edit template for a part public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21) }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08) }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZreMXtqsakSUdPq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Disable editing for particular column @@ -188,13 +198,15 @@ You can disable editing for particular columns by using the [GanttColumn.AllowEd In the following demo, editing is disabled for the `TaskName` column. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + - + @@ -212,32 +224,36 @@ In the following demo, editing is disabled for the `TaskName` column. } public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 }, + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }, }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrSCjZAVjNkneFp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Troubleshoot: Editing works only when primary key column is defined @@ -271,12 +287,14 @@ Once the second taskbar is tapped, the dialog will display a message `Select the It is possible to enable or disable the tooltip while performing editing actions on the taskbar like left resizing, right resizing, dragging, and progress resizing by using the [GanttTooltipSettings.ShowTooltipOnEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTooltipSettings-1.html#Syncfusion_Blazor_Gantt_GanttTooltipSettings_1_ShowTooltipOnEditing) property. By default, this property is set to 'true.' -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @@ -290,7 +308,7 @@ It is possible to enable or disable the tooltip while performing editing actions } public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime EndDate { get; set; } @@ -298,35 +316,39 @@ It is possible to enable or disable the tooltip while performing editing actions public int Progress { get; set; } public string Predecessor { get; set; } public string Notes { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() {TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 02), EndDate = new DateTime(2019, 04, 21)}, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 02), Duration = "3", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 02), Duration = "4", Progress = 40, Predecessor = "2FS", ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 02), Duration = "0", Progress = 30, Predecessor = "3FF", ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 02), EndDate = new DateTime(2019, 04, 21)}, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 40, Predecessor = "6SS", ParentId = 5 } + new TaskData() {TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 02), EndDate = new DateTime(2019, 04, 10)}, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 02), Duration = "3", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 02), Duration = "4", Progress = 40, Predecessor = "2FS", ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 02), Duration = "0", Progress = 30, Predecessor = "3FF", ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 04), EndDate = new DateTime(2019, 04, 08)}, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 40, Predecessor = "6SS", ParentID = 5 } }; return Tasks; } } -``` -![Blazor Gantt Chart displays Editing Tooltip](images/editing_tooltip.gif) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrostZKVCusdMuB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Template The taskbar editing tooltip can be customized using the [GanttTooltipSettings.EditingTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTooltipSettings-1.html#Syncfusion_Blazor_Gantt_GanttTooltipSettings_1_EditingTemplate) property. The following code example shows how to customize the taskbar editing tooltip in a Gantt Chart: -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @@ -373,32 +395,31 @@ The taskbar editing tooltip can be customized using the [GanttTooltipSettings.Ed } public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() {TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 02), EndDate = new DateTime(2019, 04, 21)}, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 02), Duration = "3", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 02), Duration = "4", Progress = 40, ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 02), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 02), EndDate = new DateTime(2019, 04, 21)}, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 40, ParentId = 5 } + new TaskData() {TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2019, 04, 02), EndDate = new DateTime(2019, 04, 05)}, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2019, 04, 02), Duration = "3", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2019, 04, 02), Duration = "4", Progress = 40, ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2019, 04, 02), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2019, 04, 04), EndDate = new DateTime(2019, 04, 08)}, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2019, 04, 04), Duration = "3", Progress = 40, ParentID = 5 } }; return Tasks; } } -``` - -![Blazor Gantt Chart displays editing tooltip template](images/editing-tooltip-template.gif) - +{% endhighlight %} +{% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthoiDjqLVZxPYek?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/gantt-chart/pdf-export.md b/blazor/gantt-chart/pdf-export.md index de5224fa48..60a7f84a51 100644 --- a/blazor/gantt-chart/pdf-export.md +++ b/blazor/gantt-chart/pdf-export.md @@ -11,14 +11,15 @@ documentation: ug The PDF export feature enables exporting Gantt chart data to a PDF document. To perform the export, use the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToPdfAsync) method. Ensure that PDF export is enabled in the Gantt chart component by setting the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowPdfExport) property to true. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Navigations - + @@ -26,7 +27,7 @@ The PDF export feature enables exporting Gantt chart data to a PDF document. To @code { private List TaskCollection { get; set; } private SfGantt Gantt; - private List toolbarItem = new List() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; + private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -41,13 +42,13 @@ The PDF export feature enables exporting Gantt chart data to a PDF document. To public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } public string Predecessor { get; set; } } @@ -55,20 +56,23 @@ The PDF export feature enables exporting Gantt chart data to a PDF document. To { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Blazor Gantt chart displays PDF export](images/blazor-gantt-chart-pdf-export.gif) + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLIsjZgrAtEMygE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Customize the PDF export @@ -79,13 +83,15 @@ The PDF export functionality in the Syncfusion® - + @@ -93,7 +99,7 @@ In this example, the exported PDF will be saved as `ProjectSchedule.pdf`. @code { private List TaskCollection { get; set; } private SfGantt Gantt; - private List toolbarItem = new List() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; + private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -110,13 +116,13 @@ In this example, the exported PDF will be saved as `ProjectSchedule.pdf`. public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } public string Predecessor { get; set; } } @@ -124,19 +130,23 @@ In this example, the exported PDF will be saved as `ProjectSchedule.pdf`. { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBSCZNAhALZXWKG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### How to add a text in header/footer @@ -144,14 +154,16 @@ The PDF export functionality of the Gantt Chart allows you to add and style cust The following sample code demonstrates how to add custom text and apply styling to the header and footer sections of the exported PDF document, -``` cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Navigations - + @@ -159,7 +171,7 @@ The following sample code demonstrates how to add custom text and apply styling @code { private List TaskCollection { get; set; } private SfGantt Gantt; - private List toolbarItem = new List() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; + private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; public List HeaderContent = new List { new PdfHeaderFooterContent() { Type = ContentType.Text, Value = "Gantt Chart PDF Export Header", Position = new PdfPosition() { X = 0, Y = 50 }, Style = new PdfContentStyle() { TextBrushColor = "#000000", FontSize = 13 } } @@ -197,13 +209,13 @@ The following sample code demonstrates how to add custom text and apply styling public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } public string Predecessor { get; set; } } @@ -211,21 +223,26 @@ The following sample code demonstrates how to add custom text and apply styling { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhyiDXArUzpgPqb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### How to draw a line in header/footer + You can add lines to the Header or Footer area of the exported PDF document using the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_Header) and [Footer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_Footer) properties in the [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html) class. Supported line styles are, @@ -238,14 +255,16 @@ Supported line styles are, The following sample code demonstrates adding line in the Header and Footer section of the exported document, -``` cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Navigations - + @@ -253,7 +272,7 @@ The following sample code demonstrates adding line in the Header and Footer sect @code { private List TaskCollection { get; set; } private SfGantt Gantt; - private List toolbarItem = new List() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; + private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; public List HeaderContent = new List { new PdfHeaderFooterContent() { Type = ContentType.Line, Points = new PdfPoints() { X1 = 0, Y1 = 4, X2 = 685, Y2 = 4 }, Style = new PdfContentStyle() { PenColor = "#000080", DashStyle = PdfDashStyle.Solid } } @@ -291,13 +310,13 @@ The following sample code demonstrates adding line in the Header and Footer sect public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } public string Predecessor { get; set; } } @@ -305,19 +324,23 @@ The following sample code demonstrates adding line in the Header and Footer sect { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBIWtXKVKPSwLAW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### How to change the page orientation @@ -325,13 +348,15 @@ The PDF export functionality allows you to customize the page orientation of the The following code snippet demonstrates how to set the page orientation to Landscape for the exported PDF document, -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Navigations - + @@ -339,7 +364,7 @@ The following code snippet demonstrates how to set the page orientation to Lands @code { private List TaskCollection { get; set; } private SfGantt Gantt; - private List toolbarItem = new List() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; + private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -356,13 +381,13 @@ The following code snippet demonstrates how to set the page orientation to Lands public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } public string Predecessor { get; set; } } @@ -370,19 +395,23 @@ The following code snippet demonstrates how to set the page orientation to Lands { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVyMjNgBzDbCnDU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### How to change the page size @@ -419,13 +448,15 @@ Supported page sizes are: The following code demonstrates how to change the page size to A4 for the exported PDF document, -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Navigations - + @@ -433,7 +464,7 @@ The following code demonstrates how to change the page size to A4 for the export @code { private List TaskCollection { get; set; } private SfGantt Gantt; - private List toolbarItem = new List() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; + private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -450,13 +481,13 @@ The following code demonstrates how to change the page size to A4 for the export public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } public string Predecessor { get; set; } } @@ -464,19 +495,23 @@ The following code demonstrates how to change the page size to A4 for the export { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhyiZZKhzLBWLhu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Export current view records @@ -485,13 +520,16 @@ The PDF export functionality allows you to export only the records that are curr N> Exporting current view records is only applicable when the virtualization feature is enabled, and it does not retain the state of collapsed rows during export. The following code demonstrates how to use the `PdfExporting` event to export current view data of the Gantt chart to a PDF document, -```cshtml + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Navigations - + @@ -503,14 +541,14 @@ The following code demonstrates how to use the `PdfExporting` event to export cu - + @code { private SfGantt Gantt { get; set; } - private List toolbarItem = new List() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; + private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; private List TaskCollection { get; set; } protected override void OnInitialized() { @@ -568,7 +606,7 @@ The following code demonstrates how to use the `PdfExporting` event to export cu Assignee = assignee[j - 1], Reporter = reporter[j - 1], Progress = 50, - ParentId = Parent.ID, + ParentID = Parent.ID, }); } } @@ -585,24 +623,31 @@ The following code demonstrates how to use the `PdfExporting` event to export cu public string Assignee { get; set; } public string Reporter { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } public string Predecessor { get; set; } } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhyWjtqBfpHsisd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ### How to export Gantt chart with custom timeline range The PDF export functionality allows you to export with custom timeline range of the Gantt chart to the PDF document. To specify the range, set the [RangeStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.PdfExportEventArgs.html#Syncfusion_Blazor_Gantt_PdfExportEventArgs_RangeStart) and [RangeEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.PdfExportEventArgs.html#Syncfusion_Blazor_Gantt_PdfExportEventArgs_RangeEnd) arguments within the [PdfExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfExporting) event. The `RangeStart` argument defines the start date, and the `RangeEnd` argument defines the end date of the timeline range. The following code demonstrates how to use the `RangeStart` and `RangeEnd` arguments of the PdfExporting event to export a custom timeline range of the Gantt chart to a PDF document, -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Navigations - + @@ -614,14 +659,14 @@ The following code demonstrates how to use the `RangeStart` and `RangeEnd` argum - + @code { private SfGantt Gantt { get; set; } - private List toolbarItem = new List() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; + private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; private List TaskCollection { get; set; } protected override void OnInitialized() { @@ -678,7 +723,7 @@ The following code demonstrates how to use the `RangeStart` and `RangeEnd` argum Assignee = assignee[j - 1], Reporter = reporter[j - 1], Progress = 50, - ParentId = Parent.ID, + ParentID = Parent.ID, }); } } @@ -695,11 +740,15 @@ The following code demonstrates how to use the `RangeStart` and `RangeEnd` argum public string Assignee { get; set; } public string Reporter { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } public string Predecessor { get; set; } } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtByWjjUrpHrtFIB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Export hidden columns @@ -707,16 +756,18 @@ The PDF export functionality allows you to include hidden columns from the Gantt The following code demonstrates how to export hidden columns in the Gantt chart to a PDF document, -``` cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Navigations - + - + @@ -729,7 +780,7 @@ The following code demonstrates how to export hidden columns in the Gantt chart @code { private List TaskCollection { get; set; } private SfGantt Gantt; - private List toolbarItem = new List() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; + private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -746,13 +797,13 @@ The following code demonstrates how to export hidden columns in the Gantt chart public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } public string Predecessor { get; set; } } @@ -760,20 +811,23 @@ The following code demonstrates how to export hidden columns in the Gantt chart { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Blazor Gantt chart PDF Export Hidden Column](images/pdf-export-hidden-column.png) + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtreCNXgVTcKHkcY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Customize column width in exported PDF document @@ -781,18 +835,20 @@ The PDF export functionality allows you to customize the width of columns in the The following code snippet demonstrates how to customize column widths in the exported PDF document using the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html#Syncfusion_Blazor_Gantt_GanttPdfExportProperties_Columns) property of the [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html) class, -``` cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Navigations @using Syncfusion.PdfExport - + - + @@ -805,7 +861,7 @@ The following code snippet demonstrates how to customize column widths in the ex @code { private List TaskCollection { get; set; } private SfGantt Gantt; - private List toolbarItem = new List() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; + private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -817,7 +873,7 @@ The following code snippet demonstrates how to customize column widths in the ex GanttPdfExportProperties exportProperties = new GanttPdfExportProperties(); exportProperties.Columns = new List() { - new GanttColumn(){ Field = "TaskId", HeaderText = "Task Id", Width = "200" }, + new GanttColumn(){ Field = "TaskID", HeaderText = "Task Id", Width = "200" }, new GanttColumn(){ Field = "TaskName", HeaderText = "Task Name", Width = "250"}, new GanttColumn(){ Field = "StartDate", HeaderText = "Start Date", Width = "150"}, }; @@ -827,13 +883,13 @@ The following code snippet demonstrates how to customize column widths in the ex public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } public string Predecessor { get; set; } } @@ -841,20 +897,23 @@ The following code snippet demonstrates how to customize column widths in the ex { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Blazor Gantt Chart PDF Custom Column Width](images/pdf-custom-column-width.png) + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBostXgrIjeKZvL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## How to export Gantt chart with specific columns @@ -864,18 +923,20 @@ The PDF export functionality enables you to export only specific columns from th The following code snippet demonstrates how to configure the `Columns` property to export specific columns from the Gantt chart to a PDF document: -``` cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Navigations @using Syncfusion.PdfExport - + - + @@ -888,7 +949,7 @@ The following code snippet demonstrates how to configure the `Columns` property @code { private List TaskCollection { get; set; } private SfGantt Gantt; - private List toolbarItem = new List() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; + private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -900,7 +961,7 @@ The following code snippet demonstrates how to configure the `Columns` property GanttPdfExportProperties exportProperties = new GanttPdfExportProperties(); exportProperties.Columns = new List() { - new GanttColumn(){ Field = "TaskId", HeaderText = "Task Id", Width = "100" }, + new GanttColumn(){ Field = "TaskID", HeaderText = "Task Id", Width = "100" }, new GanttColumn(){ Field = "TaskName", HeaderText = "Task Name", Width = "200"}, new GanttColumn(){ Field = "StartDate", HeaderText = "Start Date", Width = "150"}, }; @@ -910,13 +971,13 @@ The following code snippet demonstrates how to configure the `Columns` property public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } public string Predecessor { get; set; } } @@ -924,22 +985,23 @@ The following code snippet demonstrates how to configure the `Columns` property { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Blazor Gantt chart PDF Custom Column Through Property](images/pdf-custom-column-property.png) +{% endhighlight %} +{% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhIiXZAVoCQueAU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Through event @@ -947,18 +1009,20 @@ The PDF export functionality allows you to export only specific columns from the The following code demonstrates how to use the `PdfExporting` event to export specific columns of the Gantt chart to a PDF document, -``` cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Navigations @using Syncfusion.PdfExport - + - + @@ -971,7 +1035,7 @@ The following code demonstrates how to use the `PdfExporting` event to export sp @code { private List TaskCollection { get; set; } private SfGantt Gantt; - private List toolbarItem = new List() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; + private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -987,7 +1051,7 @@ The following code demonstrates how to use the `PdfExporting` event to export sp { args.Columns = new List() { - new GanttColumn(){ Field = "TaskId", HeaderText = "Task Id", Width = "100" }, + new GanttColumn(){ Field = "TaskID", HeaderText = "Task Id", Width = "100" }, new GanttColumn(){ Field = "TaskName", HeaderText = "Task Name", Width = "200"}, new GanttColumn(){ Field = "StartDate", HeaderText = "Start Date", Width = "150"}, }; @@ -995,13 +1059,13 @@ The following code demonstrates how to use the `PdfExporting` event to export sp public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } public string Predecessor { get; set; } } @@ -1009,22 +1073,23 @@ The following code demonstrates how to use the `PdfExporting` event to export sp { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Blazor Gantt chart PDF Custom Column Through Event](images/pdf-custom-column-property.png) +{% endhighlight %} +{% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVoCjXAVSBmCcUQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Customizing taskbar appearance @@ -1041,7 +1106,9 @@ The PDF export functionality allows you to customize the appearance of taskbars By configuring the TaskbarColor property, you can format these taskbars to match your desired color scheme. The following code snippet demonstrates how to use the `TaskbarColor` property to customize the colors of different taskbars in the exported PDF document, -``` cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Navigations @@ -1049,11 +1116,11 @@ By configuring the TaskbarColor property, you can format these taskbars to match - + - + @@ -1065,7 +1132,7 @@ By configuring the TaskbarColor property, you can format these taskbars to match @code { private List TaskCollection { get; set; } private SfGantt Gantt; - private List toolbarItem = new List() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; + private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -1091,7 +1158,7 @@ By configuring the TaskbarColor property, you can format these taskbars to match public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime? BaselineStartDate { get; set; } public DateTime? BaselineEndDate { get; set; } @@ -1099,27 +1166,30 @@ By configuring the TaskbarColor property, you can format these taskbars to match public DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 04), StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 06) }, - new TaskData() { TaskId = 2, TaskName = "Identify site location", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 02), Duration = "0", BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 02), Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2021, 04, 02), Duration = "5", Progress = 40, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 06), ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2021, 04, 08), Duration = "0", EndDate = new DateTime(2021, 04, 08), BaselineStartDate = new DateTime(2021, 04, 08), BaselineEndDate = new DateTime(2021, 04, 08), Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project initiation", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08) }, - new TaskData() { TaskId = 6, TaskName = "Identify site location", StartDate = new DateTime(2021, 04, 02), Duration = "2", Progress = 30, ParentId = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 02) }, - new TaskData() { TaskId = 7, TaskName = "Perform soil test", StartDate = new DateTime(2021, 04, 02), Duration = "4", Progress = 40, ParentId = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 03) }, - new TaskData() { TaskId = 8, TaskName = "Soil test approval", StartDate = new DateTime(2021, 04, 02), Duration = "5", Progress = 30, ParentId = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 04) } + new TaskData() { TaskID = 1, TaskName = "Project initiation", BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 04), StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08) }, + new TaskData() { TaskID = 2, TaskName = "Identify site location", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 02), Duration = "0", BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 02), Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2021, 04, 02), Duration = "5", Progress = 40, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 06), ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2021, 04, 08), Duration = "0", EndDate = new DateTime(2021, 04, 08), BaselineStartDate = new DateTime(2021, 04, 08), BaselineEndDate = new DateTime(2021, 04, 08), Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project initiation", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08) }, + new TaskData() { TaskID = 6, TaskName = "Identify site location", StartDate = new DateTime(2021, 04, 02), Duration = "2", Progress = 30, ParentID = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 02) }, + new TaskData() { TaskID = 7, TaskName = "Perform soil test", StartDate = new DateTime(2021, 04, 02), Duration = "4", Progress = 40, ParentID = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 03) }, + new TaskData() { TaskID = 8, TaskName = "Soil test approval", StartDate = new DateTime(2021, 04, 02), Duration = "5", Progress = 30, ParentID = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 04) } }; return Tasks; } } -``` -![Blazor Gantt Chart PDF Custom Taskbar Appearance Through Property ](images/pdf-custom-taskbar-property.png) + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVyijDKBofOIgSk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Through event @@ -1127,18 +1197,20 @@ The PDF export functionality allows you to customize the appearance of taskbars The following code snippet demonstrates how to use the `PdfQueryTaskbarInfo` event to customize the appearance of taskbars in the exported PDF document, -``` cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Navigations @using Syncfusion.PdfExport - + - + @@ -1151,7 +1223,7 @@ The following code snippet demonstrates how to use the `PdfQueryTaskbarInfo` eve @code { private List TaskCollection { get; set; } private SfGantt Gantt; - private List toolbarItem = new List() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; + private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } }; protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -1165,13 +1237,13 @@ The following code snippet demonstrates how to use the `PdfQueryTaskbarInfo` eve } public void PdfQueryTaskbarInfoHandler(PdfQueryTaskbarInfoEventArgs args) { - if (args.Data.TaskId == 3) + if (args.Data.TaskID == 3) { args.TaskbarStyle.Color = new PdfTaskbarColor(); args.TaskbarStyle.Color.ChildProgressColor = new Syncfusion.PdfExport.PdfColor(103, 80, 164); args.TaskbarStyle.Color.ChildTaskbarColor = new Syncfusion.PdfExport.PdfColor(141, 124, 187); } - if (args.Data.TaskId == 4) + if (args.Data.TaskID == 4) { args.TaskbarStyle.Color = new PdfTaskbarColor(); args.TaskbarStyle.Color.MilestoneColor = new Syncfusion.PdfExport.PdfColor(103, 80, 164); @@ -1180,13 +1252,13 @@ The following code snippet demonstrates how to use the `PdfQueryTaskbarInfo` eve } public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { 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 int? ParentID { get; set; } public string Predecessor { get; set; } } @@ -1194,22 +1266,23 @@ The following code snippet demonstrates how to use the `PdfQueryTaskbarInfo` eve { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentId = 1, Predecessor = "2" }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 , Predecessor = "3" }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Blazor Gantt Chart PDF Custom Taskbar Appearance Through Event ](images/pdf-custom-taskbar-event.png) +{% endhighlight %} +{% endtabs %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDheittqhyxNSXIj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Events triggered during exporting diff --git a/blazor/gantt-chart/predecessor-validation.md b/blazor/gantt-chart/predecessor-validation.md index 314c799a76..2970c25c46 100644 --- a/blazor/gantt-chart/predecessor-validation.md +++ b/blazor/gantt-chart/predecessor-validation.md @@ -11,13 +11,15 @@ documentation: ug By default, Gantt tasks date values are validated based on predecessor values. You can disable/enable this validation by using the [EnablePredecessorValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnablePredecessorValidation) property. By default, `EnablePredecessorValidation` is true. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @@ -34,32 +36,35 @@ By default, Gantt tasks date values are validated based on predecessor values. Y public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public string Duration { get; set; } public string Predecessor { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05)}, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Progress = 30, ParentId = 1}, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "3", Progress = 40, Predecessor = "2fs", ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "1", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, Predecessor = "6", ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "2", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05)}, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Progress = 30, ParentID = 1}, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "3", Progress = 40, Predecessor = "2fs", ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "1", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, Predecessor = "6", ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "2", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Blazor Gantt Chart disabling predecessor validation on load time and edit actions.](images/blazor-gantt-chart-predecessor-validation-disabled.PNG) + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhysZjqhxCOrQrM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Custom validation using TaskbarEditing event @@ -80,11 +85,13 @@ By default, the `PreserveLinkWithEditing` validation mode will be enabled, so th The following code example explains enabling the `RespectLink` validation mode while editing the linked tasks in the `TaskbarEditing` event. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @@ -104,46 +111,51 @@ The following code example explains enabling the `RespectLink` validation mode w } public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } public string Duration { get; set; } public int Progress { get; set; } public string Predecessor { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21) }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, Predecessor = "2", ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, Predecessor = "6", ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08) }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, Predecessor = "2", ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 13) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, Predecessor = "6", ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Blazor Gantt Chart respect link on edit actions](images/blazor-gantt-chart-respect-link.gif) + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrSsDXgVRpnkcxM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Predecessor offset validation On taskbar editing, the [TaskbarEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_TaskbarEditing) event will be triggered with [EnablePredecessorOffsetValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.TaskbarEditingEventArgs-1.html#Syncfusion_Blazor_Gantt_TaskbarEditingEventArgs_1_EnablePredecessorOffsetValidation) argument. When `EnablePredecessorOffsetValidation` is enabled, the taskbar can be dragged such that it does not violate the predecessor value. The taskbar can be dragged above the given predecessor offset value and it gets reverted to the minimum predecessor value if dragged below the predecessor offset value. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @@ -166,33 +178,35 @@ The taskbar can be dragged above the given predecessor offset value and it gets public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public string Duration { get; set; } public string Predecessor { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 02)}, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 02), Progress = 30, ParentId = 1}, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 02), Duration = "3", Progress = 40, Predecessor = "2fs", ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 02), Duration = "1", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 02) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 04), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 04), Duration = "3", Progress = 40, Predecessor = "6", ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 04), Duration = "2", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 04)}, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 04), Progress = 30, ParentID = 1}, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "3", Progress = 40, Predecessor = "2fs", ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 04), Duration = "1", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 04) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 04), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 07), Duration = "3", Progress = 40, Predecessor = "6", ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 04), Duration = "2", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Blazor Gantt Chart predecessor validation on taskbar dragging](images/blazor-gantt-chart-predecessor-offset-validation.gif) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBSsDZKrRmnkxBc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> When `EnablePredecessorOffsetValidation` is enabled, the predecessor offset will not be updated on dragging the taskbar. You can update the predecessor offset either by cell edit or dialog edit. @@ -202,12 +216,14 @@ When the connector lines are drawn between tasks, the task date gets validated b In the below code example, the connector line which is connected from task id 2 to task id 3 is rendered at load time. Hence validation happens. Whereas, the connector line from task id 6 to task id 7 is drawn dynamically and validation is restricted here by disabling the `EnablePredecessorValidation` property. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @@ -230,32 +246,34 @@ In the below code example, the connector line which is connected from task id 2 public class TaskData { - public int TaskId { get; set; } + public int TaskID { get; set; } public string TaskName { get; set; } public DateTime StartDate { get; set; } public string Duration { get; set; } public string Predecessor { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } } public static List GetTaskCollection() { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 02)}, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 02), Progress = 30, ParentId = 1}, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 02), Duration = "3", Progress = 40, Predecessor = "2fs", ParentId = 1 }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 02), Duration = "1", Progress = 30, ParentId = 1 }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 02) }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 04), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 04), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 04), Duration = "2", Progress = 30, ParentId = 5 } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 04)}, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 04), Progress = 30, ParentID = 1}, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "3", Progress = 40, Predecessor = "2fs", ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 04), Duration = "1", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 04) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 04), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 04), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 04), Duration = "2", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -![Blazor Gantt Chart disabling predecessor validation on predecessor drawing](images/blazor-gantt-chart-auto-link-validation.png) +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBICtjghxOULcTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> [EnablePredecessorValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnablePredecessorValidation) API is used to enable/disable validation based on predecessor values both on load time and on edit actions like cell editing, dialog editing, and on predecessor drawing. Whereas, [EnablePredecessorValidation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.TaskbarEditingEventArgs-1.html#Syncfusion_Blazor_Gantt_TaskbarEditingEventArgs_1_EnablePredecessorValidation) event argument is used to enable/disable validation only on predecessor drawing. \ No newline at end of file diff --git a/blazor/gantt-chart/resource-view.md b/blazor/gantt-chart/resource-view.md index 41267b4585..11d5a618c2 100644 --- a/blazor/gantt-chart/resource-view.md +++ b/blazor/gantt-chart/resource-view.md @@ -12,19 +12,18 @@ documentation: ug To visualize tasks assigned to each resource in a hierarchical manner, you can set the [ViewType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ViewType) property to [ResourceView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.ViewType.html#Syncfusion_Blazor_Gantt_ViewType_ResourceView) during initialization of the Gantt Chart. This view represents resources as parent records and their corresponding tasks as child records. You can refer to this [link](https://blazor.syncfusion.com/documentation/gantt-chart/resources.html) for detailed instructions on binding resources data within a Gantt Chart. {% tabs %} - -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using BlazorGanttChart.Data - + ParentID="@nameof(GanttModel.TaskInfoModel.ParentID)" Work="@nameof(GanttModel.TaskInfoModel.Work)" TaskType="@nameof(GanttModel.TaskInfoModel.TaskType)" Progress="@nameof(GanttModel.TaskInfoModel.Progress)"> - + assignments = new List() { - new AssignmentModel(){ PrimaryId=1, TaskId = 2 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=2, TaskId = 3 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=3, TaskId = 4 , ResourceId=3}, - new AssignmentModel(){ PrimaryId=4, TaskId = 6 , ResourceId=2}, - new AssignmentModel(){ PrimaryId=5, TaskId = 7 , ResourceId=4, Unit=30}, - new AssignmentModel(){ PrimaryId=6, TaskId = 8 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=7, TaskId = 9 , ResourceId=11}, + new AssignmentModel(){ PrimaryId=1, TaskID = 2 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=2, TaskID = 3 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=3, TaskID = 4 , ResourceId=3}, + new AssignmentModel(){ PrimaryId=4, TaskID = 6 , ResourceId=2}, + new AssignmentModel(){ PrimaryId=5, TaskID = 7 , ResourceId=4, Unit=30}, + new AssignmentModel(){ PrimaryId=6, TaskID = 8 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=7, TaskID = 9 , ResourceId=11}, }; return assignments; } @@ -127,26 +125,23 @@ namespace BlazorGanttChart.Data return new List() { new TaskInfoModel() { Id = 1, Name = "Project initiation", StartDate = new DateTime(2021, 03, 28), EndDate = new DateTime(2021, 07, 28), TaskType ="FixedDuration", Work=128, Duration="4" }, - new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentId = 1, Duration="3", TaskType ="FixedDuration", Work=16 }, - new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentId = 1, Work=96, Duration="4", TaskType="FixedWork" }, - new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "4", Progress = 30, ParentId = 1, Work=16, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentID = 1, Duration="3", TaskType ="FixedDuration", Work=16 }, + new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentID = 1, Work=96, Duration="4", TaskType="FixedWork" }, + new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "4", Progress = 30, ParentID = 1, Work=16, TaskType="FixedWork" }, new TaskInfoModel() { Id = 5, Name = "Project estimation", StartDate = new DateTime(2021, 03, 29), EndDate = new DateTime(2021, 04, 2), TaskType="FixedDuration", Duration="4" }, - new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentId = 5, Work=30, TaskType="FixedWork" }, - new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentId = 5, TaskType="FixedWork", Work=48 }, - new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "4", ParentId = 5, Work=60, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentID = 5, Work=30, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentID = 5, TaskType="FixedWork", Work=48 }, + new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "4", ParentID = 5, Work=60, TaskType="FixedWork" }, new TaskInfoModel() { Id = 9, Name = "Sign contract", StartDate = new DateTime(2021, 03, 31), EndDate = new DateTime(2021, 04, 01), Duration="4", TaskType="FixedWork", Work=24 }, }; } } } - {% endhighlight %} - {% endtabs %} -![Resource view in Gantt Chart](images/blazor-gantt-chart-resource-view.png) - +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVyCDZqqMPafknB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} > * In the resource view, records are ordered based on the assigning of task resources. If a task does not have any assigned resources, it is placed under the **Unassigned Tasks** parent record. > * The delete operation in the resource view functions differently: if you delete any task under a resource, the task is first moved under the **Unassigned Tasks** parent record. If you subsequently delete the same record again, it is completely removed from the task collection. @@ -159,20 +154,18 @@ When a resource is assigned more work than they can complete within their availa You can indicate overallocation date ranges with square brackets by enabling the feature through the [ShowOverallocation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ShowOverallocation) property. {% tabs %} - -{% highlight razor %} - +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using BlazorGanttChart.Data - + ParentID="@nameof(GanttModel.TaskInfoModel.ParentID)" Work="@nameof(GanttModel.TaskInfoModel.Work)" TaskType="@nameof(GanttModel.TaskInfoModel.TaskType)" Progress="@nameof(GanttModel.TaskInfoModel.Progress)"> - + assignments = new List() { - new AssignmentModel(){ PrimaryId=1, TaskId = 2 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=2, TaskId = 3 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=3, TaskId = 4 , ResourceId=2}, - new AssignmentModel(){ PrimaryId=4, TaskId = 6 , ResourceId=2}, - new AssignmentModel(){ PrimaryId=5, TaskId = 7 , ResourceId=3, Unit=30}, - new AssignmentModel(){ PrimaryId=6, TaskId = 8 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=7, TaskId = 9 , ResourceId=11}, + new AssignmentModel(){ PrimaryId=1, TaskID = 2 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=2, TaskID = 3 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=3, TaskID = 4 , ResourceId=2}, + new AssignmentModel(){ PrimaryId=4, TaskID = 6 , ResourceId=2}, + new AssignmentModel(){ PrimaryId=5, TaskID = 7 , ResourceId=3, Unit=30}, + new AssignmentModel(){ PrimaryId=6, TaskID = 8 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=7, TaskID = 9 , ResourceId=11}, }; return assignments; } @@ -276,13 +267,13 @@ namespace BlazorGanttChart.Data return new List() { new TaskInfoModel() { Id = 1, Name = "Project initiation", StartDate = new DateTime(2021, 03, 28), EndDate = new DateTime(2021, 07, 28), TaskType ="FixedDuration", Work=128, Duration="4" }, - new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentId = 1, Duration="8", TaskType ="FixedDuration", Work=16 }, - new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentId = 1, Work=96, Duration="9", TaskType="FixedWork" }, - new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "8", Progress = 30, ParentId = 1, Work=16, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentID = 1, Duration="8", TaskType ="FixedDuration", Work=16 }, + new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentID = 1, Work=96, Duration="9", TaskType="FixedWork" }, + new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "8", Progress = 30, ParentID = 1, Work=16, TaskType="FixedWork" }, new TaskInfoModel() { Id = 5, Name = "Project estimation", StartDate = new DateTime(2021, 03, 29), EndDate = new DateTime(2021, 04, 2), TaskType="FixedDuration", Duration="4" }, - new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "8", Progress = 30, ParentId = 5, Work=30, TaskType="FixedWork" }, - new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "8", Progress = 30, ParentId = 5, TaskType="FixedWork", Work=48 }, - new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "9", ParentId = 5, Work=60, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "8", Progress = 30, ParentID = 5, Work=30, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "8", Progress = 30, ParentID = 5, TaskType="FixedWork", Work=48 }, + new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "9", ParentID = 5, Work=60, TaskType="FixedWork" }, new TaskInfoModel() { Id = 9, Name = "Sign contract", StartDate = new DateTime(2021, 03, 31), EndDate = new DateTime(2021, 04, 01), Duration="9", TaskType="FixedWork", Work=24 }, }; } @@ -290,31 +281,27 @@ namespace BlazorGanttChart.Data } {% endhighlight %} - {% endtabs %} - -![Resource view overallocation in Gantt Chart](images/blazor-gantt-chart-resource-view-overallocation.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBesjDUULLCVRCX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Unassigned task Unassigned tasks in the Gantt Chart refer to tasks that have not been assigned to any particular resource. These tasks are categorized under the parent row **Unassigned Tasks** and appears at the bottom of the Gantt Chart's data collection. {% tabs %} - -{% highlight razor %} - +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using BlazorGanttChart.Data - + ParentID="@nameof(GanttModel.TaskInfoModel.ParentID)" Work="@nameof(GanttModel.TaskInfoModel.Work)" TaskType="@nameof(GanttModel.TaskInfoModel.TaskType)" Progress="@nameof(GanttModel.TaskInfoModel.Progress)"> - + assignments = new List() { - new AssignmentModel(){ PrimaryId=1, TaskId = 2 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=2, TaskId = 3 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=3, TaskId = 4 , ResourceId=2} + new AssignmentModel(){ PrimaryId=1, TaskID = 2 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=2, TaskID = 3 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=3, TaskID = 4 , ResourceId=2} }; return assignments; } @@ -414,13 +399,13 @@ namespace BlazorGanttChart.Data return new List() { new TaskInfoModel() { Id = 1, Name = "Project initiation", StartDate = new DateTime(2021, 03, 28), EndDate = new DateTime(2021, 07, 28), TaskType ="FixedDuration", Work=128, Duration="4" }, - new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentId = 1, Duration="8", TaskType ="FixedDuration", Work=16 }, - new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentId = 1, Work=96, Duration="9", TaskType="FixedWork" }, - new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "8", Progress = 30, ParentId = 1, Work=16, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentID = 1, Duration="8", TaskType ="FixedDuration", Work=16 }, + new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentID = 1, Work=96, Duration="9", TaskType="FixedWork" }, + new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "8", Progress = 30, ParentID = 1, Work=16, TaskType="FixedWork" }, new TaskInfoModel() { Id = 5, Name = "Project estimation", StartDate = new DateTime(2021, 03, 29), EndDate = new DateTime(2021, 04, 2), TaskType="FixedDuration", Duration="4" }, - new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "8", Progress = 30, ParentId = 5, Work=30, TaskType="FixedWork" }, - new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "8", Progress = 30, ParentId = 5, TaskType="FixedWork", Work=48 }, - new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "9", ParentId = 5, Work=60, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "8", Progress = 30, ParentID = 5, Work=30, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "8", Progress = 30, ParentID = 5, TaskType="FixedWork", Work=48 }, + new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "9", ParentID = 5, Work=60, TaskType="FixedWork" }, new TaskInfoModel() { Id = 9, Name = "Sign contract", StartDate = new DateTime(2021, 03, 31), EndDate = new DateTime(2021, 04, 01), Duration="9", TaskType="FixedWork", Work=24 }, }; } @@ -428,10 +413,9 @@ namespace BlazorGanttChart.Data } {% endhighlight %} - {% endtabs %} -![Resource view unassign task in Gantt Chart](images/blazor-gantt-chart-resource-view-unassign-task.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrosNjUUfnyXZum?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Multi-taskbar @@ -440,20 +424,18 @@ For a compact view, multiple tasks assigned to each resource can be visualized i > When a resource has multiple tasks scheduled on the same date, these tasks will be overlapped on each other, and overallocation indicator will be shown when [ShowOverallocation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ShowOverallocation) property is enabled. {% tabs %} - -{% highlight razor %} - +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using BlazorGanttChart.Data - + ParentID="@nameof(GanttModel.TaskInfoModel.ParentID)" Work="@nameof(GanttModel.TaskInfoModel.Work)" TaskType="@nameof(GanttModel.TaskInfoModel.TaskType)" Progress="@nameof(GanttModel.TaskInfoModel.Progress)"> - + @@ -496,28 +478,28 @@ namespace BlazorGanttChart.Data public class ResourceInfoModel { public int Id { get; set; } - public string? Name { get; set; } + public string Name { get; set; } public double MaxUnit { get; set; } } public class TaskInfoModel { public int Id { get; set; } - public string? Name { get; set; } - public string? TaskType { get; set; } + public string Name { get; set; } + public string TaskType { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } - public string? Duration { get; set; } + public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } public double? Work { get; set; } - public string? Predecessor { get; set; } + public string Predecessor { get; set; } } public class AssignmentModel { public int PrimaryId { get; set; } - public int TaskId { get; set; } + public int TaskID { get; set; } public int ResourceId { get; set; } public double? Unit { get; set; } } @@ -542,29 +524,29 @@ namespace BlazorGanttChart.Data { List assignments = new List() { - new AssignmentModel(){ PrimaryId=1, TaskId = 2 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=2, TaskId = 3 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=3, TaskId = 4 , ResourceId=1}, - new AssignmentModel(){ PrimaryId=4, TaskId = 6 , ResourceId=2}, - new AssignmentModel(){ PrimaryId=6, TaskId = 8 , ResourceId=2}, - new AssignmentModel(){ PrimaryId=7, TaskId = 10 , ResourceId=3}, - new AssignmentModel(){ PrimaryId=8, TaskId = 11, ResourceId=3}, - new AssignmentModel(){ PrimaryId=9, TaskId = 12 , ResourceId=3}, - new AssignmentModel(){ PrimaryId=10, TaskId = 14 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=11, TaskId = 15 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=12, TaskId = 16 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=13, TaskId = 18 , ResourceId=5}, - new AssignmentModel(){ PrimaryId=14, TaskId = 19 , ResourceId=5}, - new AssignmentModel(){ PrimaryId=15, TaskId = 20 , ResourceId=5}, - new AssignmentModel(){ PrimaryId=16, TaskId = 21 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=17, TaskId = 22 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=18, TaskId = 23 , ResourceId=7}, - new AssignmentModel(){ PrimaryId=19, TaskId = 24 , ResourceId=7}, - new AssignmentModel(){ PrimaryId=20, TaskId = 25 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=21, TaskId = 26 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=22, TaskId = 27 , ResourceId=9}, - new AssignmentModel(){ PrimaryId=23, TaskId = 28 , ResourceId=9}, - new AssignmentModel(){ PrimaryId=24, TaskId = 29 , ResourceId=10}, + new AssignmentModel(){ PrimaryId=1, TaskID = 2 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=2, TaskID = 3 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=3, TaskID = 4 , ResourceId=1}, + new AssignmentModel(){ PrimaryId=4, TaskID = 6 , ResourceId=2}, + new AssignmentModel(){ PrimaryId=6, TaskID = 8 , ResourceId=2}, + new AssignmentModel(){ PrimaryId=7, TaskID = 10 , ResourceId=3}, + new AssignmentModel(){ PrimaryId=8, TaskID = 11, ResourceId=3}, + new AssignmentModel(){ PrimaryId=9, TaskID = 12 , ResourceId=3}, + new AssignmentModel(){ PrimaryId=10, TaskID = 14 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=11, TaskID = 15 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=12, TaskID = 16 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=13, TaskID = 18 , ResourceId=5}, + new AssignmentModel(){ PrimaryId=14, TaskID = 19 , ResourceId=5}, + new AssignmentModel(){ PrimaryId=15, TaskID = 20 , ResourceId=5}, + new AssignmentModel(){ PrimaryId=16, TaskID = 21 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=17, TaskID = 22 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=18, TaskID = 23 , ResourceId=7}, + new AssignmentModel(){ PrimaryId=19, TaskID = 24 , ResourceId=7}, + new AssignmentModel(){ PrimaryId=20, TaskID = 25 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=21, TaskID = 26 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=22, TaskID = 27 , ResourceId=9}, + new AssignmentModel(){ PrimaryId=23, TaskID = 28 , ResourceId=9}, + new AssignmentModel(){ PrimaryId=24, TaskID = 29 , ResourceId=10}, }; return assignments; } @@ -574,24 +556,24 @@ namespace BlazorGanttChart.Data List Tasks = new List() { new TaskInfoModel() { Id = 1, Name = "Project initiation", StartDate = new DateTime(2019, 03, 29), EndDate = new DateTime(2019, 04, 21), TaskType = "FixedDuration", Work = 128, Duration = "4" }, - new TaskInfoModel() { Id = 2, Name = "Identify Site location", StartDate = new DateTime(2019, 03, 29), Progress = 30, ParentId = 1, Duration = "2" }, - new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2019, 04, 03), Progress = 50, ParentId = 1, Duration = "3", Work = 16 }, - new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2019, 04, 09), ParentId = 1, Work = 96, Duration = "2", TaskType = "FixedWork", Predecessor = "3", Progress = 40 }, + new TaskInfoModel() { Id = 2, Name = "Identify Site location", StartDate = new DateTime(2019, 03, 29), Progress = 30, ParentID = 1, Duration = "2" }, + new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2019, 04, 03), Progress = 50, ParentID = 1, Duration = "3", Work = 16 }, + new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2019, 04, 09), ParentID = 1, Work = 96, Duration = "2", TaskType = "FixedWork", Predecessor = "3", Progress = 40 }, new TaskInfoModel() { Id = 5, Name = "Project estimation", StartDate = new DateTime(2019, 03, 29), EndDate = new DateTime(2019, 04, 21), Progress = 30, Work = 16, TaskType = "FixedWork" }, new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 01), TaskType = "FixedDuration", Duration = "5", Progress = 40, Work = 50 }, - new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2019, 04, 04), Duration = "2", Progress = 30, ParentId = 5, Work = 30, TaskType = "FixedDuration", Predecessor = "6FS-2" }, - new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2019, 04, 09), Duration = "2", Progress = 30, ParentId = 5, TaskType = "FixedWork", Work = 48, Predecessor = "7FS-1" }, + new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2019, 04, 04), Duration = "2", Progress = 30, ParentID = 5, Work = 30, TaskType = "FixedDuration", Predecessor = "6FS-2" }, + new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2019, 04, 09), Duration = "2", Progress = 30, ParentID = 5, TaskType = "FixedWork", Work = 48, Predecessor = "7FS-1" }, new TaskInfoModel() { Id = 9, Name = "Site work", Progress = 30, StartDate = new DateTime(2019, 04, 04), EndDate = new DateTime(2019, 04, 21), Work = 60, TaskType = "FixedUnit" }, - new TaskInfoModel() { Id = 10, Name = "Install temporary power service", StartDate = new DateTime(2019, 04, 01), Duration = "4", ParentId = 9, Work = 60, Progress = 50, TaskType = "FixedWork" }, - new TaskInfoModel() { Id = 11, Name = "Clear the building site", StartDate = new DateTime(2019, 04, 08), Duration = "3", ParentId = 9, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "10FS-9" }, - new TaskInfoModel() { Id = 12, Name = "Sign contract", StartDate = new DateTime(2019, 04, 12), Duration = "3", ParentId = 9, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "11FS-5" }, + new TaskInfoModel() { Id = 10, Name = "Install temporary power service", StartDate = new DateTime(2019, 04, 01), Duration = "4", ParentID = 9, Work = 60, Progress = 50, TaskType = "FixedWork" }, + new TaskInfoModel() { Id = 11, Name = "Clear the building site", StartDate = new DateTime(2019, 04, 08), Duration = "3", ParentID = 9, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "10FS-9" }, + new TaskInfoModel() { Id = 12, Name = "Sign contract", StartDate = new DateTime(2019, 04, 12), Duration = "3", ParentID = 9, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "11FS-5" }, new TaskInfoModel() { Id = 13, Name = "Foundation", StartDate = new DateTime(2022, 04, 04), EndDate = new DateTime(2019, 04, 28), Work = 60, Progress = 40, TaskType = "FixedDuration" }, - new TaskInfoModel() { Id = 14, Name = "Excavate for foundations", StartDate = new DateTime(2019, 04, 01), Duration = "2", ParentId = 13, Work = 60, Progress = 40, TaskType = "FixedDuration" }, - new TaskInfoModel() { Id = 15, Name = "Dig footer", StartDate = new DateTime(2019, 04, 04), Duration = "2", ParentId = 13, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "14FS + 1" }, - new TaskInfoModel() { Id = 16, Name = "Install plumbing grounds", StartDate = new DateTime(2019, 04, 08), Duration = "2", ParentId = 13, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "15FS" }, new TaskInfoModel() { Id = 17, Name = "Framing", StartDate = new DateTime(2019, 04, 04), EndDate = new DateTime(2019, 04, 28), Work = 60, Progress = 40, TaskType = "FixedDuration" }, - new TaskInfoModel() { Id = 18, Name = "Add load-bearing structure", StartDate = new DateTime(2019, 04, 03), Duration = "2", ParentId = 17, Work = 60, Progress = 20, TaskType = "FixedDuration" }, - new TaskInfoModel() { Id = 19, Name = "Natural gas utilities", StartDate = new DateTime(2019, 04, 08), Duration = "3", ParentId = 17, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "18" }, - new TaskInfoModel() { Id = 20, Name = "Electrical utilities", StartDate = new DateTime(2022, 04, 01), Duration = "2", ParentId = 17, Work = 60, Progress = 50, TaskType = "FixedWork", Predecessor = "19FS + 1" }, + new TaskInfoModel() { Id = 14, Name = "Excavate for foundations", StartDate = new DateTime(2019, 04, 01), Duration = "2", ParentID = 13, Work = 60, Progress = 40, TaskType = "FixedDuration" }, + new TaskInfoModel() { Id = 15, Name = "Dig footer", StartDate = new DateTime(2019, 04, 04), Duration = "2", ParentID = 13, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "14FS + 1" }, + new TaskInfoModel() { Id = 16, Name = "Install plumbing grounds", StartDate = new DateTime(2019, 04, 08), Duration = "2", ParentID = 13, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "15FS" }, new TaskInfoModel() { Id = 17, Name = "Framing", StartDate = new DateTime(2019, 04, 04), EndDate = new DateTime(2019, 04, 28), Work = 60, Progress = 40, TaskType = "FixedDuration" }, + new TaskInfoModel() { Id = 18, Name = "Add load-bearing structure", StartDate = new DateTime(2019, 04, 03), Duration = "2", ParentID = 17, Work = 60, Progress = 20, TaskType = "FixedDuration" }, + new TaskInfoModel() { Id = 19, Name = "Natural gas utilities", StartDate = new DateTime(2019, 04, 08), Duration = "3", ParentID = 17, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "18" }, + new TaskInfoModel() { Id = 20, Name = "Electrical utilities", StartDate = new DateTime(2022, 04, 01), Duration = "2", ParentID = 17, Work = 60, Progress = 50, TaskType = "FixedWork", Predecessor = "19FS + 1" }, new TaskInfoModel() { Id = 21, Name = "Plumbing test", StartDate = new DateTime(2019, 04, 04), Duration = "3", Work = 60, Progress = 50, TaskType = "FixedWork" }, new TaskInfoModel() { Id = 22, Name = "Electrical test", StartDate = new DateTime(2019, 04, 04), Duration = "3", Work = 60, Progress = 50, TaskType = "FixedWork", Predecessor = "21" }, new TaskInfoModel() { Id = 23, Name = "First floor initiation", StartDate = new DateTime(2019, 04, 06), Duration = "3", Work = 60, Progress = 50, TaskType = "FixedWork" }, @@ -608,12 +590,11 @@ namespace BlazorGanttChart.Data } } -{% endhighlight %} +{% endhighlight %} {% endtabs %} - -![Resource multi-taskbar in Gantt Chart](images/blazor-gantt-chart-resource-multi-taskbar.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjreCNXUAQtgGkIm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Taskbar drag and drop between resources @@ -622,20 +603,18 @@ You can smoothly move taskbars vertically, enabling the seamless transfer of tas Within the Gantt chart, taskbar repositioning tasks among different resources can be enabled by setting the [AllowTaskbarDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskbarSettings.html#Syncfusion_Blazor_Gantt_GanttTaskbarSettings_AllowTaskbarDragAndDrop) property within `GanttTaskbarSettings` to **true**. {% tabs %} - -{% highlight razor %} - +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using BlazorGanttChart.Data - + ParentID="@nameof(GanttModel.TaskInfoModel.ParentID)" Work="@nameof(GanttModel.TaskInfoModel.Work)" TaskType="@nameof(GanttModel.TaskInfoModel.TaskType)" Progress="@nameof(GanttModel.TaskInfoModel.Progress)"> - + @@ -668,7 +647,6 @@ Within the Gantt chart, taskbar repositioning tasks among different resources ca } {% endhighlight %} - {% highlight c# tabtitle="GanttModel.cs" %} namespace BlazorGanttChart.Data @@ -678,28 +656,28 @@ namespace BlazorGanttChart.Data public class ResourceInfoModel { public int Id { get; set; } - public string? Name { get; set; } + public string Name { get; set; } public double MaxUnit { get; set; } } public class TaskInfoModel { public int Id { get; set; } - public string? Name { get; set; } - public string? TaskType { get; set; } + public string Name { get; set; } + public string TaskType { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } - public string? Duration { get; set; } + public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } public double? Work { get; set; } - public string? Predecessor { get; set; } + public string Predecessor { get; set; } } public class AssignmentModel { public int PrimaryId { get; set; } - public int TaskId { get; set; } + public int TaskID { get; set; } public int ResourceId { get; set; } public double? Unit { get; set; } } @@ -724,29 +702,29 @@ namespace BlazorGanttChart.Data { List assignments = new List() { - new AssignmentModel(){ PrimaryId=1, TaskId = 2 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=2, TaskId = 3 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=3, TaskId = 4 , ResourceId=1}, - new AssignmentModel(){ PrimaryId=4, TaskId = 6 , ResourceId=2}, - new AssignmentModel(){ PrimaryId=6, TaskId = 8 , ResourceId=2}, - new AssignmentModel(){ PrimaryId=7, TaskId = 10 , ResourceId=3}, - new AssignmentModel(){ PrimaryId=8, TaskId = 11, ResourceId=3}, - new AssignmentModel(){ PrimaryId=9, TaskId = 12 , ResourceId=3}, - new AssignmentModel(){ PrimaryId=10, TaskId = 14 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=11, TaskId = 15 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=12, TaskId = 16 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=13, TaskId = 18 , ResourceId=5}, - new AssignmentModel(){ PrimaryId=14, TaskId = 19 , ResourceId=5}, - new AssignmentModel(){ PrimaryId=15, TaskId = 20 , ResourceId=5}, - new AssignmentModel(){ PrimaryId=16, TaskId = 21 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=17, TaskId = 22 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=18, TaskId = 23 , ResourceId=7}, - new AssignmentModel(){ PrimaryId=19, TaskId = 24 , ResourceId=7}, - new AssignmentModel(){ PrimaryId=20, TaskId = 25 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=21, TaskId = 26 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=22, TaskId = 27 , ResourceId=9}, - new AssignmentModel(){ PrimaryId=23, TaskId = 28 , ResourceId=9}, - new AssignmentModel(){ PrimaryId=24, TaskId = 29 , ResourceId=10}, + new AssignmentModel(){ PrimaryId=1, TaskID = 2 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=2, TaskID = 3 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=3, TaskID = 4 , ResourceId=1}, + new AssignmentModel(){ PrimaryId=4, TaskID = 6 , ResourceId=2}, + new AssignmentModel(){ PrimaryId=6, TaskID = 8 , ResourceId=2}, + new AssignmentModel(){ PrimaryId=7, TaskID = 10 , ResourceId=3}, + new AssignmentModel(){ PrimaryId=8, TaskID = 11, ResourceId=3}, + new AssignmentModel(){ PrimaryId=9, TaskID = 12 , ResourceId=3}, + new AssignmentModel(){ PrimaryId=10, TaskID = 14 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=11, TaskID = 15 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=12, TaskID = 16 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=13, TaskID = 18 , ResourceId=5}, + new AssignmentModel(){ PrimaryId=14, TaskID = 19 , ResourceId=5}, + new AssignmentModel(){ PrimaryId=15, TaskID = 20 , ResourceId=5}, + new AssignmentModel(){ PrimaryId=16, TaskID = 21 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=17, TaskID = 22 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=18, TaskID = 23 , ResourceId=7}, + new AssignmentModel(){ PrimaryId=19, TaskID = 24 , ResourceId=7}, + new AssignmentModel(){ PrimaryId=20, TaskID = 25 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=21, TaskID = 26 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=22, TaskID = 27 , ResourceId=9}, + new AssignmentModel(){ PrimaryId=23, TaskID = 28 , ResourceId=9}, + new AssignmentModel(){ PrimaryId=24, TaskID = 29 , ResourceId=10}, }; return assignments; } @@ -756,24 +734,24 @@ namespace BlazorGanttChart.Data List Tasks = new List() { new TaskInfoModel() { Id = 1, Name = "Project initiation", StartDate = new DateTime(2019, 03, 29), EndDate = new DateTime(2019, 04, 21), TaskType = "FixedDuration", Work = 128, Duration = "4" }, - new TaskInfoModel() { Id = 2, Name = "Identify Site location", StartDate = new DateTime(2019, 03, 29), Progress = 30, ParentId = 1, Duration = "2" }, - new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2019, 04, 03), Progress = 50, ParentId = 1, Duration = "3", Work = 16 }, - new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2019, 04, 09), ParentId = 1, Work = 96, Duration = "2", TaskType = "FixedWork", Predecessor = "3", Progress = 40 }, + new TaskInfoModel() { Id = 2, Name = "Identify Site location", StartDate = new DateTime(2019, 03, 29), Progress = 30, ParentID = 1, Duration = "2" }, + new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2019, 04, 03), Progress = 50, ParentID = 1, Duration = "3", Work = 16 }, + new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2019, 04, 09), ParentID = 1, Work = 96, Duration = "2", TaskType = "FixedWork", Predecessor = "3", Progress = 40 }, new TaskInfoModel() { Id = 5, Name = "Project estimation", StartDate = new DateTime(2019, 03, 29), EndDate = new DateTime(2019, 04, 21), Progress = 30, Work = 16, TaskType = "FixedWork" }, new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2019, 04, 01), TaskType = "FixedDuration", Duration = "5", Progress = 40, Work = 50 }, - new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2019, 04, 04), Duration = "2", Progress = 30, ParentId = 5, Work = 30, TaskType = "FixedDuration", Predecessor = "6FS-2" }, - new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2019, 04, 09), Duration = "2", Progress = 30, ParentId = 5, TaskType = "FixedWork", Work = 48, Predecessor = "7FS-1" }, + new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2019, 04, 04), Duration = "2", Progress = 30, ParentID = 5, Work = 30, TaskType = "FixedDuration", Predecessor = "6FS-2" }, + new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2019, 04, 09), Duration = "2", Progress = 30, ParentID = 5, TaskType = "FixedWork", Work = 48, Predecessor = "7FS-1" }, new TaskInfoModel() { Id = 9, Name = "Site work", Progress = 30, StartDate = new DateTime(2019, 04, 04), EndDate = new DateTime(2019, 04, 21), Work = 60, TaskType = "FixedUnit" }, - new TaskInfoModel() { Id = 10, Name = "Install temporary power service", StartDate = new DateTime(2019, 04, 01), Duration = "4", ParentId = 9, Work = 60, Progress = 50, TaskType = "FixedWork" }, - new TaskInfoModel() { Id = 11, Name = "Clear the building site", StartDate = new DateTime(2019, 04, 08), Duration = "3", ParentId = 9, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "10FS-9" }, - new TaskInfoModel() { Id = 12, Name = "Sign contract", StartDate = new DateTime(2019, 04, 12), Duration = "3", ParentId = 9, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "11FS-5" }, + new TaskInfoModel() { Id = 10, Name = "Install temporary power service", StartDate = new DateTime(2019, 04, 01), Duration = "4", ParentID = 9, Work = 60, Progress = 50, TaskType = "FixedWork" }, + new TaskInfoModel() { Id = 11, Name = "Clear the building site", StartDate = new DateTime(2019, 04, 08), Duration = "3", ParentID = 9, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "10FS-9" }, + new TaskInfoModel() { Id = 12, Name = "Sign contract", StartDate = new DateTime(2019, 04, 12), Duration = "3", ParentID = 9, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "11FS-5" }, new TaskInfoModel() { Id = 13, Name = "Foundation", StartDate = new DateTime(2022, 04, 04), EndDate = new DateTime(2019, 04, 28), Work = 60, Progress = 40, TaskType = "FixedDuration" }, - new TaskInfoModel() { Id = 14, Name = "Excavate for foundations", StartDate = new DateTime(2019, 04, 01), Duration = "2", ParentId = 13, Work = 60, Progress = 40, TaskType = "FixedDuration" }, - new TaskInfoModel() { Id = 15, Name = "Dig footer", StartDate = new DateTime(2019, 04, 04), Duration = "2", ParentId = 13, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "14FS + 1" }, - new TaskInfoModel() { Id = 16, Name = "Install plumbing grounds", StartDate = new DateTime(2019, 04, 08), Duration = "2", ParentId = 13, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "15FS" }, new TaskInfoModel() { Id = 17, Name = "Framing", StartDate = new DateTime(2019, 04, 04), EndDate = new DateTime(2019, 04, 28), Work = 60, Progress = 40, TaskType = "FixedDuration" }, - new TaskInfoModel() { Id = 18, Name = "Add load-bearing structure", StartDate = new DateTime(2019, 04, 03), Duration = "2", ParentId = 17, Work = 60, Progress = 20, TaskType = "FixedDuration" }, - new TaskInfoModel() { Id = 19, Name = "Natural gas utilities", StartDate = new DateTime(2019, 04, 08), Duration = "3", ParentId = 17, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "18" }, - new TaskInfoModel() { Id = 20, Name = "Electrical utilities", StartDate = new DateTime(2022, 04, 01), Duration = "2", ParentId = 17, Work = 60, Progress = 50, TaskType = "FixedWork", Predecessor = "19FS + 1" }, + new TaskInfoModel() { Id = 14, Name = "Excavate for foundations", StartDate = new DateTime(2019, 04, 01), Duration = "2", ParentID = 13, Work = 60, Progress = 40, TaskType = "FixedDuration" }, + new TaskInfoModel() { Id = 15, Name = "Dig footer", StartDate = new DateTime(2019, 04, 04), Duration = "2", ParentID = 13, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "14FS + 1" }, + new TaskInfoModel() { Id = 16, Name = "Install plumbing grounds", StartDate = new DateTime(2019, 04, 08), Duration = "2", ParentID = 13, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "15FS" }, new TaskInfoModel() { Id = 17, Name = "Framing", StartDate = new DateTime(2019, 04, 04), EndDate = new DateTime(2019, 04, 28), Work = 60, Progress = 40, TaskType = "FixedDuration" }, + new TaskInfoModel() { Id = 18, Name = "Add load-bearing structure", StartDate = new DateTime(2019, 04, 03), Duration = "2", ParentID = 17, Work = 60, Progress = 20, TaskType = "FixedDuration" }, + new TaskInfoModel() { Id = 19, Name = "Natural gas utilities", StartDate = new DateTime(2019, 04, 08), Duration = "3", ParentID = 17, Work = 60, Progress = 40, TaskType = "FixedDuration", Predecessor = "18" }, + new TaskInfoModel() { Id = 20, Name = "Electrical utilities", StartDate = new DateTime(2022, 04, 01), Duration = "2", ParentID = 17, Work = 60, Progress = 50, TaskType = "FixedWork", Predecessor = "19FS + 1" }, new TaskInfoModel() { Id = 21, Name = "Plumbing test", StartDate = new DateTime(2019, 04, 04), Duration = "3", Work = 60, Progress = 50, TaskType = "FixedWork" }, new TaskInfoModel() { Id = 22, Name = "Electrical test", StartDate = new DateTime(2019, 04, 04), Duration = "3", Work = 60, Progress = 50, TaskType = "FixedWork", Predecessor = "21" }, new TaskInfoModel() { Id = 23, Name = "First floor initiation", StartDate = new DateTime(2019, 04, 06), Duration = "3", Work = 60, Progress = 50, TaskType = "FixedWork" }, @@ -791,11 +769,9 @@ namespace BlazorGanttChart.Data } {% endhighlight %} - {% endtabs %} - -![Resource multi-taskbar in Gantt Chart](images/blazor-gantt-chart-resource-multi-taskbar.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLyCtZAKaGvrwhg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Managing resource assignments @@ -808,19 +784,18 @@ In the resource tab of the [add/edit dialog box](https://blazor.syncfusion.com/d In the resource view, you can easily change task resources. If the dialog box's resource tab has multiple resources, you can add one resource, make individual changes, or remove assigned resources as needed, all done efficiently. {% tabs %} - -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using BlazorGanttChart.Data - + ParentID="@nameof(GanttModel.TaskInfoModel.ParentID)" Work="@nameof(GanttModel.TaskInfoModel.Work)" TaskType="@nameof(GanttModel.TaskInfoModel.TaskType)" Progress="@nameof(GanttModel.TaskInfoModel.Progress)"> - + assignments = new List() { - new AssignmentModel(){ PrimaryId=1, TaskId = 2 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=2, TaskId = 3 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=3, TaskId = 4 , ResourceId=3}, - new AssignmentModel(){ PrimaryId=4, TaskId = 6 , ResourceId=2}, - new AssignmentModel(){ PrimaryId=5, TaskId = 7 , ResourceId=4, Unit=30}, - new AssignmentModel(){ PrimaryId=6, TaskId = 8 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=7, TaskId = 9 , ResourceId=11}, + new AssignmentModel(){ PrimaryId=1, TaskID = 2 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=2, TaskID = 3 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=3, TaskID = 4 , ResourceId=3}, + new AssignmentModel(){ PrimaryId=4, TaskID = 6 , ResourceId=2}, + new AssignmentModel(){ PrimaryId=5, TaskID = 7 , ResourceId=4, Unit=30}, + new AssignmentModel(){ PrimaryId=6, TaskID = 8 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=7, TaskID = 9 , ResourceId=11}, }; return assignments; } @@ -923,25 +897,23 @@ namespace BlazorGanttChart.Data return new List() { new TaskInfoModel() { Id = 1, Name = "Project initiation", StartDate = new DateTime(2021, 03, 28), EndDate = new DateTime(2021, 07, 28), TaskType ="FixedDuration", Work=128, Duration="4" }, - new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentId = 1, Duration="3", TaskType ="FixedDuration", Work=16 }, - new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentId = 1, Work=96, Duration="4", TaskType="FixedWork" }, - new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "4", Progress = 30, ParentId = 1, Work=16, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentID = 1, Duration="3", TaskType ="FixedDuration", Work=16 }, + new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentID = 1, Work=96, Duration="4", TaskType="FixedWork" }, + new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "4", Progress = 30, ParentID = 1, Work=16, TaskType="FixedWork" }, new TaskInfoModel() { Id = 5, Name = "Project estimation", StartDate = new DateTime(2021, 03, 29), EndDate = new DateTime(2021, 04, 2), TaskType="FixedDuration", Duration="4" }, - new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentId = 5, Work=30, TaskType="FixedWork" }, - new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentId = 5, TaskType="FixedWork", Work=48 }, - new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "4", ParentId = 5, Work=60, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentID = 5, Work=30, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentID = 5, TaskType="FixedWork", Work=48 }, + new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "4", ParentID = 5, Work=60, TaskType="FixedWork" }, new TaskInfoModel() { Id = 9, Name = "Sign contract", StartDate = new DateTime(2021, 03, 31), EndDate = new DateTime(2021, 04, 01), Duration="4", TaskType="FixedWork", Work=24 }, }; } } } - {% endhighlight %} - {% endtabs %} -![Resource view edit in dialogbox](images/blazor-gantt-chart-resource-view-dialogbox.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVeMXtKfDslelzg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Through method @@ -951,13 +923,10 @@ You can manipulate task resources programmatically by using the following method * [DeleteResourceAssignmentAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DeleteResourceAssignmentAsync__1___0_): Removes a existing resource assignment from a task. * [UpdateResourceAssignmentAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_UpdateResourceAssignmentAsync__1___0_): Updates an existing resource assignment for a task. - These methods offer a convenient way to efficiently manage task resources in your Gantt chart, allowing you to add, remove, and update resources as needed. In the following code snippet, when an external button is clicked, the following actions are performed: clicking the **Add Assignment** button adds resource ID 2 for task 9, the **Update Assignment** button updates the resource ID from 8 to 7 for task 9, and the **Delete Assignment** button removes the assigned resource 1 from task 3. {% tabs %} - -{% highlight razor %} - +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using BlazorGanttChart.Data @@ -966,13 +935,13 @@ These methods offer a convenient way to efficiently manage task resources in you - + ParentID="@nameof(GanttModel.TaskInfoModel.ParentID)" Work="@nameof(GanttModel.TaskInfoModel.Work)" TaskType="@nameof(GanttModel.TaskInfoModel.TaskType)" Progress="@nameof(GanttModel.TaskInfoModel.Progress)"> - + assignments = new List() { - new AssignmentModel(){ PrimaryId=1, TaskId = 2 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=2, TaskId = 3 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=3, TaskId = 4 , ResourceId=3}, - new AssignmentModel(){ PrimaryId=4, TaskId = 5 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=5, TaskId = 6 , ResourceId=2}, - new AssignmentModel(){ PrimaryId=6, TaskId = 7 , ResourceId=4, Unit=30}, - new AssignmentModel(){ PrimaryId=7, TaskId = 8 , ResourceId=8} + new AssignmentModel(){ PrimaryId=1, TaskID = 2 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=2, TaskID = 3 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=3, TaskID = 4 , ResourceId=3}, + new AssignmentModel(){ PrimaryId=4, TaskID = 6 , ResourceId=2}, + new AssignmentModel(){ PrimaryId=5, TaskID = 7 , ResourceId=4, Unit=30}, + new AssignmentModel(){ PrimaryId=6, TaskID = 8 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=7, TaskID = 9 , ResourceId=11}, }; return assignments; } @@ -1091,13 +1059,13 @@ namespace BlazorGanttChart.Data return new List() { new TaskInfoModel() { Id = 1, Name = "Project initiation", StartDate = new DateTime(2021, 03, 28), EndDate = new DateTime(2021, 07, 28), TaskType ="FixedDuration", Work=128, Duration="4" }, - new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentId = 1, Duration="3", TaskType ="FixedDuration", Work=16 }, - new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentId = 1, Work=96, Duration="4", TaskType="FixedWork" }, - new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "4", Progress = 30, ParentId = 1, Work=16, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentID = 1, Duration="3", TaskType ="FixedDuration", Work=16 }, + new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentID = 1, Work=96, Duration="4", TaskType="FixedWork" }, + new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "4", Progress = 30, ParentID = 1, Work=16, TaskType="FixedWork" }, new TaskInfoModel() { Id = 5, Name = "Project estimation", StartDate = new DateTime(2021, 03, 29), EndDate = new DateTime(2021, 04, 2), TaskType="FixedDuration", Duration="4" }, - new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentId = 5, Work=30, TaskType="FixedWork" }, - new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentId = 5, TaskType="FixedWork", Work=48 }, - new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "4", ParentId = 5, Work=60, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentID = 5, Work=30, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentID = 5, TaskType="FixedWork", Work=48 }, + new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "4", ParentID = 5, Work=60, TaskType="FixedWork" }, new TaskInfoModel() { Id = 9, Name = "Sign contract", StartDate = new DateTime(2021, 03, 31), EndDate = new DateTime(2021, 04, 01), Duration="4", TaskType="FixedWork", Work=24 }, }; } @@ -1105,10 +1073,9 @@ namespace BlazorGanttChart.Data } {% endhighlight %} - {% endtabs %} -![Resource view edit in dialogbox](images/blazor-gantt-chart-resource-view-method.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhIiNjAzZTBGeeH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Limitations diff --git a/blazor/gantt-chart/resources.md b/blazor/gantt-chart/resources.md index 35e371a1ce..a26dae3df2 100644 --- a/blazor/gantt-chart/resources.md +++ b/blazor/gantt-chart/resources.md @@ -22,9 +22,7 @@ Also, the following properties of `GanttResource` component needs to be configur The following code snippets show resource collection and how it is assigned to the Gantt Chart component. {% tabs %} - -{% highlight razor %} - +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using BlazorGanttChart.Data @@ -32,10 +30,10 @@ The following code snippets show resource collection and how it is assigned to t + ParentID="@nameof(GanttModel.TaskInfoModel.ParentID)" Work="@nameof(GanttModel.TaskInfoModel.Work)" TaskType="@nameof(GanttModel.TaskInfoModel.TaskType)"> - + assignments = new List() { - new AssignmentModel(){ PrimaryId=1, TaskId = 2 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=2, TaskId = 2 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=3, TaskId = 3 , ResourceId=2}, - new AssignmentModel(){ PrimaryId=4, TaskId = 3 , ResourceId=3}, - new AssignmentModel(){ PrimaryId=5, TaskId = 3 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=6, TaskId = 4 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=7, TaskId = 4 , ResourceId=9}, - new AssignmentModel(){ PrimaryId=8, TaskId = 6 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=9, TaskId = 7 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=10, TaskId = 7 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=11, TaskId = 8 , ResourceId=12}, - new AssignmentModel(){ PrimaryId=12, TaskId = 8 , ResourceId=5}, - new AssignmentModel(){ PrimaryId=13, TaskId = 9 , ResourceId=12}, - new AssignmentModel(){ PrimaryId=14, TaskId = 9 , ResourceId=5} + new AssignmentModel(){ PrimaryId=1, TaskID = 2 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=2, TaskID = 2 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=3, TaskID = 3 , ResourceId=2}, + new AssignmentModel(){ PrimaryId=4, TaskID = 3 , ResourceId=3}, + new AssignmentModel(){ PrimaryId=5, TaskID = 3 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=6, TaskID = 4 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=7, TaskID = 4 , ResourceId=9}, + new AssignmentModel(){ PrimaryId=8, TaskID = 6 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=9, TaskID = 7 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=10, TaskID = 7 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=11, TaskID = 8 , ResourceId=12}, + new AssignmentModel(){ PrimaryId=12, TaskID = 8 , ResourceId=5}, + new AssignmentModel(){ PrimaryId=13, TaskID = 9 , ResourceId=12}, + new AssignmentModel(){ PrimaryId=14, TaskID = 9 , ResourceId=5} }; return assignments; } @@ -146,13 +143,13 @@ namespace BlazorGanttChart.Data return new List() { new TaskInfoModel() { Id = 1, Name = "Project initiation", StartDate = new DateTime(2021, 03, 28), EndDate = new DateTime(2021, 07, 28), TaskType ="FixedDuration", Work=128, Duration="4" }, - new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentId = 1, Duration="2", TaskType ="FixedDuration", Work=16 }, - new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentId = 1, Work=96, Duration="4", TaskType="FixedWork" }, - new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "1", Progress = 30, ParentId = 1, Work=16, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentID = 1, Duration="2", TaskType ="FixedDuration", Work=16 }, + new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentID = 1, Work=96, Duration="4", TaskType="FixedWork" }, + new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "1", Progress = 30, ParentID = 1, Work=16, TaskType="FixedWork" }, new TaskInfoModel() { Id = 5, Name = "Project estimation", StartDate = new DateTime(2021, 03, 29), EndDate = new DateTime(2021, 04, 2), TaskType="FixedDuration", Duration="4" }, - new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentId = 5, Work=30, TaskType="FixedWork" }, - new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentId = 5, TaskType="FixedWork", Work=48 }, - new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "2", ParentId = 5, Work=60, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentID = 5, Work=30, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentID = 5, TaskType="FixedWork", Work=48 }, + new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "2", ParentID = 5, Work=60, TaskType="FixedWork" }, new TaskInfoModel() { Id = 9, Name = "Sign contract", StartDate = new DateTime(2021, 03, 31), EndDate = new DateTime(2021, 04, 01), Duration="1", TaskType="FixedWork", Work=24 }, }; } @@ -160,10 +157,9 @@ namespace BlazorGanttChart.Data } {% endhighlight %} - {% endtabs %} -![Resource allocation](images/blazor-gantt-chart-resource.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrSWXXApVRHrrBk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Resource unit @@ -172,9 +168,7 @@ When defining the resource unit within the resource collection, it indicates the To illustrate this concept, the following code snippet demonstrates how to assign resources to specific tasks and map them in the Gantt chart, providing a clear overview of how resource units and maximum capacities are managed in task allocation. For more detailed information about work and resource units, you can refer to the [link](https://blazor.syncfusion.com/documentation/gantt-chart/work). {% tabs %} - -{% highlight razor %} - +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using BlazorGanttChart.Data @@ -182,10 +176,10 @@ To illustrate this concept, the following code snippet demonstrates how to assig + ParentID="@nameof(GanttModel.TaskInfoModel.ParentID)" Work="@nameof(GanttModel.TaskInfoModel.Work)" TaskType="@nameof(GanttModel.TaskInfoModel.TaskType)"> - + assignments = new List() { - new AssignmentModel(){ PrimaryId=1, TaskId = 2 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=2, TaskId = 2 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=3, TaskId = 3 , ResourceId=2}, - new AssignmentModel(){ PrimaryId=4, TaskId = 3 , ResourceId=3}, - new AssignmentModel(){ PrimaryId=5, TaskId = 3 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=6, TaskId = 4 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=7, TaskId = 4 , ResourceId=9}, - new AssignmentModel(){ PrimaryId=8, TaskId = 6 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=9, TaskId = 7 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=10, TaskId = 7 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=11, TaskId = 8 , ResourceId=12}, - new AssignmentModel(){ PrimaryId=12, TaskId = 8 , ResourceId=5}, - new AssignmentModel(){ PrimaryId=13, TaskId = 9 , ResourceId=12}, - new AssignmentModel(){ PrimaryId=14, TaskId = 9 , ResourceId=5} + new AssignmentModel(){ PrimaryId=1, TaskID = 2 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=2, TaskID = 2 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=3, TaskID = 3 , ResourceId=2}, + new AssignmentModel(){ PrimaryId=4, TaskID = 3 , ResourceId=3}, + new AssignmentModel(){ PrimaryId=5, TaskID = 3 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=6, TaskID = 4 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=7, TaskID = 4 , ResourceId=9}, + new AssignmentModel(){ PrimaryId=8, TaskID = 6 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=9, TaskID = 7 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=10, TaskID = 7 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=11, TaskID = 8 , ResourceId=12}, + new AssignmentModel(){ PrimaryId=12, TaskID = 8 , ResourceId=5}, + new AssignmentModel(){ PrimaryId=13, TaskID = 9 , ResourceId=12}, + new AssignmentModel(){ PrimaryId=14, TaskID = 9 , ResourceId=5} }; return assignments; } @@ -296,13 +289,13 @@ namespace BlazorGanttChart.Data return new List() { new TaskInfoModel() { Id = 1, Name = "Project initiation", StartDate = new DateTime(2021, 03, 28), EndDate = new DateTime(2021, 07, 28), TaskType ="FixedDuration", Work=128, Duration="4" }, - new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentId = 1, Duration="2", TaskType ="FixedDuration", Work=16 }, - new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentId = 1, Work=96, Duration="4", TaskType="FixedWork" }, - new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "1", Progress = 30, ParentId = 1, Work=16, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentID = 1, Duration="2", TaskType ="FixedDuration", Work=16 }, + new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentID = 1, Work=96, Duration="4", TaskType="FixedWork" }, + new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "1", Progress = 30, ParentID = 1, Work=16, TaskType="FixedWork" }, new TaskInfoModel() { Id = 5, Name = "Project estimation", StartDate = new DateTime(2021, 03, 29), EndDate = new DateTime(2021, 04, 2), TaskType="FixedDuration", Duration="4" }, - new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentId = 5, Work=30, TaskType="FixedWork" }, - new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentId = 5, TaskType="FixedWork", Work=48 }, - new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "2", ParentId = 5, Work=60, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentID = 5, Work=30, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentID = 5, TaskType="FixedWork", Work=48 }, + new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "2", ParentID = 5, Work=60, TaskType="FixedWork" }, new TaskInfoModel() { Id = 9, Name = "Sign contract", StartDate = new DateTime(2021, 03, 31), EndDate = new DateTime(2021, 04, 01), Duration="1", TaskType="FixedWork", Work=24 }, }; } @@ -310,10 +303,9 @@ namespace BlazorGanttChart.Data } {% endhighlight %} - {% endtabs %} -![Resource unit](images/blazor-gantt-chart-resource.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLoMttgpUetgLEW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Managing resources assignments in project view @@ -325,9 +317,7 @@ To edit resources directly through [cell editing](https://blazor.syncfusion.com/ {% tabs %} - -{% highlight razor %} - +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using BlazorGanttChart.Data @@ -335,10 +325,10 @@ To edit resources directly through [cell editing](https://blazor.syncfusion.com/ + ParentID="@nameof(GanttModel.TaskInfoModel.ParentID)" Work="@nameof(GanttModel.TaskInfoModel.Work)" TaskType="@nameof(GanttModel.TaskInfoModel.TaskType)"> - + assignments = new List() { - new AssignmentModel(){ PrimaryId=1, TaskId = 2 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=2, TaskId = 2 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=3, TaskId = 3 , ResourceId=2}, - new AssignmentModel(){ PrimaryId=4, TaskId = 3 , ResourceId=3}, - new AssignmentModel(){ PrimaryId=5, TaskId = 3 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=6, TaskId = 4 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=7, TaskId = 4 , ResourceId=9}, - new AssignmentModel(){ PrimaryId=8, TaskId = 6 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=9, TaskId = 7 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=10, TaskId = 7 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=11, TaskId = 8 , ResourceId=12}, - new AssignmentModel(){ PrimaryId=12, TaskId = 8 , ResourceId=5}, - new AssignmentModel(){ PrimaryId=13, TaskId = 9 , ResourceId=12}, - new AssignmentModel(){ PrimaryId=14, TaskId = 9 , ResourceId=5} + new AssignmentModel(){ PrimaryId=1, TaskID = 2 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=2, TaskID = 2 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=3, TaskID = 3 , ResourceId=2}, + new AssignmentModel(){ PrimaryId=4, TaskID = 3 , ResourceId=3}, + new AssignmentModel(){ PrimaryId=5, TaskID = 3 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=6, TaskID = 4 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=7, TaskID = 4 , ResourceId=9}, + new AssignmentModel(){ PrimaryId=8, TaskID = 6 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=9, TaskID = 7 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=10, TaskID = 7 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=11, TaskID = 8 , ResourceId=12}, + new AssignmentModel(){ PrimaryId=12, TaskID = 8 , ResourceId=5}, + new AssignmentModel(){ PrimaryId=13, TaskID = 9 , ResourceId=12}, + new AssignmentModel(){ PrimaryId=14, TaskID = 9 , ResourceId=5} }; return assignments; } @@ -449,13 +438,13 @@ namespace BlazorGanttChart.Data return new List() { new TaskInfoModel() { Id = 1, Name = "Project initiation", StartDate = new DateTime(2021, 03, 28), EndDate = new DateTime(2021, 07, 28), TaskType ="FixedDuration", Work=128, Duration="4" }, - new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentId = 1, Duration="2", TaskType ="FixedDuration", Work=16 }, - new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentId = 1, Work=96, Duration="4", TaskType="FixedWork" }, - new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "1", Progress = 30, ParentId = 1, Work=16, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentID = 1, Duration="2", TaskType ="FixedDuration", Work=16 }, + new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentID = 1, Work=96, Duration="4", TaskType="FixedWork" }, + new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "1", Progress = 30, ParentID = 1, Work=16, TaskType="FixedWork" }, new TaskInfoModel() { Id = 5, Name = "Project estimation", StartDate = new DateTime(2021, 03, 29), EndDate = new DateTime(2021, 04, 2), TaskType="FixedDuration", Duration="4" }, - new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentId = 5, Work=30, TaskType="FixedWork" }, - new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentId = 5, TaskType="FixedWork", Work=48 }, - new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "2", ParentId = 5, Work=60, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentID = 5, Work=30, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentID = 5, TaskType="FixedWork", Work=48 }, + new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "2", ParentID = 5, Work=60, TaskType="FixedWork" }, new TaskInfoModel() { Id = 9, Name = "Sign contract", StartDate = new DateTime(2021, 03, 31), EndDate = new DateTime(2021, 04, 01), Duration="1", TaskType="FixedWork", Work=24 }, }; } @@ -463,31 +452,27 @@ namespace BlazorGanttChart.Data } {% endhighlight %} - {% endtabs %} - -![Resource edit in cell editing](images/blazor-gantt-chart-resource-cell-edit.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrIMDtbHGXirMzL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Through dialog box In the resource tab of the [add/edit dialog box](https://blazor.syncfusion.com/documentation/gantt-chart/editing-tasks#dialog-editing) within the Gantt chart, resources can be conveniently added or removed using the checkboxes provided in the grid rows of the resource tab. Clicking on a checkbox item in a grid row adds the corresponding resource to the task, while unchecking it removes the resource. Also, the resource tab allows editing the unit value for individual resources. {% tabs %} - -{% highlight razor %} - - +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt @using BlazorGanttChart.Data + ParentID="@nameof(GanttModel.TaskInfoModel.ParentID)" Work="@nameof(GanttModel.TaskInfoModel.Work)" TaskType="@nameof(GanttModel.TaskInfoModel.TaskType)"> - + assignments = new List() { - new AssignmentModel(){ PrimaryId=1, TaskId = 2 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=2, TaskId = 2 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=3, TaskId = 3 , ResourceId=2}, - new AssignmentModel(){ PrimaryId=4, TaskId = 3 , ResourceId=3}, - new AssignmentModel(){ PrimaryId=5, TaskId = 3 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=6, TaskId = 4 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=7, TaskId = 4 , ResourceId=9}, - new AssignmentModel(){ PrimaryId=8, TaskId = 6 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=9, TaskId = 7 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=10, TaskId = 7 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=11, TaskId = 8 , ResourceId=12}, - new AssignmentModel(){ PrimaryId=12, TaskId = 8 , ResourceId=5}, - new AssignmentModel(){ PrimaryId=13, TaskId = 9 , ResourceId=12}, - new AssignmentModel(){ PrimaryId=14, TaskId = 9 , ResourceId=5} + new AssignmentModel(){ PrimaryId=1, TaskID = 2 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=2, TaskID = 2 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=3, TaskID = 3 , ResourceId=2}, + new AssignmentModel(){ PrimaryId=4, TaskID = 3 , ResourceId=3}, + new AssignmentModel(){ PrimaryId=5, TaskID = 3 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=6, TaskID = 4 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=7, TaskID = 4 , ResourceId=9}, + new AssignmentModel(){ PrimaryId=8, TaskID = 6 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=9, TaskID = 7 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=10, TaskID = 7 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=11, TaskID = 8 , ResourceId=12}, + new AssignmentModel(){ PrimaryId=12, TaskID = 8 , ResourceId=5}, + new AssignmentModel(){ PrimaryId=13, TaskID = 9 , ResourceId=12}, + new AssignmentModel(){ PrimaryId=14, TaskID = 9 , ResourceId=5} }; return assignments; } @@ -603,13 +587,13 @@ namespace BlazorGanttChart.Data return new List() { new TaskInfoModel() { Id = 1, Name = "Project initiation", StartDate = new DateTime(2021, 03, 28), EndDate = new DateTime(2021, 07, 28), TaskType ="FixedDuration", Work=128, Duration="4" }, - new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentId = 1, Duration="2", TaskType ="FixedDuration", Work=16 }, - new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentId = 1, Work=96, Duration="4", TaskType="FixedWork" }, - new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "1", Progress = 30, ParentId = 1, Work=16, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentID = 1, Duration="2", TaskType ="FixedDuration", Work=16 }, + new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentID = 1, Work=96, Duration="4", TaskType="FixedWork" }, + new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "1", Progress = 30, ParentID = 1, Work=16, TaskType="FixedWork" }, new TaskInfoModel() { Id = 5, Name = "Project estimation", StartDate = new DateTime(2021, 03, 29), EndDate = new DateTime(2021, 04, 2), TaskType="FixedDuration", Duration="4" }, - new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentId = 5, Work=30, TaskType="FixedWork" }, - new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentId = 5, TaskType="FixedWork", Work=48 }, - new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "2", ParentId = 5, Work=60, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentID = 5, Work=30, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentID = 5, TaskType="FixedWork", Work=48 }, + new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "2", ParentID = 5, Work=60, TaskType="FixedWork" }, new TaskInfoModel() { Id = 9, Name = "Sign contract", StartDate = new DateTime(2021, 03, 31), EndDate = new DateTime(2021, 04, 01), Duration="1", TaskType="FixedWork", Work=24 }, }; } @@ -617,10 +601,9 @@ namespace BlazorGanttChart.Data } {% endhighlight %} - {% endtabs %} -![Resource edit in dialogbox](images/blazor-gantt-chart-resource-dialogbox.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrIitXbHGgBFGPd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Through method @@ -646,8 +629,7 @@ These methods offer a convenient way to add, remove, and update task resources i * Retrieve the resource assignments of the 1st index record. {% tabs %} - -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using BlazorGanttChart.Data @@ -662,10 +644,10 @@ These methods offer a convenient way to add, remove, and update task resources i + ParentID="@nameof(GanttModel.TaskInfoModel.ParentID)" Work="@nameof(GanttModel.TaskInfoModel.Work)" TaskType="@nameof(GanttModel.TaskInfoModel.TaskType)"> - + (data); + Console.WriteLine(resources); } private void GetAssignment() { GanttModel.TaskInfoModel data = new GanttModel.TaskInfoModel() { Id = 2 }; var assignments = ganttInstance.GetResourceAssignments(data); + Console.WriteLine(assignments); } private async void AddNewRecord() { - var record = new GanttModel.AssignmentModel() { PrimaryId = 19, TaskId = 10, ResourceId = 8 }; + var record = new GanttModel.AssignmentModel() { PrimaryId = 19, TaskID = 10, ResourceId = 8 }; GanttModel.TaskInfoModel data = new GanttModel.TaskInfoModel() { Id = 10, Name = "NewRecord", StartDate = new DateTime(2021, 03, 29), Duration = "2", TaskType="FixedDuration" }; await ganttInstance.AddRecordAsync(data, 0, null, record); } } {% endhighlight %} - {% highlight c# tabtitle="GanttModel.cs" %} namespace BlazorGanttChart.Data @@ -741,27 +724,27 @@ namespace BlazorGanttChart.Data public class ResourceInfoModel { public int Id { get; set; } - public string? Name { get; set; } + public string Name { get; set; } public double MaxUnit { get; set; } } public class TaskInfoModel { public int Id { get; set; } - public string? Name { get; set; } - public string? TaskType { get; set; } + public string Name { get; set; } + public string TaskType { get; set; } public DateTime StartDate { get; set; } public DateTime? EndDate { get; set; } - public string? Duration { get; set; } + public string Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } public double? Work { get; set; } } public class AssignmentModel { public int PrimaryId { get; set; } - public int TaskId { get; set; } + public int TaskID { get; set; } public int ResourceId { get; set; } public double? Unit { get; set; } } @@ -786,20 +769,20 @@ namespace BlazorGanttChart.Data { List assignments = new List() { - new AssignmentModel(){ PrimaryId=1, TaskId = 2 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=2, TaskId = 2 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=3, TaskId = 3 , ResourceId=2}, - new AssignmentModel(){ PrimaryId=4, TaskId = 3 , ResourceId=3}, - new AssignmentModel(){ PrimaryId=5, TaskId = 3 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=6, TaskId = 4 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=7, TaskId = 4 , ResourceId=9}, - new AssignmentModel(){ PrimaryId=8, TaskId = 6 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=9, TaskId = 7 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=10, TaskId = 7 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=11, TaskId = 8 , ResourceId=12}, - new AssignmentModel(){ PrimaryId=12, TaskId = 8 , ResourceId=5}, - new AssignmentModel(){ PrimaryId=13, TaskId = 9 , ResourceId=12}, - new AssignmentModel(){ PrimaryId=14, TaskId = 9 , ResourceId=5} + new AssignmentModel(){ PrimaryId=1, TaskID = 2 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=2, TaskID = 2 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=3, TaskID = 3 , ResourceId=2}, + new AssignmentModel(){ PrimaryId=4, TaskID = 3 , ResourceId=3}, + new AssignmentModel(){ PrimaryId=5, TaskID = 3 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=6, TaskID = 4 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=7, TaskID = 4 , ResourceId=9}, + new AssignmentModel(){ PrimaryId=8, TaskID = 6 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=9, TaskID = 7 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=10, TaskID = 7 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=11, TaskID = 8 , ResourceId=12}, + new AssignmentModel(){ PrimaryId=12, TaskID = 8 , ResourceId=5}, + new AssignmentModel(){ PrimaryId=13, TaskID = 9 , ResourceId=12}, + new AssignmentModel(){ PrimaryId=14, TaskID = 9 , ResourceId=5} }; return assignments; } @@ -809,24 +792,24 @@ namespace BlazorGanttChart.Data return new List() { new TaskInfoModel() { Id = 1, Name = "Project initiation", StartDate = new DateTime(2021, 03, 28), EndDate = new DateTime(2021, 07, 28), TaskType ="FixedDuration", Work=128, Duration="4" }, - new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentId = 1, Duration="2", TaskType ="FixedDuration", Work=16 }, - new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentId = 1, Work=96, Duration="4", TaskType="FixedWork" }, - new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "1", Progress = 30, ParentId = 1, Work=16, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentID = 1, Duration="2", TaskType ="FixedDuration", Work=16 }, + new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentID = 1, Work=96, Duration="4", TaskType="FixedWork" }, + new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "1", Progress = 30, ParentID = 1, Work=16, TaskType="FixedWork" }, new TaskInfoModel() { Id = 5, Name = "Project estimation", StartDate = new DateTime(2021, 03, 29), EndDate = new DateTime(2021, 04, 2), TaskType="FixedDuration", Duration="4" }, - new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentId = 5, Work=30, TaskType="FixedWork" }, - new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentId = 5, TaskType="FixedWork", Work=48 }, - new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "2", ParentId = 5, Work=60, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentID = 5, Work=30, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentID = 5, TaskType="FixedWork", Work=48 }, + new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "2", ParentID = 5, Work=60, TaskType="FixedWork" }, new TaskInfoModel() { Id = 9, Name = "Sign contract", StartDate = new DateTime(2021, 03, 31), EndDate = new DateTime(2021, 04, 01), Duration="1", TaskType="FixedWork", Work=24 }, }; } } } -{% endhighlight %} +{% endhighlight %} {% endtabs %} -![Resource method in Gantt Chart](images/blazor-gantt-chart-resource-method.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVoCDDbxmwrcIuF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Resource event @@ -835,8 +818,7 @@ The [ResourceAssignmentChanging](https://help.syncfusion.com/cr/blazor/Syncfusio In the code snippet below, the `ResourceAssignmentChanging` event is used to display a customized message when performing resource add, remove, and update actions. Additionally, it prevents resource deletion for the 1st index task. {% tabs %} - -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using BlazorGanttChart.Data @@ -845,10 +827,10 @@ In the code snippet below, the `ResourceAssignmentChanging` event is used to dis + ParentID="@nameof(GanttModel.TaskInfoModel.ParentID)" Work="@nameof(GanttModel.TaskInfoModel.Work)" TaskType="@nameof(GanttModel.TaskInfoModel.TaskType)" Progress="@nameof(GanttModel.TaskInfoModel.Progress)"> - + @@ -891,7 +873,7 @@ In the code snippet below, the `ResourceAssignmentChanging` event is used to dis { foreach(GanttModel.AssignmentModel assignment in args.DeletedResources) { - if (assignment.TaskId == 2) + if (assignment.TaskID == 2) { assignmentEventMessage = "The deleted resource action is canceled!"; args.Cancel = true; @@ -903,7 +885,6 @@ In the code snippet below, the `ResourceAssignmentChanging` event is used to dis } {% endhighlight %} - {% highlight c# tabtitle="GanttModel.cs" %} namespace BlazorGanttChart.Data @@ -926,14 +907,14 @@ namespace BlazorGanttChart.Data public DateTime? EndDate { get; set; } public string? Duration { get; set; } public int Progress { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } public double? Work { get; set; } } public class AssignmentModel { public int PrimaryId { get; set; } - public int TaskId { get; set; } + public int TaskID { get; set; } public int ResourceId { get; set; } public double? Unit { get; set; } } @@ -958,20 +939,20 @@ namespace BlazorGanttChart.Data { List assignments = new List() { - new AssignmentModel(){ PrimaryId=1, TaskId = 2 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=2, TaskId = 2 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=3, TaskId = 3 , ResourceId=2}, - new AssignmentModel(){ PrimaryId=4, TaskId = 3 , ResourceId=3}, - new AssignmentModel(){ PrimaryId=5, TaskId = 3 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=6, TaskId = 4 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=7, TaskId = 4 , ResourceId=9}, - new AssignmentModel(){ PrimaryId=8, TaskId = 6 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=9, TaskId = 7 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=10, TaskId = 7 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=11, TaskId = 8 , ResourceId=12}, - new AssignmentModel(){ PrimaryId=12, TaskId = 8 , ResourceId=5}, - new AssignmentModel(){ PrimaryId=13, TaskId = 9 , ResourceId=12}, - new AssignmentModel(){ PrimaryId=14, TaskId = 9 , ResourceId=5} + new AssignmentModel(){ PrimaryId=1, TaskID = 2 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=2, TaskID = 2 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=3, TaskID = 3 , ResourceId=2}, + new AssignmentModel(){ PrimaryId=4, TaskID = 3 , ResourceId=3}, + new AssignmentModel(){ PrimaryId=5, TaskID = 3 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=6, TaskID = 4 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=7, TaskID = 4 , ResourceId=9}, + new AssignmentModel(){ PrimaryId=8, TaskID = 6 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=9, TaskID = 7 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=10, TaskID = 7 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=11, TaskID = 8 , ResourceId=12}, + new AssignmentModel(){ PrimaryId=12, TaskID = 8 , ResourceId=5}, + new AssignmentModel(){ PrimaryId=13, TaskID = 9 , ResourceId=12}, + new AssignmentModel(){ PrimaryId=14, TaskID = 9 , ResourceId=5} }; return assignments; } @@ -981,13 +962,13 @@ namespace BlazorGanttChart.Data return new List() { new TaskInfoModel() { Id = 1, Name = "Project initiation", StartDate = new DateTime(2021, 03, 28), EndDate = new DateTime(2021, 07, 28), TaskType ="FixedDuration", Work=128, Duration="4" }, - new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentId = 1, Duration="3", TaskType ="FixedDuration", Work=16 }, - new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentId = 1, Work=96, Duration="4", TaskType="FixedWork" }, - new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "4", Progress = 30, ParentId = 1, Work=16, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentID = 1, Duration="3", TaskType ="FixedDuration", Work=16 }, + new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentID = 1, Work=96, Duration="4", TaskType="FixedWork" }, + new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "4", Progress = 30, ParentID = 1, Work=16, TaskType="FixedWork" }, new TaskInfoModel() { Id = 5, Name = "Project estimation", StartDate = new DateTime(2021, 03, 29), EndDate = new DateTime(2021, 04, 2), TaskType="FixedDuration", Duration="4" }, - new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentId = 5, Work=30, TaskType="FixedWork" }, - new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentId = 5, TaskType="FixedWork", Work=48 }, - new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "4", ParentId = 5, Work=60, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentID = 5, Work=30, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentID = 5, TaskType="FixedWork", Work=48 }, + new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "4", ParentID = 5, Work=60, TaskType="FixedWork" }, new TaskInfoModel() { Id = 9, Name = "Sign contract", StartDate = new DateTime(2021, 03, 31), EndDate = new DateTime(2021, 04, 01), Duration="4", TaskType="FixedWork", Work=24 }, }; } @@ -995,18 +976,16 @@ namespace BlazorGanttChart.Data } {% endhighlight %} - {% endtabs %} -![Resource event in Gantt Chart](images/blazor-gantt-chart-resource-event.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLSWXXbwXBuUvBu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Custom taskbar styling using template The taskbar appearance can be customized by using the [TaskbarTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTemplates-1.html#Syncfusion_Blazor_Gantt_GanttTemplates_1_TaskbarTemplate) property. In the code snippet below, the child tasks are customized based on template context data, with the resource name added inside each child taskbar, and the taskbar colors are changed based on task resources. {% tabs %} - -{% highlight razor %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Gantt @using BlazorGanttChart.Data @@ -1014,10 +993,10 @@ The taskbar appearance can be customized by using the [TaskbarTemplate](https:// + ParentID="@nameof(GanttModel.TaskInfoModel.ParentID)" Work="@nameof(GanttModel.TaskInfoModel.Work)" TaskType="@nameof(GanttModel.TaskInfoModel.TaskType)"> - + assignments = new List() { - new AssignmentModel(){ PrimaryId=1, TaskId = 2 , ResourceId=1, Unit=70}, - new AssignmentModel(){ PrimaryId=2, TaskId = 2 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=3, TaskId = 3 , ResourceId=2}, - new AssignmentModel(){ PrimaryId=4, TaskId = 3 , ResourceId=3}, - new AssignmentModel(){ PrimaryId=5, TaskId = 3 , ResourceId=6}, - new AssignmentModel(){ PrimaryId=6, TaskId = 4 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=7, TaskId = 4 , ResourceId=9}, - new AssignmentModel(){ PrimaryId=8, TaskId = 6 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=9, TaskId = 7 , ResourceId=4}, - new AssignmentModel(){ PrimaryId=10, TaskId = 7 , ResourceId=8}, - new AssignmentModel(){ PrimaryId=11, TaskId = 8 , ResourceId=12}, - new AssignmentModel(){ PrimaryId=12, TaskId = 8 , ResourceId=5}, - new AssignmentModel(){ PrimaryId=13, TaskId = 9 , ResourceId=12}, - new AssignmentModel(){ PrimaryId=14, TaskId = 9 , ResourceId=5} + new AssignmentModel(){ PrimaryId=1, TaskID = 2 , ResourceId=1, Unit=70}, + new AssignmentModel(){ PrimaryId=2, TaskID = 2 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=3, TaskID = 3 , ResourceId=2}, + new AssignmentModel(){ PrimaryId=4, TaskID = 3 , ResourceId=3}, + new AssignmentModel(){ PrimaryId=5, TaskID = 3 , ResourceId=6}, + new AssignmentModel(){ PrimaryId=6, TaskID = 4 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=7, TaskID = 4 , ResourceId=9}, + new AssignmentModel(){ PrimaryId=8, TaskID = 6 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=9, TaskID = 7 , ResourceId=4}, + new AssignmentModel(){ PrimaryId=10, TaskID = 7 , ResourceId=8}, + new AssignmentModel(){ PrimaryId=11, TaskID = 8 , ResourceId=12}, + new AssignmentModel(){ PrimaryId=12, TaskID = 8 , ResourceId=5}, + new AssignmentModel(){ PrimaryId=13, TaskID = 9 , ResourceId=12}, + new AssignmentModel(){ PrimaryId=14, TaskID = 9 , ResourceId=5} }; return assignments; } @@ -1186,13 +1164,13 @@ namespace BlazorGanttChart.Data return new List() { new TaskInfoModel() { Id = 1, Name = "Project initiation", StartDate = new DateTime(2021, 03, 28), EndDate = new DateTime(2021, 07, 28), TaskType ="FixedDuration", Work=128, Duration="4" }, - new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentId = 1, Duration="3", TaskType ="FixedDuration", Work=16 }, - new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentId = 1, Work=96, Duration="4", TaskType="FixedWork" }, - new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "4", Progress = 30, ParentId = 1, Work=16, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 2, Name = "Identify site location", StartDate = new DateTime(2021, 03, 29), Progress = 30, ParentID = 1, Duration="3", TaskType ="FixedDuration", Work=16 }, + new TaskInfoModel() { Id = 3, Name = "Perform soil test", StartDate = new DateTime(2021, 03, 29), ParentID = 1, Work=96, Duration="4", TaskType="FixedWork" }, + new TaskInfoModel() { Id = 4, Name = "Soil test approval", StartDate = new DateTime(2021, 03, 29), Duration = "4", Progress = 30, ParentID = 1, Work=16, TaskType="FixedWork" }, new TaskInfoModel() { Id = 5, Name = "Project estimation", StartDate = new DateTime(2021, 03, 29), EndDate = new DateTime(2021, 04, 2), TaskType="FixedDuration", Duration="4" }, - new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentId = 5, Work=30, TaskType="FixedWork" }, - new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentId = 5, TaskType="FixedWork", Work=48 }, - new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "4", ParentId = 5, Work=60, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 6, Name = "Develop floor plan for estimation", StartDate = new DateTime(2021, 03, 29), Duration = "3", Progress = 30, ParentID = 5, Work=30, TaskType="FixedWork" }, + new TaskInfoModel() { Id = 7, Name = "List materials", StartDate = new DateTime(2021, 04, 01), Duration = "3", Progress = 30, ParentID = 5, TaskType="FixedWork", Work=48 }, + new TaskInfoModel() { Id = 8, Name = "Estimation approval", StartDate = new DateTime(2021, 04, 01), Duration = "4", ParentID = 5, Work=60, TaskType="FixedWork" }, new TaskInfoModel() { Id = 9, Name = "Sign contract", StartDate = new DateTime(2021, 03, 31), EndDate = new DateTime(2021, 04, 01), Duration="4", TaskType="FixedWork", Work=24 }, }; } @@ -1200,11 +1178,9 @@ namespace BlazorGanttChart.Data } {% endhighlight %} - {% endtabs %} - -![Custom taskbar styling in Gantt Chart](images/blazor-gantt-chart-resource-taskbar-custom.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htByMZNFcjMMJqxC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## See also