From cc1f2d66a196893fb40057f3c32b8e5c979ee127 Mon Sep 17 00:00:00 2001 From: JamunaSundaramSF3699 Date: Wed, 29 Oct 2025 11:06:47 +0530 Subject: [PATCH 1/2] documentation(988975): Updated Blazor topic. --- blazor/gantt-chart/excel-export.md | 715 +++++++++++++++++++++--- blazor/gantt-chart/task-dependencies.md | 57 +- blazor/gantt-chart/timezone.md | 18 +- blazor/gantt-chart/virtualization.md | 26 +- 4 files changed, 692 insertions(+), 124 deletions(-) diff --git a/blazor/gantt-chart/excel-export.md b/blazor/gantt-chart/excel-export.md index f2d53a6b5e..f808235610 100644 --- a/blazor/gantt-chart/excel-export.md +++ b/blazor/gantt-chart/excel-export.md @@ -9,19 +9,26 @@ documentation: ug # Excel Export in Blazor Gantt Chart Component -The excel export allows exporting GanttChart data to Excel and CSV formats. You need to use the **ExcelExportAsync** and **CsvExportAsync** method for exporting. To enable Excel export in the Gantt chart, set the [AllowExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowExcelExport) property as true. +The Syncfusion Blazor Gantt Chart component supports exporting project data to Excel and CSV formats, enabling seamless sharing, reporting, and offline analysis. + +To enable Excel or CSV export functionality, set the [AllowExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowExcelExport) property to **true**. + +You can trigger export operations using the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) methods, typically within the [OnToolbarClick](https://blazor.syncfusion.com/documentation/gantt-chart/events#ontoolbarclick) event. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - + @code{ public SfGantt Gantt; private List TaskCollection { get; set; } + public void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { if (args.Item.Id == "GanttContainer_excelexport") @@ -40,14 +47,88 @@ The excel export allows exporting GanttChart data to Excel and CSV formats. You 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[] ResourceId { get; set; } + } + + public static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, Predecessor="2", }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, Predecessor="3", }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 10), EndDate = new DateTime(2022, 01, 17), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, Predecessor="4", }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, Predecessor="6", }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, Predecessor="7", } + }; + return Tasks; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLSWtCyhZLeNCwH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Binding custom data source while exporting + +You can bind a custom data source for Excel or CSV export in the Blazor Gantt component by assigning it dynamically before the export begins. To achieve this, set the required data to the `DataSource` property within the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) configuration. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Navigations + + + + + + + +@code { + public SfGantt Gantt; + private List TaskCollection { get; set; } + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + private async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "GanttContainer_excelexport") + { + ExcelExportProperties exportProperties = new ExcelExportProperties + { + DataSource = TaskCollection.Take(4).ToList() + }; + await Gantt.ExportToExcelAsync(exportProperties); + } + } + + public class TaskData + { + 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 int[] ResourceId { get; set; } } @@ -55,35 +136,185 @@ The excel export allows exporting GanttChart data to Excel and CSV formats. You { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentId = 1, Predecessor="2", }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, Predecessor="3", }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentId = 5, Predecessor="4", }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentId = 5, Predecessor="6", }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentId = 5, Predecessor="7", } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, Predecessor="2", }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, Predecessor="3", }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 10), EndDate = new DateTime(2022, 01, 17), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, Predecessor="4", }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, Predecessor="6", }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, Predecessor="7", } }; return Tasks; } - } -``` +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBIsjBvUszGyDBd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + +## Export Gantt Chart Data + +To export either the records visible on the current page or all records from the Gantt Chart to Excel or CSV, set the `ExcelExportProperties.ExportType` property. + +- **CurrentPage**: Exports only the records displayed on the current Gantt page. +- **AllPages**: Exports all records from the Gantt Chart. + +In the following example, [EnableRowVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRowVirtualization) is enabled, and the export type is applied based on the selected value from a dropdown. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Navigations +@using Syncfusion.Blazor.DropDowns + + +
+ + + + +
+ + + + + + + + + + + + + + + + +@code { + public SfGantt Gantt; + private List TaskCollection { get; set; } + private string SelectedExportType = "CurrentPage"; + List DropDownValue = new List + { + new DropDownOrder { Text = "CurrentPage", Value = "CurrentPage" }, + new DropDownOrder { Text = "AllPages", Value = "AllPages" }, + }; + + private async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "GanttContainer_excelexport") + { + ExcelExportProperties exportProperties = new ExcelExportProperties + { + ExportType = SelectedExportType == "AllPages" ? Syncfusion.Blazor.Grids.ExportType.AllPages : Syncfusion.Blazor.Grids.ExportType.CurrentPage + }; + + await Gantt.ExportToExcelAsync(exportProperties); + } + } + + protected override void OnInitialized() + { + this.TaskCollection = VirtualData.GetTreeVirtualData(500); + } + + public class VirtualData + { + public static List GetTreeVirtualData(int count) + { + List DataCollection = new List(); + Random rand = new Random(); + var x = 0; + int duration = 0; + DateTime startDate = new DateTime(2000, 1, 5); + DateTime endDate = new DateTime(2000, 1, 12); + string[] assignee = { "Allison Janney", "Bryan Fogel", "Richard King", "Alex Gibson" }; + string[] reporter = { "James Ivory", "Jordan Peele", "Guillermo del Toro", "Gary Oldman" }; + for (var i = 1; i <= count / 5; i++) + { + var name = rand.Next(0, 100); + TaskData Parent = new TaskData() + { + ID = ++x, + TaskName = "Task " + x, + StartDate = startDate, + EndDate = startDate.AddDays(26), + Duration = "20", + Assignee = "Mark Bridges", + Reporter = "Kobe Bryant", + Progress = 50, + }; + DataCollection.Add(Parent); + for (var j = 1; j <= 4; j++) + { + startDate = startDate.AddDays(j == 1 ? 0 : duration + 2); + duration = 5; + DataCollection.Add(new TaskData() + { + ID = ++x, + TaskName = "Task " + x, + StartDate = startDate, + EndDate = startDate.AddDays(5), + Duration = duration.ToString(), + Assignee = assignee[j - 1], + Reporter = reporter[j - 1], + Progress = 50, + ParentID = Parent.ID, + }); + } + } + return DataCollection; + } + } + + public class TaskData + { + public int ID { get; set; } + public string TaskName { get; set; } + public DateTime? StartDate { get; set; } + public DateTime? EndDate { get; set; } + public string Duration { get; set; } + public string Assignee { get; set; } + public string Reporter { get; set; } + public int Progress { get; set; } + public int? ParentID { get; set; } + public string Predecessor { get; set; } + } + + public class DropDownOrder + { + public string Text { get; set; } + public string Value { get; set; } + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBIiNBPgdsTpwjo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Customize the excel export -The excel export provides an option to customize mapping of the gantt chart to excel document. +You can customize the Excel or CSV export functionality in the Gantt Chart component using the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) configuration object. -### Export hidden columns +### Include hidden columns in export -The excel export provides an option to export hidden columns of gantt chart by defining **IncludeHiddenColumn** as **true**. +To include hidden columns during Excel or CSV export in the Gantt Chart component, set [ExcelExportProperties.IncludeHiddenColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_IncludeHiddenColumn) to **true** in the export configuration. This ensures that hidden columns are included in the exported data. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt - + - + @@ -100,6 +331,7 @@ The excel export provides an option to export hidden columns of gantt chart by d ExportProperties.IncludeHiddenColumn = true; if (args.Item.Id == "GanttContainer_excelexport") { + Console.WriteLine(args.Item.Id); this.Gantt.ExportToExcelAsync(ExportProperties); } else if (args.Item.Id == "GanttContainer_csvexport") @@ -114,41 +346,350 @@ The excel export provides an option to export hidden columns of gantt chart by d 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, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentId = 1, }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentId = 5, }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentId = 5, }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentId = 5, } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, } }; return Tasks; } } -``` -### Theme +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVoMtWIBjILrMBQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Add header and footer to export -The Excel export also provides an option to include custom theme for exported Excel document. To apply theme in exported Excel, define the `Theme` in [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_). +To add header and footer content to exported Excel or CSV files in the Gantt component, configure the `Header` and `Footer` properties within [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) during the [OnToolbarClick](https://blazor.syncfusion.com/documentation/gantt-chart/events#ontoolbarclick) event. This allows you to define custom content that appears at the top and bottom of the exported document. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Navigations + + + + + + + +@code { + public SfGantt Gantt; + private List TaskCollection { get; set; } + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + private async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "GanttContainer_excelexport") + { + var exportProperties = new ExcelExportProperties(); + var header = new ExcelHeader { HeaderRows = 8 }; + + // Initialize the list of rows for the header. + header.Rows = new List + { + // Add a new row to the header with specific cells. + new ExcelRow + { + // Define the cells within this row. + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "Northwind Traders", + Style = new ExcelStyle + { + FontColor = "#C67878", + FontSize = 20, + HAlign = ExcelHorizontalAlign.Center, + Bold = true + } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "2501 Aerial Center Parkway", + Style = new ExcelStyle + { + FontColor = "#C67878", + FontSize = 15, + HAlign = ExcelHorizontalAlign.Center, + Bold = true + } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "Suite 200 Morrisville, NC 27560 USA", + Style = new ExcelStyle + { + FontColor = "#C67878", + FontSize = 15, + HAlign =ExcelHorizontalAlign.Center, + Bold = true + } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "Tel +1 888.936.8638 Fax +1 919.573.0306", + Style = new ExcelStyle + { + FontColor = "#C67878", + FontSize = 15, + HAlign = ExcelHorizontalAlign.Center, + Bold = true + } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Hyperlink = new Hyperlink { Target = "https://www.northwind.com/", DisplayText = "www.northwind.com" }, + Style = new ExcelStyle { HAlign = ExcelHorizontalAlign.Center } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Hyperlink = new Hyperlink { Target = "mailto:support@northwind.com" }, + Style = new ExcelStyle { HAlign = ExcelHorizontalAlign.Center } + } + } + }, + new ExcelRow { }, + new ExcelRow { } + }; + + + var footer = new ExcelFooter { FooterRows = 4 }; + + // Initialize the list of footer rows. + footer.Rows = new List + { + new ExcelRow { }, + new ExcelRow { }, + new ExcelRow + { + // Define the cells within this row. + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "Thank you for your business!", + Style = new ExcelStyle { HAlign = ExcelHorizontalAlign.Center, Bold = true } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "!Visit Again!", + Style = new ExcelStyle { HAlign = ExcelHorizontalAlign.Center, Bold = true } + } + } + } + }; + exportProperties.Header = header; + exportProperties.Footer = footer; + await Gantt.ExportToExcelAsync(exportProperties); + } + } + + public class TaskData + { + 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[] ResourceId { get; set; } + } + + public static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, Predecessor="2", }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, Predecessor="3", }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 10), EndDate = new DateTime(2022, 01, 17), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, Predecessor="4", }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, Predecessor="6", }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, Predecessor="7", } + }; + return Tasks; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLeMDVlqgbyewep?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Add additional worksheets to Excel document while exporting + +To add additional worksheets during export, follow the steps below: + +- Create a new instance of the **Workbook** class and assign it to the `Workbook` property of [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) . +- Use `Worksheets.Add` to append new worksheets to the workbook. +- Set the `GridSheetIndex` property to specify the worksheet index where the Gantt data should be placed. +- Trigger the export operation using [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_). + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Navigations +@using Syncfusion.ExcelExport + + + + + + + +@code { + public SfGantt Gantt; + private List TaskCollection { get; set; } + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + + private async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "GanttContainer_excelexport") + { + ExcelExportProperties exportProperties = new ExcelExportProperties(); + // Add a new workbook to the Excel document that contains only 1 worksheet. + exportProperties.Workbook = new Workbook(); + // Add additional worksheets. + exportProperties.Workbook.Worksheets.Add(); + exportProperties.Workbook.Worksheets.Add(); + // Define the Gridsheet index where Grid data must be exported. + exportProperties.GridSheetIndex = 0; + await Gantt.ExportToExcelAsync(exportProperties); + } + } + + public class TaskData + { + 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[] ResourceId { get; set; } + } + + public static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, Predecessor="2", }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, Predecessor="3", }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 10), EndDate = new DateTime(2022, 01, 17), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, Predecessor="4", }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, Predecessor="6", }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, Predecessor="7", } + }; + return Tasks; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBoCjhPgJqqEzmg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Apply font and color themes + +To apply a custom theme, set the [Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Theme) property within [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_). This allows customization of styles for the following sections in the exported file. + +- **caption**: Defines the style for the caption, typically used for titles or descriptions at the top of the sheet. +- **header**: Specifies the styling for column headers. +- **record**: Applies formatting to the data rows exported from the Gantt Chart. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt + - + @@ -175,6 +716,7 @@ The Excel export also provides an option to include custom theme for exported Ex this.Gantt.ExportToExcelAsync(ExportProperties); } } + protected override void OnInitialized() { this.TaskCollection = GetTaskCollection(); @@ -182,14 +724,14 @@ The Excel export also provides an option to include custom theme for exported 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 string Predecessor { get; set; } - public int? ParentId { get; set; } + public int? ParentID { get; set; } public int[] ResourceId { get; set; } } @@ -197,67 +739,90 @@ The Excel export also provides an option to include custom theme for exported Ex { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentId = 1, Predecessor="2", }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, Predecessor="3", }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentId = 5, Predecessor="4", }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentId = 5, Predecessor="6", }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentId = 5, Predecessor="7", } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, Predecessor="2", }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, Predecessor="3", }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 10), EndDate = new DateTime(2022, 01, 17), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, Predecessor="4", }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, Predecessor="6", }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, Predecessor="7", } }; return Tasks; } } -``` +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLeMtWehZlqyHnz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> By default, material theme is applied to the exported Excel document. -### File name for exported document +### Set custom file name + +To assign a custom name to the exported Excel or CSV file in the Gantt Chart component, set the [FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_FileName) property within the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) configuration. This configuration determines the filename applied during the export process. -You can assign the file name for the exported document by defining **FileName** property in excel export properties. +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} -```cshtml @using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Navigations + +
+ + +
- + + -@code{ +@code { public SfGantt Gantt; + public string FileName { get; set; } = string.Empty; private List TaskCollection { get; set; } + + protected override void OnInitialized() + { + TaskCollection = GetTaskCollection(); + } + public void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) { + var exportFileName = !string.IsNullOrWhiteSpace(FileName) ? FileName : "ExportedData"; + if (args.Item.Id == "GanttContainer_excelexport") { - Syncfusion.Blazor.Grids.ExcelExportProperties ExportProperties = new Syncfusion.Blazor.Grids.ExcelExportProperties(); - ExportProperties.FileName = "Gantt.xlsx"; - this.Gantt.ExportToExcelAsync(ExportProperties); + var exportProps = new ExcelExportProperties + { + FileName = $"{exportFileName}.xlsx" + }; + Gantt.ExportToExcelAsync(exportProps); } else if (args.Item.Id == "GanttContainer_csvexport") { - Syncfusion.Blazor.Grids.ExcelExportProperties ExportProperties = new Syncfusion.Blazor.Grids.ExcelExportProperties(); - ExportProperties.FileName = "Gantt.csv"; - this.Gantt.ExportToCsvAsync(ExportProperties); + var exportProps = new ExcelExportProperties + { + FileName = $"{exportFileName}.csv" + }; + Gantt.ExportToCsvAsync(exportProps); } } - protected override void OnInitialized() - { - this.TaskCollection = GetTaskCollection(); - } 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 int[] ResourceId { get; set; } } @@ -265,19 +830,23 @@ You can assign the file name for the exported document by defining **FileName** { List Tasks = new List() { - new TaskData() { TaskId = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, }, - new TaskData() { TaskId = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentId = 1, Predecessor="2", }, - new TaskData() { TaskId = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentId = 1, Predecessor="3", }, - new TaskData() { TaskId = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 17), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentId = 5, Predecessor="4", }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentId = 5, Predecessor="6", }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentId = 5, Predecessor="7", } + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 01, 04), EndDate = new DateTime(2022, 01, 07), }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 01, 04), Duration = "4", Progress = 40, ParentID = 1, Predecessor="2", }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 1, Predecessor="3", }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 01, 10), EndDate = new DateTime(2022, 01, 17), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 30, ParentID = 5, Predecessor="4", }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 06), Duration = "3", Progress = 40, ParentID = 5, Predecessor="6", }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 06), Duration = "0", Progress = 30, ParentID = 5, Predecessor="7", } }; return Tasks; } } -``` + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBSijCGoXwGiALV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} N> You can refer to our [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor Gantt Chart example](https://blazor.syncfusion.com/demos/gantt-chart/default-functionalities?theme=bootstrap4) to know how to render and configure the Gantt. \ No newline at end of file diff --git a/blazor/gantt-chart/task-dependencies.md b/blazor/gantt-chart/task-dependencies.md index d60835bf0a..781230da88 100644 --- a/blazor/gantt-chart/task-dependencies.md +++ b/blazor/gantt-chart/task-dependencies.md @@ -9,11 +9,11 @@ documentation: ug # Task Dependencies in Blazor Gantt Chart Component -Task Dependencies are a crucial feature in project management that define relationships between tasks, ensuring they are executed in a logical sequence. In the [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component, task dependencies provide a powerful way to visualize and manage the interconnections between various project activities. +Task dependencies define the logical order in which tasks must be executed, helping ensure accurate scheduling and streamlined project workflows. In the Blazor Gantt Chart component, task relationships are represented visually to support structured planning and coordination across the project timeline. ## Understanding task dependencies -Task dependencies establish the order in which tasks should be completed, creating a structured workflow within your project. By implementing dependencies, you can: +Task dependencies determine the execution sequence of tasks, forming a structured workflow that enhances project clarity and coordination. By implementing dependencies, you can: 1. Ensure tasks are executed in the correct sequence 2. Automatically adjust schedules when related tasks change @@ -22,39 +22,31 @@ Task dependencies establish the order in which tasks should be completed, creati ## Types of task relationships -The Blazor Gantt Chart supports four types of task relationships, each serving a specific purpose in project scheduling: - -1. **Finish-to-start (FS)**: The most common type, where a task can only begin after its predecessor is completed. - - Example: In software development, coding (Task B) can only start after the design phase (Task A) is finished. - ![Blazor Gantt Chart displays Finish to Start Task Relationship](images/blazor-gantt-chart-finish-to-start-relation.png) - -2. **Start-to-start (SS)**: Tasks begin simultaneously or with a specified lag. - +Task relationships are categorized into four types based on start and finish dates: +- **Start to Start (SS)**: Successor starts with predecessor. Example: In event planning, venue decoration (Task B) can start as soon as venue setup (Task A) begins. ![Blazor Gantt Chart displays Start to Start Task Relationship](images/blazor-gantt-chart-start-to-start-relation.png) -3. **Finish-to-finish (FF)**: Tasks must finish together or with a specified lag. - - Example: In publishing, proof reading (Task B) must finish when or shortly after content writing (Task A) is completed. - ![Blazor Gantt Chart displays Finish to Finish Task Relationship](images/blazor-gantt-chart-finish-to-finish-relation.png) - -4. **Start-to-finish (SF)**: A task can't finish until its predecessor starts. - - Example: In shift work, the night shift (Task B) can't end until the day shift (Task A) begins. +- **Start to Finish (SF)**: Successor finishes when predecessor starts. + Example: In shift work, the night shift (Task B) can't end until the day shift (Task A) begins. ![Blazor Gantt Chart displays Start to Finish Task Relationship](images/blazor-gantt-chart-start-to-finish-relation.png) -## Implementing task dependencies - -To implement task dependencies in your Blazor Gantt Chart, follow these steps: +- **Finish to Start (FS)**: Successor starts after predecessor finishes (default). + Example: In software development, coding (Task B) can only start after the design phase (Task A) is finished. + ![Blazor Gantt Chart displays Finish to Start Task Relationship](images/blazor-gantt-chart-finish-to-start-relation.png) -1. **Define the dependency field**: In your data source, create a field to hold dependency information. +- **Finish to Finish (FF)**: Successor finishes with predecessor. + Example: In publishing, proof reading (Task B) must finish when or shortly after content writing (Task A) is completed. + ![Blazor Gantt Chart displays Finish to Finish Task Relationship](images/blazor-gantt-chart-finish-to-finish-relation.png) -2. **Map the dependency field**: Use the [Dependency](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Dependency) property of [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) to map your dependency field. +## Implementing task dependencies -3. **Specify dependencies**: For each task, specify its dependencies by indicating the **Predecessor's Task ID** followed by the **Dependency Type** (e.g., Finish-to-Start, Start-to-Start). +To implement task dependencies in the Blazor Gantt Chart, follow these steps: -4. **Predecessor configuration**: The [DependencyTypes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DependencyTypes) property manages task dependencies, using [DependencyType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.DependencyType.html) enums to define relationships. You can configure the order of predecessor types such as FS, SS, FF, and SF. +- **Define the dependency field**: Add a field in the data source to store task dependency values. +- **Map the dependency field**: Use the [Dependency](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Dependency) property in [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) to bind the dependency field. +- **Specify dependencies**: Assign values using the predecessor's Task ID followed by the dependency type (e.g., `2FS`, `6SS`, `7SF`, `3FF`). +- **Predecessor configuration**: Use the [DependencyTypes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DependencyTypes) property to define relationships between tasks using supported types such as `FS`, `SS`, `SF`, and `FF` through [DependencyType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.DependencyType.html) enums. The following code snippets demonstrate how to define and configure task dependencies in the Gantt Chart component. @@ -196,7 +188,7 @@ A negative offset allows a task to start before its predecessor completes, creat ## Understanding dependency string structure -The dependency string in the Gantt Chart follows a specific structure to define relationships between tasks. Let's break down an example: +Dependency strings in the Gantt Chart follow a structured format to define task relationships and scheduling offsets. Let's break down an example: **2FS+3d** @@ -297,8 +289,6 @@ In this example: Tasks can have multiple dependencies, allowing for complex project structures. Specify multiple dependencies by separating them with commas. -The following code snippets demonstrate how to define and configure multiple dependencies: - {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -358,9 +348,12 @@ The Gantt Chart automatically renders dependency lines between related tasks. Th ## Customizing dependency appearance -The Gantt Chart includes styling options that enable you to customize the appearance of dependency lines. The [ConnectorLineBackground](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ConnectorLineBackground) property allows you to set the color of the connector lines using CSS color values, such as "#ff00ff". Additionally, the [ConnectorLineWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ConnectorLineWidth) property lets you adjust the thickness of these lines in pixels, defaulting to 1 pixel. These properties are designed to enhance the visual clarity and appeal of task dependencies within the chart. +To customize the appearance of dependency lines in the Gantt Chart: + +- Use the [ConnectorLineBackground](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ConnectorLineBackground) property to set the line color using CSS values (e.g., `#ff00ff`). +- Use the [ConnectorLineWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ConnectorLineWidth) property to define the line thickness in pixels (default is `1`). -Here is a code snippet that shows how to modify the color of dependency lines: +These properties help visually distinguish task relationships and improve chart readability. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -466,4 +459,4 @@ For more advanced topics related to task dependencies and project management in 5. [Timeline](https://blazor.syncfusion.com/documentation/gantt-chart/time-line): Understand how to customize the timeline view to better visualize your project schedule and dependencies. -For more detailed information and advanced usage scenarios, refer to the [Syncfusion® Blazor Gantt Chart documentation](https://blazor.syncfusion.com/documentation/gantt-chart/getting-started). +For more detailed information and advanced usage scenarios, refer to the [Syncfusion® Blazor Gantt Chart documentation](https://blazor.syncfusion.com/documentation/gantt-chart/getting-started). \ No newline at end of file diff --git a/blazor/gantt-chart/timezone.md b/blazor/gantt-chart/timezone.md index dec4488cf1..790b82e178 100644 --- a/blazor/gantt-chart/timezone.md +++ b/blazor/gantt-chart/timezone.md @@ -9,15 +9,23 @@ documentation: ug # Timezone support in Blazor Gantt Chart -The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component schedules and displays dates and times based on the system timezone. To configure the Gantt Chart to use a specific timezone, assign the desired value to the [Timezone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Timezone) property accepts a standard IANA timezone string, such as `UTC` or `America/New_York`. This ensures that task dates, event markers, baseline dates, and indicators are interpreted and rendered in the specified timezone, with automatic handling of daylight saving time (DST) transitions. +The Blazor Gantt Chart component schedules and displays dates and times based on the system timezone by default. To configure it to use a specific timezone, assign a standard IANA timezone string such as `UTC` or `America/New_York` to the [Timezone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Timezone) property. + +This configuration ensures that task dates, event markers, baseline dates, and indicators are interpreted and rendered in the specified timezone. It also automatically adjusts for daylight saving time (DST) transitions, providing accurate scheduling and visualization across different regions. ## Timezone date conversion -The `Timezone` property enables the Gantt Chart to convert and display all task-related dates, including start dates, end dates, event markers, and baseline dates, in the specified timezone. For example, a `DateTime` value defined as `new DateTime(2025, 2, 4, 8, 0, 0)` in a system set to Pacific Standard Time (PST, UTC-08:00) will be adjusted to `2025-02-03 09:30 PM` when the `Timezone` property is set to `America/New_York` (ET, UTC-05:00 during standard time). This conversion ensures accurate scheduling and visualization of tasks across different timezones, accounting for DST where applicable. +The [timezone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Timezone) property allows the Gantt Chart to convert and display all task-related dates, including start dates, end dates, event markers, and baseline dates, in the specified timezone. + +For example, a `DateTime` value defined as `new DateTime(2025, 2, 4, 8, 0, 0)` in a system set to Pacific Standard Time (PST, UTC-08:00) will be adjusted to `2025-02-03 09:30 PM` when the `Timezone` property is set to `America/New_York` (ET, UTC-05:00 during standard time). + +This conversion ensures accurate scheduling and visualization across timezones, with adjustments for daylight saving time where applicable. ## Setting the timezone -The `Timezone` property can be assigned a standard IANA timezone string, such as `UTC`, `America/New_York`, or `Europe/London`, to control how dates are displayed. The following example demonstrates configuring the Gantt Chart with the `America/New_York` timezone and includes a dropdown to dynamically update the timezone, triggering a re-render of all task dates. +Set the [timezone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Timezone) property to a valid IANA timezone string such as UTC, America/New_York, or Europe/London. This ensures consistent task date displays and aligns taskbars with database times. + +The following example demonstrates configuring the Gantt Chart with the `America/New_York` timezone and includes a dropdown to dynamically update the timezone, triggering a re-render of all task dates. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -140,9 +148,9 @@ The `Timezone` property can be assigned a standard IANA timezone string, such as ### CRUD operations with timezone -CRUD operations in the Blazor Gantt Chart respect the configured `Timezone` property, ensuring consistent date and time handling. When adding a task, the start date is calculated based on the minimum start date in the dataset and converted to the specified timezone. Editing or deleting tasks processes `StartDate` and `EndDate` values in the configured timezone, maintaining consistency in visualization, data storage, and export operations. +CRUD operations in the Blazor Gantt Chart respect the configured [Timezone](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Timezone) property to ensure consistent date and time handling. When a task is added, the start date is calculated based on the minimum start date in the dataset and converted to the specified timezone. Editing or deleting tasks processes `StartDate` and `EndDate` values in the same timezone, maintaining consistency across visualization, data storage, and export operations. -This following code enables adding, editing, and deleting tasks in the Blazor Gantt Chart, with all operations processed in the `America/New_York` timezone. The `GanttEditSettings` properties (`AllowAdding`, `AllowEditing`, `AllowDeleting`, `AllowTaskbarEditing`) enable CRUD functionality, while the `Timezone` property ensures that task dates are converted and displayed consistently. The `GanttTaskFields` map nullable `StartDate` and `EndDate` properties to handle optional date values, and the `GanttDayWorkingTimeCollection` supports 24-hour scheduling in the specified timezone. +The following sample demonstrates how to enable task creation, modification, and deletion in the `America/New_York` timezone. CRUD functionality is configured using [GanttEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html) properties ([AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowAdding), [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowEditing), [AllowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowDeleting), [AllowTaskbarEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowTaskbarEditing)). The `Timezone` property ensures accurate date conversion and display. `GanttTaskFields` support nullable `StartDate` and `EndDate` values, and [GanttDayWorkingTimeCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttDayWorkingTimeCollection.html) allows 24-hour scheduling. {% tabs %} {% highlight razor tabtitle="Index.razor" %} diff --git a/blazor/gantt-chart/virtualization.md b/blazor/gantt-chart/virtualization.md index 8d0ff81ab1..f709c92081 100644 --- a/blazor/gantt-chart/virtualization.md +++ b/blazor/gantt-chart/virtualization.md @@ -9,13 +9,13 @@ documentation: ug # Virtualization in Blazor Gantt Chart Component -Gantt Chart allows you to load a large amount of data without performance degradation. +Virtual scrolling in the Blazor Gantt Chart improves performance by rendering only visible rows, columns, and timeline segments, reducing DOM operations for large datasets or extended timelines. Row virtualization handles large task volumes (e.g. displaying 10,000 tasks in a project), timeline virtualization loads timeline cells on-demand during horizontal scrolling (e.g. navigating multi-year timelines), and column virtualization renders only the columns currently in view. These techniques enable efficient and scalable project management. -## Row virtualization +## Configure row virtualization -The `EnableRowVirtualization` property allows you to render only the rows that are visible in the content viewport at load time. Rows are loaded while scrolling vertically, which optimizing memory usage by rendering only the rows that are visible, resulting in faster rendering and scrolling and efficiently handling large datasets in your Gantt chart without sacrificing performance or user experience. To enable row virtualization using this API, simply set [EnableRowVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRowVirtualization) to true. +Row virtualization, enabled by setting [EnableRowVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRowVirtualization) to **true**, renders only tasks visible in the Gantt’s viewport, determined by the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_Height) property in pixels (e.g., “450px”). All tasks are fetched initially but rendered on-demand during vertical scrolling, reducing load times for large datasets. For example, a project with 10,000 tasks renders only the 50 visible tasks, improving performance. Ensure the `Height` property is set explicitly to control the viewport size. -The number of records displayed in the Gantt chart is determined implicitly by the height of the content area. +The following example enables row virtualization for a large dataset: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -238,11 +238,9 @@ By default, the number of records rendered per page will be twice the Gantt char {% previewsample "https://blazorplayground.syncfusion.com/embed/rZBSjuWwppImKWKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Column virtualization +## Configure column virtualization -Column virtualization allows you to load more columns with high performance. It renders only the columns in the viewport, while other columns render on-demand during horizontal scrolling. - -To enable the column virtualization, set the [EnableRowVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRowVirtualization) and [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableColumnVirtualization) properties as **true**. +Column virtualization, enabled by setting [EnableRowVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableRowVirtualization) and [EnableColumnVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableColumnVirtualization) to **true**, renders only the columns visible in the viewport while other columns are loaded on-demand during horizontal scrolling. This approach ensures high-performance rendering when working with a large number of columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -364,9 +362,11 @@ To enable the column virtualization, set the [EnableRowVirtualization](https://h N> Column's [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Width) is required for column virtualization. If the column's width is not defined, then the Gantt Chart will consider its value as **150px**. -## Timeline virtualization +## Configure Timeline Virtualization + +Timeline virtualization, enabled by setting [EnableTimelineVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableTimelineVirtualization) to **true**, initially renders three times the width of the Gantt element and loads additional timeline cells on demand during horizontal scrolling. This improves performance for wide timelines, such as multi-year projects, by rendering only the visible segments. The rendering behavior depends on `TimelineSettings`, which defines the scale (e.g., monthly or daily tiers). -Timeline virtualization allows you to load data sources having a large timespan with high performance. Initially, it renders the timeline with twice the width of the gantt element, while other timeline cells render on-demand during horizontal scrolling. To enable timeline virtualization using this API, simply set [EnableTimelineVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableTimelineVirtualization) to true. +The following example enables timeline virtualization for a wide timeline: {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -499,13 +499,11 @@ Timeline virtualization allows you to load data sources having a large timespan {% previewsample "https://blazorplayground.syncfusion.com/embed/rZLSZYsmJzvPFSdf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor GanttChart with timeline virtualization](./images/timeline_virtual.gif) - ## Limitations for virtualization * Due to the element height limitation in browsers, the maximum number of records loaded by the Gantt chart is limited by the browser capability. -* It is necessary to mention the height of the Gantt in pixels when enabling Virtual Scrolling. +* It is necessary to mention the height of the Gantt in pixels when enabling virtual scrolling. * Cell selection will not be persisted in a row. -* Programmatic selection using the **SelectRows** method is not supported in virtual scrolling. +* Programmatic selection using the [SelectRowsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_SelectRowsAsync_System_Int32___) method is not supported in virtual scrolling. * Collapse all and expand all actions are performed only for the current view-port data in virtual scrolling. * While using column virtualization, column width should be in the pixel. Percentage values are not accepted. \ No newline at end of file From 84be9051d9f258c0494f282482c7397e171ec7cf Mon Sep 17 00:00:00 2001 From: JamunaSundaramSF3699 Date: Thu, 30 Oct 2025 10:13:10 +0530 Subject: [PATCH 2/2] documentation(988975): Updated Blazor topic. --- blazor/gantt-chart/virtualization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/gantt-chart/virtualization.md b/blazor/gantt-chart/virtualization.md index f709c92081..8b215573c6 100644 --- a/blazor/gantt-chart/virtualization.md +++ b/blazor/gantt-chart/virtualization.md @@ -364,7 +364,7 @@ N> Column's [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gant ## Configure Timeline Virtualization -Timeline virtualization, enabled by setting [EnableTimelineVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableTimelineVirtualization) to **true**, initially renders three times the width of the Gantt element and loads additional timeline cells on demand during horizontal scrolling. This improves performance for wide timelines, such as multi-year projects, by rendering only the visible segments. The rendering behavior depends on `TimelineSettings`, which defines the scale (e.g., monthly or daily tiers). +Timeline virtualization, enabled by setting [EnableTimelineVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EnableTimelineVirtualization) to **true**, initially renders twice times the width of the Gantt element and loads additional timeline cells on demand during horizontal scrolling. This improves performance for wide timelines, such as multi-year projects, by rendering only the visible segments. The rendering behavior depends on `TimelineSettings`, which defines the scale (e.g., monthly or daily tiers). The following example enables timeline virtualization for a wide timeline: