diff --git a/blazor/gantt-chart/excel-export.md b/blazor/gantt-chart/excel-export.md
index 6e35c447e5..f808235610 100644
--- a/blazor/gantt-chart/excel-export.md
+++ b/blazor/gantt-chart/excel-export.md
@@ -80,6 +80,224 @@ You can trigger export operations using the [ExportToExcelAsync](https://help.sy
{% 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[] 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/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
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.
@@ -159,6 +377,304 @@ To include hidden columns during Excel or CSV export in the Gantt Chart componen
{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVoMtWIBjILrMBQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+## Add header and footer to export
+
+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" %}
+
+@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.
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.
- 
-
-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.
-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.
- 
-
-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.
-## 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.
+ 
-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.
+ 
-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..8b215573c6 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 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).
-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" %}
-
-
## 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