Task Name: @((context as TaskData).TaskName)
@@ -42,27 +55,27 @@ The Gantt Chart component maps any data source fields to [GanttLabelSettings](ht
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; }
}
private 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, 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, },
+ 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, 06), EndDate = new DateTime(2022, 01, 10), },
+ 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;
}
@@ -73,6 +86,8 @@ The Gantt Chart component maps any data source fields to [GanttLabelSettings](ht
color: black !important;
}
-```
-
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLIDkVIpzpsrlhR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/gantt-chart/managing-tasks.md b/blazor/gantt-chart/managing-tasks.md
index c82cdf05e0..e2a795ad2b 100644
--- a/blazor/gantt-chart/managing-tasks.md
+++ b/blazor/gantt-chart/managing-tasks.md
@@ -3,42 +3,90 @@ layout: post
title: Managing Tasks in Blazor Gantt Chart Component | Syncfusion
description: Checkout and learn here all about Managing Tasks in Syncfusion Blazor Gantt Chart component and more.
platform: Blazor
-control: Gantt Chart
+control: Managing tasks
documentation: ug
---
# Managing Tasks in Blazor Gantt Chart Component
-The [Blazor Gantt Chart](https://www.syncfusion.com/blazor-components/blazor-gantt-chart) component has options to dynamically insert, delete, and update tasks in a project. The primary key column is necessary to manage the tasks and perform CRUD operations in Gantt Chart. To define the primary key, set the `GanttColumn.IsPrimaryKey` property to `true` in the column.
+Managing tasks in the Blazor Gantt Chart component enables dynamic project updates, such as inserting, deleting, or editing tasks and dependencies, by enabling [AllowAdding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowAdding), [AllowDeleting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowDeleting), [AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowEditing), and [AllowTaskbarEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEditSettings.html#Syncfusion_Blazor_Gantt_GanttEditSettings_AllowTaskbarEditing). A primary key column, defined by [GanttColumn.IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_IsPrimaryKey) set to **true** (e.g., on id), ensures reliable CRUD operations and task identification. Editing modes include cell editing for quick TreeGrid updates, dialog editing for comprehensive changes, taskbar dragging for duration or date adjustments, and connector line dragging for dependencies. Customize dialogs with templates or fields using [AddDialogFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AddDialogFields) and [EditDialogFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_EditDialogFields). Methods like [AddRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AddRecordAsync__0_System_Nullable_System_Int32__System_Nullable_Syncfusion_Blazor_Gantt_RowPosition__System_Object_), [DeleteRecordAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_DeleteRecordAsync_System_Nullable_System_Int32__), and [UpdateRecordByIDAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_UpdateRecordByIDAsync__0_) support programmatic management. Ensure valid [GanttTaskFields](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html) mappings and a primary key to enable editing seamlessly.
-## Cell edit type and its params
+The following code example demonstrates editing in the Gantt component.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Gantt
+
+
+
+
+
+@code{
+ private List TaskCollection { get; set; }
+ protected override void OnInitialized()
+ {
+ this.TaskCollection = GetTaskCollection();
+ }
+
+ 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; }
+ }
-The `GanttColumn.EditType` is used to customize the edit type of the particular column. You can set the `GanttColumn.EditType` based on data type of the column.
+ public static List GetTaskCollection()
+ {
+ List Tasks = new List();
+ Tasks.Add(new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), });
+ Tasks.Add(new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 });
+ Tasks.Add(new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, Predecessor = "2", ParentID = 1 });
+ Tasks.Add(new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, Predecessor = "3", ParentID = 1 });
+ Tasks.Add(new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 11), EndDate = new DateTime(2022, 04, 18), });
+ Tasks.Add(new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, Predecessor = "4", ParentID = 5 });
+ Tasks.Add(new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, Predecessor = "6", ParentID = 5 });
+ Tasks.Add(new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, Predecessor = "7", ParentID = 5 });
+ return Tasks;
+ }
+}
-* [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) component for integers, double, and decimal data types.
+{% endhighlight %}
+{% endtabs %}
-* [TextBox](https://blazor.syncfusion.com/documentation/textbox/getting-started) component for string data type.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBIWDWeiYcZSwrs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-* [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) component for list data type.
+Editing feature requires a primary key column for CRUD operations. While defining columns in Gantt using the [GanttColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumns.html) property, it is mandatory that any one of the columns, must be a primary column. By default, the [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id) column will be the primary key column. If `Id` column is not defined, we need to enable [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_IsPrimaryKey) for any one of the columns defined in the `GanttColumns` property.
-* [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) component for date values.
+## Cell edit type and its params
-* [DateTimePicker](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started) component for datetime type.
+The [GanttColumn.EditType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_EditType) is used to define the edit type for any particular column. You can set the `GanttColumn.editType` based on data type of the column.
-* [Checkbox](https://blazor.syncfusion.com/documentation/check-box/getting-started) component for boolean type.
+Below is the combined content from the provided markdown sections in bullet points, as requested, ensuring clarity and conciseness while preserving the original information:
-Also, you can customize model of the `GanttColumn.EditType` component through the `GanttColumn.EditorSettings`.
+- **Cell edit types and components**:
+ - **numericedit**: Uses the [NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) component for editing integers, doubles, and decimals.
+ - **defaultedit**: Uses the [TextBox](https://blazor.syncfusion.com/documentation/textbox/getting-started) component for editing string data.
+ - **dropdownedit**: Uses the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) component to display all unique values for a field.
+ - **booleanedit**: Uses the [Checkbox](https://blazor.syncfusion.com/documentation/check-box/getting-started) component for editing boolean data.
+ - **datepickeredit**: Uses the [DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) component for editing date data.
+ - **datetimepickeredit**: Uses the [DateTimePicker](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started) component for editing date-time data.
-The following table describes cell edit type component and their corresponding edit params of the column.
+- **Customization**:
+ - You can customize model of the `GanttColumn.EditType` component through the `GanttColumn.EditorSettings`.
-Component |Example
------|-----
-[NumericTextBox](https://blazor.syncfusion.com/documentation/numeric-textbox/getting-started) | @(new { @params = new { format = "n"} })
-[TextBox](https://blazor.syncfusion.com/documentation/textbox/getting-started) | -
-[DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list/getting-started) | @(new { @params = new { value = "Germany"} })
-[DatePicker](https://blazor.syncfusion.com/documentation/datepicker/getting-started) | @(new { @params = new { format = "yyyy-MM-dd"} })
-[DateTimePicker](https://blazor.syncfusion.com/documentation/datetime-picker/getting-started) | @(new { @params = new { strictMode = true} })
-[Checkbox](https://blazor.syncfusion.com/documentation/check-box/getting-started) | @(new { @params = new { checked = true} })
+- **Edit type parameters**:
+ - **numericedit**: Supports parameters like `Decimals: 2`, `Value: 5`.
+ - **dropdownedit**: Supports parameters like `Value: 'Germany'`.
+ - **booleanedit**: Supports parameters like `Checked: true`.
+ - **datepickeredit**: Supports parameters like `Format: 'dd.MM.yyyy'`.
+ - **datetimepickeredit**: Supports parameters like `Value: new Date()`.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -106,13 +154,13 @@ Component |Example
{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVIsNjUCkvqfHQC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-N> If edit type is not defined in the column, then it will be considered as the **StringEdit** type (Textbox component).
+> If edit type is not defined in the column, then it will be considered as the **StringEdit** type (Textbox component).
## Cell edit template
-The cell edit template is used to add a custom component for a particular column when the column is edited.
+The cell edit template feature in Syncfusion Blazor Gantt Chart component allows you to customize the editing interface of individual cells by embedding custom components or HTML elements. Instead of using the default editor such as a textbox, you can define a template that provides a tailored editing experience such as a dropdown, date picker, or checkbox based on your application's requirements. This is especially useful when you need more control over how data is entered or displayed during editing.
-The following code example describes, how to define the Edit template for a particular column.
+The following code example demonstrates how to define an edit template for a specific column, where the **TaskName** field is rendered using a dropdown.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -194,9 +242,9 @@ The following code example describes, how to define the Edit template for a part
## Disable editing for particular column
-You can disable editing for particular columns by using the [GanttColumn.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_AllowEditing) property.
+You can disable editing for particular columns, by using the [GanttColumn.AllowEditing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_AllowEditing) property.
-In the following demo, editing is disabled for the `TaskName` column.
+In the following demo, editing is disabled for the **TaskName** column.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -257,7 +305,9 @@ In the following demo, editing is disabled for the `TaskName` column.
## Troubleshoot: Editing works only when primary key column is defined
-Editing feature requires a primary key column for CRUD operations. While defining columns in Gantt using the `GanttColumns` property, any one of the columns must be a primary column. By default, the `Id` column will be the primary key column. If `Id` column is not defined, you need to enable `IsPrimaryKey` for any one of the columns defined in the `GanttColumns` property.
+The editing feature in the Syncfusion Blazor Gantt Chart component requires a primary key column to perform CRUD operations. When defining columns using the [GanttColumns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumns.html) property, at least one column must be marked as the primary key.
+
+By default, the [Id](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttTaskFields.html#Syncfusion_Blazor_Gantt_GanttTaskFields_Id) column is considered the primary key. If the `Id` column is not defined, you must explicitly set the [IsPrimaryKey](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_IsPrimaryKey) property to true for one of the columns in the `GanttColumns` collection to enable editing functionality.
## Touch interaction
@@ -273,19 +323,24 @@ Action |Description
### Task dependency editing
-Tap the taskbar to initiate the taskbar editing for predecessors. Once it enters the edited state, `tap` the left or right connector point to initiate the task [dependencies](https://blazor.syncfusion.com/documentation/gantt-chart/managing-tasks#task-dependency-editing) editing. The dialog will be rendered with the message `Choose another task` and `Cancel` button.
+You can tap the left/right connector point to initiate task [dependencies](https://blazor.syncfusion.com/documentation/gantt-chart/managing-tasks#task-dependency-editing) edit mode and again tap another taskbar to establish the dependency line between two taskbars.
-
+Once the dependency edit mode is initiated, a dialog appears with the message **Choose another task** and a **Cancel** button. Tapping another taskbar will prompt a second dialog with the message **Select the connector position** and a tooltip near the second taskbar showing **Left** and **Right** buttons. Selecting one of these buttons establishes the dependency relationship between the two tasks. You can click the **Cancel** button at any time to exit the edit mode.
-Click the `Cancel` button to cancel the edit action and to continue editing, tap another taskbar to establish the dependency line between the two taskbars.
+
-Once the second taskbar is tapped, the dialog will display a message `Select the connector position` and `Cancel` button. A tooltip is also displayed near the second taskbar with the `Left` and `Right` buttons. Click any button to establish a dependency relationship between the two tasks.
+The following table explains the taskbar state in dependency edit mode.
-
+Taskbar state |Description
+-----|-----
+Parent taskbar | You cannot create dependency relationship to parent tasks.
-
-
-
-
-@code {
- private List TaskCollection { get; set; }
- private SfGantt Gantt;
- private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
- protected override void OnInitialized()
- {
- this.TaskCollection = GetTaskCollection();
- }
- public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "PdfExport")
- {
- await Gantt.ExportToPdfAsync();
- }
- }
-
- 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 int? ParentID { get; set; }
- public string Predecessor { get; set; }
- }
-
- public static List GetTaskCollection()
- {
- List Tasks = new List()
- {
- new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), },
- new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 },
- new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" },
- new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" },
- new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), },
- new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 },
- new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 },
- new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }
- };
- return Tasks;
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLIsjZgrAtEMygE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-## Customize the PDF export
-
-The PDF export functionality in the Syncfusion® Gantt Chart provides extensive customization options through the [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html) class. By configuring the properties within this class, you can control the layout, format, and content of the exported PDF. This customization ensures that the PDF accurately represents the Gantt chart's structure and allows for tailored exports.
-
-### Customize file name for exported document
-The PDF export functionality in the Syncfusion® Gantt Chart allows you to customize the file name of the exported document. By configuring the [FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_FileName) property within the [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html) class, you can assign a specific name to the generated PDF. This is especially useful for keeping your exported documents organized and easily identifiable.
-
-In this example, the exported PDF will be saved as `ProjectSchedule.pdf`.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Gantt
-@using Syncfusion.Blazor.Navigations
-
-
-
-
-
-
-@code {
- private List TaskCollection { get; set; }
- private SfGantt Gantt;
- private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
- protected override void OnInitialized()
- {
- this.TaskCollection = GetTaskCollection();
- }
- public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "PdfExport")
- {
- GanttPdfExportProperties exportProperties = new GanttPdfExportProperties();
- exportProperties.FileName = "ProjectSchedule.pdf";
- await Gantt.ExportToPdfAsync(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 int? ParentID { get; set; }
- public string Predecessor { get; set; }
- }
-
- public static List GetTaskCollection()
- {
- List Tasks = new List()
- {
- new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), },
- new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 },
- new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" },
- new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" },
- new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), },
- new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 },
- new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 },
- new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }
- };
- return Tasks;
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBSCZNAhALZXWKG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-### How to add a text in header/footer
-
-The PDF export functionality of the Gantt Chart allows you to add and style custom text in the header or footer of the exported PDF document. This customization can be achieved using the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_Header) and [Footer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_Footer) properties of the [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html) class. By configuring these properties, you can include important information, such as titles, project names, or other relevant details, to enhance the exported document.
-
-The following sample code demonstrates how to add custom text and apply styling to the header and footer sections of the exported PDF document,
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Gantt
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Navigations
-
-
-
-
-
-
-@code {
- private List TaskCollection { get; set; }
- private SfGantt Gantt;
- private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
- public List HeaderContent = new List
- {
- new PdfHeaderFooterContent() { Type = ContentType.Text, Value = "Gantt Chart PDF Export Header", Position = new PdfPosition() { X = 0, Y = 50 }, Style = new PdfContentStyle() { TextBrushColor = "#000000", FontSize = 13 } }
- };
- public List FooterContent = new List
- {
- new PdfHeaderFooterContent() { Type = ContentType.Text, Value = "Gantt Chart PDF Export Footer", Position = new PdfPosition() { X = 0, Y = 350 }, Style = new PdfContentStyle() { TextBrushColor = "#000000", FontSize = 13 } }
- };
- protected override void OnInitialized()
- {
- this.TaskCollection = GetTaskCollection();
- }
- public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "PdfExport")
- {
- GanttPdfExportProperties exportProperties = new GanttPdfExportProperties();
- PdfHeader Header = new PdfHeader()
- {
- FromTop = 0,
- Height = 100,
- Contents = HeaderContent
- };
- PdfFooter Footer = new PdfFooter()
- {
- FromBottom = 250,
- Height = 100,
- Contents = FooterContent
- };
- exportProperties.Header = Header;
- exportProperties.Footer = Footer;
- await Gantt.ExportToPdfAsync(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 int? ParentID { get; set; }
- public string Predecessor { get; set; }
- }
-
- public static List GetTaskCollection()
- {
- List Tasks = new List()
- {
- new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), },
- new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 },
- new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" },
- new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" },
- new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), },
- new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 },
- new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 },
- new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }
- };
- return Tasks;
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhyiDXArUzpgPqb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-### How to draw a line in header/footer
-
-You can add lines to the Header or Footer area of the exported PDF document using the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_Header) and [Footer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_Footer) properties in the [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html) class.
-
-Supported line styles are,
-
-* Dash
-* Dot
-* DashDot
-* DashDotDot
-* Solid
-
-The following sample code demonstrates adding line in the Header and Footer section of the exported document,
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Gantt
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Navigations
-
-
-
-
-
-
-@code {
- private List TaskCollection { get; set; }
- private SfGantt Gantt;
- private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
- public List HeaderContent = new List
- {
- new PdfHeaderFooterContent() { Type = ContentType.Line, Points = new PdfPoints() { X1 = 0, Y1 = 4, X2 = 685, Y2 = 4 }, Style = new PdfContentStyle() { PenColor = "#000080", DashStyle = PdfDashStyle.Solid } }
- };
- public List FooterContent = new List
- {
- new PdfHeaderFooterContent() { Type = ContentType.Line, Points = new PdfPoints() { X1 = 0, Y1 = 350, X2 = 685, Y2 = 350 }, Style = new PdfContentStyle() { PenColor = "#000080", DashStyle = PdfDashStyle.Solid } }
- };
- protected override void OnInitialized()
- {
- this.TaskCollection = GetTaskCollection();
- }
- public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "PdfExport")
- {
- GanttPdfExportProperties exportProperties = new GanttPdfExportProperties();
- PdfHeader Header = new PdfHeader()
- {
- FromTop = 0,
- Height = 100,
- Contents = HeaderContent
- };
- PdfFooter Footer = new PdfFooter()
- {
- FromBottom = 250,
- Height = 100,
- Contents = FooterContent
- };
- exportProperties.Header = Header;
- exportProperties.Footer = Footer;
- await Gantt.ExportToPdfAsync(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 int? ParentID { get; set; }
- public string Predecessor { get; set; }
- }
-
- public static List GetTaskCollection()
- {
- List Tasks = new List()
- {
- new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), },
- new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 },
- new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" },
- new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" },
- new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), },
- new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 },
- new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 },
- new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }
- };
- return Tasks;
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBIWtXKVKPSwLAW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-### How to change the page orientation
-
-The PDF export functionality allows you to customize the page orientation of the exported document. By setting the [PageOrientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_PageOrientation) property in the [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html) class, you can choose between [Portrait](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PageOrientation.html#Syncfusion_Blazor_Grids_PageOrientation_Portrait) (default) and [Landscape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PageOrientation.html#Syncfusion_Blazor_Grids_PageOrientation_Landscape) orientations based on your requirements.
-
-The following code snippet demonstrates how to set the page orientation to Landscape for the exported PDF document,
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Gantt
-@using Syncfusion.Blazor.Navigations
-
-
-
-
-
-
-@code {
- private List TaskCollection { get; set; }
- private SfGantt Gantt;
- private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
- protected override void OnInitialized()
- {
- this.TaskCollection = GetTaskCollection();
- }
- public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "PdfExport")
- {
- GanttPdfExportProperties exportProperties = new GanttPdfExportProperties();
- exportProperties.PageOrientation = Syncfusion.Blazor.Grids.PageOrientation.Landscape;
- await Gantt.ExportToPdfAsync(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 int? ParentID { get; set; }
- public string Predecessor { get; set; }
- }
-
- public static List GetTaskCollection()
- {
- List Tasks = new List()
- {
- new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), },
- new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 },
- new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" },
- new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" },
- new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), },
- new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 },
- new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 },
- new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }
- };
- return Tasks;
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVyMjNgBzDbCnDU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-### How to change the page size
-
-The PDF export functionality allows you to customize the page size of the exported document to suit your needs. By setting the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfPageSize.html) property in the [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html) class, you can select from various standard page sizes. The default page size is Letter, but other options like A4, A3, and others.
-
-Supported page sizes are:
-* Letter
-* Note
-* Legal
-* A0
-* A1
-* A2
-* A3
-* A5
-* A6
-* A7
-* A8
-* A9
-* B0
-* B1
-* B2
-* B3
-* B4
-* B5
-* Archa
-* Archb
-* Archc
-* Archd
-* Arche
-* Flsa
-* HalfLetter
-* Letter11x17
-* Ledger
-
-The following code demonstrates how to change the page size to A4 for the exported PDF document,
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Gantt
-@using Syncfusion.Blazor.Navigations
-
-
-
-
-
-
-@code {
- private List TaskCollection { get; set; }
- private SfGantt Gantt;
- private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
- protected override void OnInitialized()
- {
- this.TaskCollection = GetTaskCollection();
- }
- public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "PdfExport")
- {
- GanttPdfExportProperties exportProperties = new GanttPdfExportProperties();
- exportProperties.PageSize = Syncfusion.Blazor.Grids.PdfPageSize.A4;
- await Gantt.ExportToPdfAsync(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 int? ParentID { get; set; }
- public string Predecessor { get; set; }
- }
-
- public static List GetTaskCollection()
- {
- List Tasks = new List()
- {
- new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), },
- new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 },
- new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" },
- new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" },
- new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), },
- new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 },
- new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 },
- new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }
- };
- return Tasks;
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhyiZZKhzLBWLhu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-### Export current view records
-
-The PDF export functionality allows you to export only the records that are currently in view on the Gantt chart to a PDF document. This can be achieved by enabling the [IsCurrentViewExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.PdfExportEventArgs.html#Syncfusion_Blazor_Gantt_PdfExportEventArgs_IsCurrentViewExport) boolean argument in the [PdfExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfExporting) event.
-
-N> Exporting current view records is only applicable when the virtualization feature is enabled, and it does not retain the state of collapsed rows during export.
-
-The following code demonstrates how to use the `PdfExporting` event to export current view data of the Gantt chart to a PDF document,
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Gantt
-@using Syncfusion.Blazor.Navigations
-
-
-
-
-
-
-
-
-
-@code {
- private SfGantt Gantt { get; set; }
- private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
- private List TaskCollection { get; set; }
- protected override void OnInitialized()
- {
- this.TaskCollection = VirtualData.GetTreeVirtualData(30);
- }
- public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "PdfExport")
- {
- await Gantt.ExportToPdfAsync();
- }
- }
- public void PdfExportingHandler(PdfExportEventArgs args)
- {
- args.IsCurrentViewExport = true;
- }
- 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; }
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhyWjtqBfpHsisd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-### How to export Gantt chart with custom timeline range
-
-The PDF export functionality allows you to export with custom timeline range of the Gantt chart to the PDF document. To specify the range, set the [RangeStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.PdfExportEventArgs.html#Syncfusion_Blazor_Gantt_PdfExportEventArgs_RangeStart) and [RangeEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.PdfExportEventArgs.html#Syncfusion_Blazor_Gantt_PdfExportEventArgs_RangeEnd) arguments within the [PdfExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfExporting) event. The `RangeStart` argument defines the start date, and the `RangeEnd` argument defines the end date of the timeline range.
-
-The following code demonstrates how to use the `RangeStart` and `RangeEnd` arguments of the PdfExporting event to export a custom timeline range of the Gantt chart to a PDF document,
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Gantt
-@using Syncfusion.Blazor.Navigations
-
-
-
-
-
-
-
-
-
-@code {
- private SfGantt Gantt { get; set; }
- private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
- private List TaskCollection { get; set; }
- protected override void OnInitialized()
- {
- this.TaskCollection = VirtualData.GetTreeVirtualData(30);
- }
- public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "PdfExport")
- {
- await Gantt.ExportToPdfAsync();
- }
- }
- public void PdfExportingHandler(PdfExportEventArgs args)
- {
- args.RangeStart = new DateTime(2000, 1, 14);
- args.RangeEnd = new DateTime(2000, 05, 12);
- }
- public class VirtualData
- {
- public static List GetTreeVirtualData(int count)
- {
- List DataCollection = new List();
- 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++)
- {
- 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; }
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtByWjjUrpHrtFIB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-### Export hidden columns
-
-The PDF export functionality allows you to include hidden columns from the Gantt chart in the exported PDF document. To achieve this, set the [IncludeHiddenColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_IncludeHiddenColumn) property to true within the [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html) class. This ensures that columns not visible in the Gantt chart are included in the PDF export.
-
-The following code demonstrates how to export hidden columns in the Gantt chart to a PDF document,
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Gantt
-@using Syncfusion.Blazor.Navigations
-
-
-
-
-
-
-
-
-@code {
- private List TaskCollection { get; set; }
- private SfGantt Gantt;
- private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
- protected override void OnInitialized()
- {
- this.TaskCollection = GetTaskCollection();
- }
- public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "PdfExport")
- {
- GanttPdfExportProperties exportProperties = new GanttPdfExportProperties();
- exportProperties.IncludeHiddenColumn = true;
- await Gantt.ExportToPdfAsync(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 int? ParentID { get; set; }
- public string Predecessor { get; set; }
- }
-
- public static List GetTaskCollection()
- {
- List Tasks = new List()
- {
- new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), },
- new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 },
- new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" },
- new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" },
- new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), },
- new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 },
- new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 },
- new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }
- };
- return Tasks;
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtreCNXgVTcKHkcY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-### Customize column width in exported PDF document
-
-The PDF export functionality allows you to customize the width of columns in the exported PDF document. This can be achieved using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Width) property in the [GanttColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html) class. By specifying the width for each column, you can tailor the appearance of the exported PDF to your requirements.
-
-The following code snippet demonstrates how to customize column widths in the exported PDF document using the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html#Syncfusion_Blazor_Gantt_GanttPdfExportProperties_Columns) property of the [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html) class,
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Gantt
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Navigations
-@using Syncfusion.PdfExport
-
-
-
-
-
-
-
-
-@code {
- private List TaskCollection { get; set; }
- private SfGantt Gantt;
- private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
- protected override void OnInitialized()
- {
- this.TaskCollection = GetTaskCollection();
- }
- public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "PdfExport")
- {
- GanttPdfExportProperties exportProperties = new GanttPdfExportProperties();
- exportProperties.Columns = new List()
- {
- new GanttColumn(){ Field = "TaskID", HeaderText = "Task Id", Width = "200" },
- new GanttColumn(){ Field = "TaskName", HeaderText = "Task Name", Width = "250"},
- new GanttColumn(){ Field = "StartDate", HeaderText = "Start Date", Width = "150"},
- };
- await Gantt.ExportToPdfAsync(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 int? ParentID { get; set; }
- public string Predecessor { get; set; }
- }
-
- public static List GetTaskCollection()
- {
- List Tasks = new List()
- {
- new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 08), },
- new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 },
- new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" },
- new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" },
- new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 08), },
- new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 },
- new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 },
- new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 }
- };
- return Tasks;
- }
-}
-
-{% endhighlight %}
-{% endtabs %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBostXgrIjeKZvL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-## How to export Gantt chart with specific columns
-
-### Through property
-
-The PDF export functionality enables you to export only specific columns from the Gantt chart, rather than exporting all columns by default. To achieve this, set the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html#Syncfusion_Blazor_Gantt_GanttPdfExportProperties_Columns) property of the [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html) class. This allows you to tailor the exported PDF to include only the columns that are relevant to your needs.
-
-The following code snippet demonstrates how to configure the `Columns` property to export specific columns from the Gantt chart to a PDF document:
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Gantt
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Navigations
-@using Syncfusion.PdfExport
-
-
-
-
-
-
-
-
-@code {
- private List TaskCollection { get; set; }
- private SfGantt Gantt;
- private List toolbarItem = new List() { new Syncfusion.Blazor.Navigations.ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
- protected override void OnInitialized()
- {
- this.TaskCollection = GetTaskCollection();
- }
- public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "PdfExport")
- {
- GanttPdfExportProperties exportProperties = new GanttPdfExportProperties();
- exportProperties.Columns = new List