diff --git a/blazor-toc.html b/blazor-toc.html index 9d2888e0ba..d02c78ef25 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -2131,7 +2131,7 @@
  • @@ -3131,7 +3131,8 @@
  • Excel Export
  • PDF Export
  • Timezone
    • diff --git a/blazor/gantt-chart/cell-selection.md b/blazor/gantt-chart/cell-selection.md index 484e6b0311..90a9b73b21 100644 --- a/blazor/gantt-chart/cell-selection.md +++ b/blazor/gantt-chart/cell-selection.md @@ -13,7 +13,7 @@ Cell selection in the Gantt Chart component enables interactive selection of spe ## Single cell selection -Single cell selection in the Gantt chart is enabled by setting [GanttSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Mode) to **Cell** and [selectionSettings.type](https://ej2.syncfusion.com/angular/documentation/api/gantt/selectionSettings/#type) to **Single**. This allows selecting only one cell at a time. +Single cell selection in the Gantt chart is enabled by setting [GanttSelectionSettings.Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Mode) to **Cell** and [SelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Type) to **Single**. This allows selecting only one cell at a time. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -70,7 +70,7 @@ Single cell selection in the Gantt chart is enabled by setting [GanttSelectionSe ## Multiple cell selection -Multiple cell selection in the Gantt Chart is enabled by setting [selectionSettings.mode](https://ej2.syncfusion.com/angular/documentation/api/gantt/selectionSettings/#mode) to **Cell** and [selectionSettings.type](https://ej2.syncfusion.com/angular/documentation/api/gantt/selectionSettings/#type) to **Multiple**. This allows selecting multiple cells at a time by holding the Ctrl key while clicking on each desired cell. +Multiple cell selection in the Gantt Chart is enabled by setting [selectionSettings.mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Mode) to **Cell** and [SelectionSettings.Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttSelectionSettings.html#Syncfusion_Blazor_Gantt_GanttSelectionSettings_Type) to **Multiple**. This allows selecting multiple cells at a time by holding the Ctrl key while clicking on each desired cell. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -194,7 +194,7 @@ Select a specific cell in the Gantt Chart by calling the [SelectCellAsync](http ## Customize cell selection action -You may customize cell selection behavior in the Gantt Chart using [cellSelecting](https://ej2.syncfusion.com/angular/documentation/api/gantt/events/#cellselecting), [cellSelected](https://ej2.syncfusion.com/angular/documentation/api/gantt/events/#cellselected), [cellDeselecting](https://ej2.syncfusion.com/angular/documentation/api/gantt/events/#celldeselecting), and [cellDeselected](https://ej2.syncfusion.com/angular/documentation/api/gantt/events/#celldeselected) events. +You may customize cell selection behavior in the Gantt Chart using [CellSelecting](https://blazor.syncfusion.com/documentation/gantt-chart/events#cellselecting), [CellSelected](https://blazor.syncfusion.com/documentation/gantt-chart/events#cellselected), [CellDeselecting](https://blazor.syncfusion.com/documentation/gantt-chart/events#celldeselecting), and [CellDeselected](https://blazor.syncfusion.com/documentation/gantt-chart/events#celldeselected) events. The following sample demonstrates selection is canceled in the `cellSelecting` event when the **TaskName** is **Perform Soil test**. diff --git a/blazor/gantt-chart/customizing-pdf-export.md b/blazor/gantt-chart/customizing-pdf-export.md new file mode 100644 index 0000000000..50f00114bf --- /dev/null +++ b/blazor/gantt-chart/customizing-pdf-export.md @@ -0,0 +1,1430 @@ +--- +layout: post +title: Customize PDF exporting in Blazor Gantt Chart component | Syncfusion +description: Learn here all about Customize PDF exporting in Syncfusion Blazor Gantt Chart component and much more. +platform: Blazor +control: Customize pdf export +documentation: ug +--- + +# To customize PDF export + +Customizing PDF export in the Blazor Gantt Chart component allows tailoring exported documents for specific needs, using [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html) to adjust file names, page orientation, size, columns, headers, footers, timelines, and templates. Ensuring focused content like selected rows or styled taskbars and [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowPdfExport) enabled. Use [PdfExporting](https://blazor.syncfusion.com/documentation/gantt-chart/events#pdfexporting) and [PdfExported](https://blazor.syncfusion.com/documentation/gantt-chart/events#pdfexported) events for pre-export and post-export modifications, and [PdfQueryTaskbarInfo](https://blazor.syncfusion.com/documentation/gantt-chart/events#pdfquerytaskbarinfo) for taskbar styling. + +## Customize file name + +Set the exported PDF file name using the [FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_FileName) property in [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html), such as **ProjectSchedule.pdf**, for personalized document naming. + +{% 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 change the page orientation + +You can customize the page orientation of the exported PDF document in the Blazor Gantt chart by using 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. +This property allows you to 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 layout requirements. Use `Portrait` for documents that require more vertical space, and `Landscape` when you need to fit more columns or wider taskbars. + +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" %} + +## Customize page size + +Page size can be customized for the exported document using the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfPageSize.html) property in [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html). +The supported page sizes are: + +* Letter +* Note +* Legal +* A0 to A9 +* B0 to B5 +* Archa +* Archb +* Archc +* Archd +* Arche +* Flsa +* HalfLetter +* Letter11x17 +* Ledger + +{% 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 visible 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 property in the [PdfExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfExporting) event. + +> 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 the 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 a specific timeline range of the Gantt chart to a PDF document. To define the custom 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) properties within the [PdfExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfExporting) event. + +The `RangeStart` property specifies the start date, and the `RangeEnd` property specifies the end date of the timeline range to be exported. + +The following code demonstrates how to use 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 + +PDF export provides an option to export hidden columns of Gantt by defining the [IncludeHiddenColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_IncludeHiddenColumn) to **true**. + +{% 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 + +To customize column widths in the exported PDF document, set the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_Width) property for each column 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() + { + new GanttColumn(){ Field = "TaskID", HeaderText = "Task Id", Width = "100" }, + new GanttColumn(){ Field = "TaskName", HeaderText = "Task Name", Width = "200"}, + new GanttColumn(){ Field = "StartDate", HeaderText = "Start Date", Width = "150"}, + }; + 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/hXhIiXZAVoCQueAU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Through event + +The PDF export functionality allows you to export only specific columns from the Gantt chart, rather than exporting all columns by default. This can be achieved by using the `Columns` argument in the [PdfExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfExporting) event. + +The following code demonstrates how to use the `PdfExporting` event to export specific columns of 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") + { + await Gantt.ExportToPdfAsync(); + } + } + public void PdfExportingHandler(PdfExportEventArgs args) + { + args.Columns = new List() + { + new GanttColumn(){ Field = "TaskID", HeaderText = "Task Id", Width = "100" }, + new GanttColumn(){ Field = "TaskName", HeaderText = "Task Name", Width = "200"}, + new GanttColumn(){ Field = "StartDate", HeaderText = "Start Date", Width = "150"}, + }; + } + + 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/hXVoCjXAVSBmCcUQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Customizing taskbar appearance + +You can customize the appearance of taskbars in the exported PDF document using either properties or events, based on your requirements. + +### Through property + +The PDF export functionality allows you to customize the appearance of taskbars in the exported PDF document using the [TaskbarColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.PdfGanttStyle.html#Syncfusion_Blazor_Gantt_PdfGanttStyle_TaskbarColor) property in the [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html) class. This property lets you define custom colors for different types of taskbars, including: + +* Parent Taskbars +* Child Taskbars +* Milestones +* Critical Paths +* Manual Taskbars +* Baselines + +The following code snippet demonstrates how to customize taskbar colors in the exported 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 pdfExport = new GanttPdfExportProperties(); + pdfExport.Style = new PdfGanttStyle(); + pdfExport.Style.TaskbarColor = new PdfTaskbarColor(); + pdfExport.Style.TaskbarColor.ParentTaskbarColor = new PdfColor(220, 118, 51); + pdfExport.Style.TaskbarColor.ParentProgressColor = new PdfColor(203, 67, 53); + pdfExport.Style.TaskbarColor.ChildProgressColor = new PdfColor(35, 155, 86); + pdfExport.Style.TaskbarColor.ChildTaskbarColor = new PdfColor(130, 224, 170); + pdfExport.Style.TaskbarColor.CriticalPathTaskbarColor = new PdfColor(173, 121, 64); + pdfExport.Style.TaskbarColor.CriticalPathProgressColor = new PdfColor(145, 76, 0); + pdfExport.Style.TaskbarColor.BaselineColor = new PdfColor(179, 38, 30); + pdfExport.Style.TaskbarColor.MilestoneColor = new PdfColor(141, 124, 187); + await Gantt.ExportToPdfAsync(pdfExport); + } + } + + public class TaskData + { + public int TaskID { get; set; } + public string TaskName { get; set; } + public DateTime? BaselineStartDate { get; set; } + public DateTime? BaselineEndDate { 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 static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 04), StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08) }, + new TaskData() { TaskID = 2, TaskName = "Identify site location", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 02), Duration = "0", BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 02), Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2021, 04, 02), Duration = "5", Progress = 40, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 06), ParentID = 1 }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2021, 04, 08), Duration = "0", EndDate = new DateTime(2021, 04, 08), BaselineStartDate = new DateTime(2021, 04, 08), BaselineEndDate = new DateTime(2021, 04, 08), Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 5, TaskName = "Project initiation", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08) }, + new TaskData() { TaskID = 6, TaskName = "Identify site location", StartDate = new DateTime(2021, 04, 02), Duration = "2", Progress = 30, ParentID = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 02) }, + new TaskData() { TaskID = 7, TaskName = "Perform soil test", StartDate = new DateTime(2021, 04, 02), Duration = "4", Progress = 40, ParentID = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 03) }, + new TaskData() { TaskID = 8, TaskName = "Soil test approval", StartDate = new DateTime(2021, 04, 02), Duration = "5", Progress = 30, ParentID = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 04) } + }; + return Tasks; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVyijDKBofOIgSk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Through event + +The PDF export functionality allows you to customize the appearance of taskbars in the exported PDF document using the [PdfQueryTaskbarInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfQueryTaskbarInfo) event. This event provides flexibility to format various taskbar types, including parent taskbars, individual taskbars, and milestone templates. + +The following code snippet demonstrates how to use the `PdfQueryTaskbarInfo` event to customize taskbar appearance in the exported 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") + { + await Gantt.ExportToPdfAsync(); + } + } + public void PdfQueryTaskbarInfoHandler(PdfQueryTaskbarInfoEventArgs args) + { + if (args.Data.TaskID == 3) + { + args.TaskbarStyle.Color = new PdfTaskbarColor(); + args.TaskbarStyle.Color.ChildProgressColor = new Syncfusion.PdfExport.PdfColor(103, 80, 164); + args.TaskbarStyle.Color.ChildTaskbarColor = new Syncfusion.PdfExport.PdfColor(141, 124, 187); + } + if (args.Data.TaskID == 4) + { + args.TaskbarStyle.Color = new PdfTaskbarColor(); + args.TaskbarStyle.Color.MilestoneColor = new Syncfusion.PdfExport.PdfColor(103, 80, 164); + } + + } + 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/VDheittqhyxNSXIj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Exporting with templates + +### Exporting with column template + +The PDF export functionality allows for advanced customization of Gantt chart columns, including the inclusion of images, background colors, and custom text. This can be achieved using the [PdfQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfQueryCellInfo) event. By handling this event, you can define how individual cells in the Gantt chart are rendered in the exported PDF. + +The following code snippet demonstrates how to use the `PdfQueryCellInfo` event to export Gantt columns with custom text and different cell background colors, + +{% 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") + { + await Gantt.ExportToPdfAsync(); + } + } + public void PdfQueryCellInfoHandler(Syncfusion.Blazor.Gantt.PdfQueryCellInfoEventArgs args) + { + if (args.Column.Field == "TaskName" && args.Data.TaskID == 5) + { + args.Cell.Value = "Updated Value"; + args.Cell.CellStyle = new PdfElementStyle() + { + FillBackgroundColor = "Orange", + Font = new PdfGridFont() + { + FontFamily = PdfFontFamily.TimesRoman, + FontSize = 6, + FontStyle = PdfFontStyle.Italic, + IsTrueType = false, + TextColor = "Red", + TextHighlightColor = "Green" + } + }; + args.Cell.CellStyle.Border = new Syncfusion.Blazor.Grids.PdfBorder() + { + Color = "Black", + DashStyle = Syncfusion.Blazor.Grids.PdfDashStyle.Dot, + Width = 0.1 + }; + } + } + 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/VDLejELSpVTlPVsF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Exporting with column header template + +The PDF export functionality allows to export header template that include `images` and `text` to an PDF document using [PdfColumnHeaderQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfColumnHeaderQueryCellInfo) event. + +In the following sample, header template with images and text are exported to PDF using [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttColumn.html#Syncfusion_Blazor_Gantt_GanttColumn_HeaderTemplate) properties in the `PdfColumnHeaderQueryCellInfo` event. + +> PDF Export supports base64 string to export the images. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Grids +@using Syncfusion.PdfExport +@using System.Net.Http +@using System.IO +@inject HttpClient Http + + + + + + +
    + + @((context as GridColumn).HeaderText) +
    +     +     + + +
    + + @((context as GridColumn).HeaderText) +
    +     +     +     + +     +@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 PdfImage image; + protected override async Task OnInitializedAsync() + { + TaskCollection = GetTaskCollection(); + var imageBytes = await Http.GetByteArrayAsync("https://cdn.syncfusion.com/content/images/landing-page/yes.png"); + using var imageStream = new MemoryStream(imageBytes); + image = PdfImage.FromStream(imageStream); + } + + + public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "PdfExport") + { + await Gantt.ExportToPdfAsync(); + } + } + + public void PdfHeaderQueryCellInfoHandler(Syncfusion.Blazor.Gantt.PdfHeaderQueryCellInfoEventArgs args) + { + args.Cell.CellStyle = new PdfElementStyle(){ Image = image }; + } + + 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? Parent_Id { get; set; } + + } + + public static List GetTaskCollection() + { + List Tasks = new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21)}, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, Parent_Id = 1}, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, Parent_Id = 1}, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, Parent_Id =1}, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21)}, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, Parent_Id =5}, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, Parent_Id =5}, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, Parent_Id =5} + + }; + return Tasks; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtresXgMqlBQjXfl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Exporting with task label template + +The PDF export functionality allows to export task label template that include `images` and `text` to an PDF document using [PdfQueryTaskbarInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfQueryTaskbarInfo) event. + +In the following sample, task label template with images and text are exported to PDF using [LabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.PdfQueryTaskbarInfoEventArgs-1.html#Syncfusion_Blazor_Gantt_PdfQueryTaskbarInfoEventArgs_1_LabelSettings) properties in the [PdfQueryTaskbarInfoEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.PdfQueryTaskbarInfoEventArgs-1.html) event. + +> PDF Export supports base64 string to export the images. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Gantt +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Navigations +@using Syncfusion.PdfExport +@using System.Net.Http +@using System.IO + + + + + + + + + + + + + + + @{ + if ((context as TaskData).TaskID == 5) + { +
    + + @((context as TaskData).TaskName) +
    + } + } +     + + @if ((context as TaskData).TaskID == 2) + { +
    + Updated Value +
    + } + else + { +
    + @((context as TaskData).TaskName) +
    + } +     + + @if ((context as TaskData).TaskID == 3) + { +
    + -@((context as TaskData).Progress)% +
    + } + else + { +
    + @((context as TaskData).Progress)% +
    + } +     +     + +     + +@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 static PdfImage image; + + protected override async Task OnInitializedAsync() + { + this.TaskCollection = GetTaskCollection(); + + using var httpClient = new HttpClient(); + var imageBytes = await httpClient.GetByteArrayAsync("https://cdn.syncfusion.com/content/images/landing-page/yes.png"); + var imageStream = new MemoryStream(imageBytes); + image = PdfImage.FromStream(imageStream); + } + + public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "PdfExport") + { + await Gantt.ExportToPdfAsync(); + } + } + + public void PdfQueryTaskbarInfoHandler(PdfQueryTaskbarInfoEventArgs args) + { + if (args.Data.TaskID == 2) + { + args.LabelSettings.LeftLabelValue = "Updated Value"; + } + else + { + args.LabelSettings.LeftLabelValue = args.Data.TaskName; + } + + if (args.Data.TaskID == 5) + { + args.LabelSettings.RightLabel = new PdfElementStyle() { Image = image }; + } + else + { + args.LabelSettings.RightLabelValue = args.Data.TaskName; + } + + if (args.Data.TaskID == 3) + { + args.LabelSettings.TaskbarLabelValue = $"-{args.Data.Progress}%"; + } + else + { + args.LabelSettings.TaskbarLabelValue = $"{args.Data.Progress}%"; + } + } + + 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() + { + return new List() + { + new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21) }, + new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, + new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" }, + new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" }, + new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21) }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } + }; + } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLyNOhefKeOHrhh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +### Best practices for exporting PDF with templates + +- **Optimize PdfQueryCellInfo event usage**: Use the `PdfQueryCellInfo` event to customize individual cell appearances efficiently. Minimize complex logic to maintain performance. + +- **Utilize PdfColumnHeaderQueryCellInfo effectively**: Apply the `PdfColumnHeaderQueryCellInfo` event for custom header styles and content, focusing on clarity and readability. +- **Accessibility and clarity**: Keep header elements simple and accessible. Use straightforward text and icons to convey column purposes clearly. + +- **Efficient use of PdfQueryTaskbarInfo**: Utilize the `PdfQueryTaskbarInfo` event to apply label customizations based on task data conditions for effective communication of task statuses. +- **Consistent label styling**: Ensure consistent theme across labels with uniform font styles, colors, and sizes. + +### Image handling across events +- **Base64 and MemoryStream**: Convert images to Base64 strings, then use `MemoryStream` to convert them to `PdfImage`. This avoids reliance on potentially inaccessible web links. +- **Height and width management**: Scale images to fit designated areas to prevent default resizing that reflects cell or row heights. Maintain a professional PDF layout. +- **Compression and optimization**: Compress images prior to Base64 conversion to reduce file size while maintaining quality, optimizing the final PDF document size. + +### Troubleshooting PDF export + +1. **Customizations not appearing in PDF** + - **Check event handler**: Ensure that the `PdfQueryTaskbarInfo` event is correctly implemented and bound in your code. Double-check the event handler's logic to verify that conditions for customization are being met. + - **Data matching**: Ensure that the task data (like `TaskID`) used in the event matches the data in the task collection. Mismatches can prevent customizations from applying. + +2. **Images not displaying** + - **Image URL**: Verify that the image URLs are correct and accessible. Ensure that external images are hosted on a server with public access rights. + - **Supported formats**: Use compatible image formats such as JPG, PNG, or GIF. Unsupported formats may not render correctly in a PDF. + +3. **Performance issues** + - **Optimize resources**: Large images or complex styling may slow down the PDF export process. Consider optimizing image size and simplifying styles. + +4. **Color code customization** + - **Use valid color codes**: You can use HEX (`#RRGGBB`), or standard color names like `red`, `blue`, etc. Ensure all color codes or names used are supported and valid. + - **Consistency across styles**: Maintain consistent use of color codes in the styles to avoid unexpected color changes or conflicts during PDF rendering. \ No newline at end of file diff --git a/blazor/gantt-chart/header-and-footer.md b/blazor/gantt-chart/header-and-footer.md new file mode 100644 index 0000000000..4f32c67ed8 --- /dev/null +++ b/blazor/gantt-chart/header-and-footer.md @@ -0,0 +1,206 @@ +--- +layout: post +title: Customizing PDF Headers and Footers in Blazor Gantt Chart Component | Syncfusion +description: Learn how to customize headers and footers in PDF exports of the Syncfusion Blazor Gantt Chart component with text, lines, page numbers, and images. +platform: Blazor +control: header and footer of PDF exporting +documentation: ug +--- + +# Header and footer of PDF exporting in Blazor Gantt Chart component + +Customizing headers and footers in PDF exports of the Blazor Gantt Chart component allows adding text, lines, page numbers, and images to enhance document professionalism for projects. Use [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html) with [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) to define content arrays, specifying `Type` (e.g., Text, Line), `Value`, `Position`, `Style`, or `Src` for images with `Base64` encoding. + +## Write a text in header and footer + +Customize text in headers or footers 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 [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html). Set `Type` to **Text**, define `Value` for the text, `Position` for x/y coordinates, and `Style` for color or font size. + +{% 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" %} + +## Draw a line in header and footer + +Customize lines in headers or footers 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 [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html). Set `type` to **Line**, define `points` for start/end coordinates, `pageNumberType` for position, and `style` for color, width, or dash style. + +Supported line styles are, + +* Dash +* Dot +* DashDot +* DashDotDot +* Solid + +{% 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" %} + +## See also +- [How to export to PDF?](https://blazor.syncfusion.com/documentation/gantt-chart/pdf-export) +- [How to manage task dependencies?](https://blazor.syncfusion.com/documentation/gantt-chart/task-dependencies) diff --git a/blazor/gantt-chart/how-to/open-add-edit-dialog-dynamically.md b/blazor/gantt-chart/how-to/open-add-edit-dialog-dynamically.md index ba09a7a540..7564f693af 100644 --- a/blazor/gantt-chart/how-to/open-add-edit-dialog-dynamically.md +++ b/blazor/gantt-chart/how-to/open-add-edit-dialog-dynamically.md @@ -1,7 +1,7 @@ --- layout: post title: Open Add Edit Dialog in Blazor Gantt Chart Component | Syncfusion -description: Learn here all about Open Add Edit Dialog Dynamically in Syncfusion Blazor Gantt Chart component and more. +description: Learn how to open add and edit dialogs programmatically in the Syncfusion Blazor Gantt Chart component for efficient task creation and modification. platform: Blazor control: Gantt Chart documentation: ug @@ -11,12 +11,14 @@ documentation: ug Gantt Chart add and edit dialogs can be opened dynamically by using [OpenAddDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.Action.html#Syncfusion_Blazor_Gantt_Action_OpenAddDialog) and [OpenEditDialog](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.Action.html#Syncfusion_Blazor_Gantt_Action_OpenEditDialog) methods. The following code example shows how to open add and edit dialog on separate button click actions. -```cshtml +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + @using Syncfusion.Blazor.Gantt - + @@ -39,31 +41,32 @@ Gantt Chart add and edit dialogs can be opened dynamically by using [OpenAddDial 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 List SubTasks { 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, 23), }, - 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, 23), }, - new TaskData() { TaskId = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 04), Duration = "3", Progress = 30, ParentId = 5 }, - new TaskData() { TaskId = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 04), Duration = "3", Progress = 40, ParentId = 5 }, - new TaskData() { TaskId = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 04), 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, 04), EndDate = new DateTime(2022, 01, 06), }, + new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 01, 04), Duration = "3", Progress = 30, ParentID = 5 }, + new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 01, 04), Duration = "3", Progress = 40, ParentID = 5 }, + new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 01, 04), Duration = "0", Progress = 30, ParentID = 5 } }; return Tasks; } } -``` -## Demonstration image for dialogue -![Opening Edit Dialog in Blazor Gantt Chart](../images/blazor-gantt-chart-open-edit-dialog.png) \ No newline at end of file +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLeCtANAbQtiBAd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/gantt-chart/images/blazor-gantt-chart-open-edit-dialog.png b/blazor/gantt-chart/images/blazor-gantt-chart-open-edit-dialog.png deleted file mode 100644 index 9fafe04d13..0000000000 Binary files a/blazor/gantt-chart/images/blazor-gantt-chart-open-edit-dialog.png and /dev/null differ diff --git a/blazor/gantt-chart/pdf-export.md b/blazor/gantt-chart/pdf-export.md index 60a7f84a51..bef9c0089d 100644 --- a/blazor/gantt-chart/pdf-export.md +++ b/blazor/gantt-chart/pdf-export.md @@ -1,1225 +1,34 @@ --- layout: post title: PDF Export in Blazor Gantt Chart Component | Syncfusion -description: Checkout and learn here all about PDF Export in Syncfusion Blazor Gantt Chart component and much more. +description: Learn how to export Gantt to PDF in the Syncfusion Blazor Gantt Chart component, including indicators, blob objects, single-page, multiple Gantt, and theme options. platform: Blazor -control: Gantt Chart +control: PDF export documentation: ug --- # PDF Export in Blazor Gantt Chart Component -The PDF export feature enables exporting Gantt chart data to a PDF document. To perform the export, use the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToPdfAsync) method. Ensure that PDF export is enabled in the Gantt chart component by setting the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowPdfExport) property to true. +The PDF export feature enables exporting Blazor Gantt chart data to a PDF document. To perform the export, use the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToPdfAsync) method. Ensure that PDF export is enabled in the Gantt chart component by setting the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowPdfExport) property to true. +PDF export in the Blazor Gantt Chart component enables exporting project data to PDF documents for sharing or archiving, using the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToPdfAsync) method. with [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowPdfExport) set to**true**. This feature supports exporting timelines, tasks, and dependencies, with options for indicators via `base64` images, blob objects for previews, single-page layouts, multiple Gantt instances in one file, and themes like Material or Bootstrap. Focus on auto-scheduled tasks for accurate export, as manual scheduling is not currently supported. -{% 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") - { - 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() - { - new GanttColumn(){ Field = "TaskID", HeaderText = "Task Id", Width = "100" }, - new GanttColumn(){ Field = "TaskName", HeaderText = "Task Name", Width = "200"}, - new GanttColumn(){ Field = "StartDate", HeaderText = "Start Date", Width = "150"}, - }; - 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/hXhIiXZAVoCQueAU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -### Through event - -The PDF export functionality allows you to export only specific columns from the Gantt chart, rather than exporting all columns by default. This can be achieved by using the `Columns` argument in the [PdfExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfExporting) event. +## Export basic Gantt data -The following code demonstrates how to use the `PdfExporting` event to export specific columns of the Gantt chart to a PDF document, +Export Gantt data to PDF by setting [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_AllowPdfExport) to**true** and calling [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.SfGantt-1.html#Syncfusion_Blazor_Gantt_SfGantt_1_ExportToPdfAsync), which generates a document with the chart and tree-grid data. {% 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") - { - await Gantt.ExportToPdfAsync(); - } - } - public void PdfExportingHandler(PdfExportEventArgs args) - { - args.Columns = new List() - { - new GanttColumn(){ Field = "TaskID", HeaderText = "Task Id", Width = "100" }, - new GanttColumn(){ Field = "TaskName", HeaderText = "Task Name", Width = "200"}, - new GanttColumn(){ Field = "StartDate", HeaderText = "Start Date", Width = "150"}, - }; - } - - 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/hXVoCjXAVSBmCcUQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -## Customizing taskbar appearance - -### Through property - -The PDF export functionality allows you to customize the appearance of taskbars in the exported PDF document using the [TaskbarColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.PdfGanttStyle.html#Syncfusion_Blazor_Gantt_PdfGanttStyle_TaskbarColor) property in the [GanttPdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttPdfExportProperties.html) class. This property enables you to set colors for various types of taskbars, including: - -* Parent Taskbars -* Child Taskbars -* Milestones -* Critical Paths -* Manual Taskbars -* Baselines - -By configuring the TaskbarColor property, you can format these taskbars to match your desired color scheme. The following code snippet demonstrates how to use the `TaskbarColor` property to customize the colors of different taskbars in the exported PDF document, - -{% 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 pdfExport = new GanttPdfExportProperties(); - pdfExport.Style = new PdfGanttStyle(); - pdfExport.Style.TaskbarColor = new PdfTaskbarColor(); - pdfExport.Style.TaskbarColor.ParentTaskbarColor = new PdfColor(220, 118, 51); - pdfExport.Style.TaskbarColor.ParentProgressColor = new PdfColor(203, 67, 53); - pdfExport.Style.TaskbarColor.ChildProgressColor = new PdfColor(35, 155, 86); - pdfExport.Style.TaskbarColor.ChildTaskbarColor = new PdfColor(130, 224, 170); - pdfExport.Style.TaskbarColor.CriticalPathTaskbarColor = new PdfColor(173, 121, 64); - pdfExport.Style.TaskbarColor.CriticalPathProgressColor = new PdfColor(145, 76, 0); - pdfExport.Style.TaskbarColor.BaselineColor = new PdfColor(179, 38, 30); - pdfExport.Style.TaskbarColor.MilestoneColor = new PdfColor(141, 124, 187); - await Gantt.ExportToPdfAsync(pdfExport); - } - } - - public class TaskData - { - public int TaskID { get; set; } - public string TaskName { get; set; } - public DateTime? BaselineStartDate { get; set; } - public DateTime? BaselineEndDate { 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 static List GetTaskCollection() - { - List Tasks = new List() - { - new TaskData() { TaskID = 1, TaskName = "Project initiation", BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 04), StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08) }, - new TaskData() { TaskID = 2, TaskName = "Identify site location", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 02), Duration = "0", BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 02), Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2021, 04, 02), Duration = "5", Progress = 40, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 06), ParentID = 1 }, - new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2021, 04, 08), Duration = "0", EndDate = new DateTime(2021, 04, 08), BaselineStartDate = new DateTime(2021, 04, 08), BaselineEndDate = new DateTime(2021, 04, 08), Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 5, TaskName = "Project initiation", StartDate = new DateTime(2021, 04, 02), EndDate = new DateTime(2021, 04, 08) }, - new TaskData() { TaskID = 6, TaskName = "Identify site location", StartDate = new DateTime(2021, 04, 02), Duration = "2", Progress = 30, ParentID = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 02) }, - new TaskData() { TaskID = 7, TaskName = "Perform soil test", StartDate = new DateTime(2021, 04, 02), Duration = "4", Progress = 40, ParentID = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 03) }, - new TaskData() { TaskID = 8, TaskName = "Soil test approval", StartDate = new DateTime(2021, 04, 02), Duration = "5", Progress = 30, ParentID = 5, BaselineStartDate = new DateTime(2021, 04, 02), BaselineEndDate = new DateTime(2021, 04, 04) } - }; - return Tasks; - } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVyijDKBofOIgSk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -### Through event - -The PDF export functionality allows you to customize the appearance of taskbars in the exported PDF document using the [PdfQueryTaskbarInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfQueryTaskbarInfo) event. This event provides the flexibility to customize and format the appearance of taskbars, including parent taskbars, individual taskbars, and milestone templates. - -The following code snippet demonstrates how to use the `PdfQueryTaskbarInfo` event to customize the appearance of taskbars in the exported 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; @@ -1235,21 +44,7 @@ The following code snippet demonstrates how to use the `PdfQueryTaskbarInfo` eve await Gantt.ExportToPdfAsync(); } } - public void PdfQueryTaskbarInfoHandler(PdfQueryTaskbarInfoEventArgs args) - { - if (args.Data.TaskID == 3) - { - args.TaskbarStyle.Color = new PdfTaskbarColor(); - args.TaskbarStyle.Color.ChildProgressColor = new Syncfusion.PdfExport.PdfColor(103, 80, 164); - args.TaskbarStyle.Color.ChildTaskbarColor = new Syncfusion.PdfExport.PdfColor(141, 124, 187); - } - if (args.Data.TaskID == 4) - { - args.TaskbarStyle.Color = new PdfTaskbarColor(); - args.TaskbarStyle.Color.MilestoneColor = new Syncfusion.PdfExport.PdfColor(103, 80, 164); - } - - } + public class TaskData { public int TaskID { get; set; } @@ -1282,15 +77,20 @@ The following code snippet demonstrates how to use the `PdfQueryTaskbarInfo` eve {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDheittqhyxNSXIj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLIsjZgrAtEMygE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Events triggered during exporting -When exporting the Gantt chart to a PDF document, a series of events are triggered in a specific order, allowing for advanced customization of the export process. Understanding this flow is essential to control and modify the exported content effectively. Below is the flow of events that occur during PDF export in the Gantt chart: +When exporting the Gantt chart to a PDF document, a series of events are triggered in a specific order, allowing for advanced customization of the export process. Understanding this flow is essential for effectively controlling and modifying the exported content. Below is the sequence of events that occur during PDF export in the Gantt chart: * [PdfExporting](https://blazor.syncfusion.com/documentation/gantt-chart/events) + * [PdfQueryTimelineCellInfo](https://blazor.syncfusion.com/documentation/gantt-chart/events) + * [PdfColumnHeaderQueryCellInfo](https://blazor.syncfusion.com/documentation/gantt-chart/events) + * [PdfQueryCellInfo](https://blazor.syncfusion.com/documentation/gantt-chart/events) + * [PdfQueryTaskbarInfo](https://blazor.syncfusion.com/documentation/gantt-chart/events) + * [PdfExported](https://blazor.syncfusion.com/documentation/gantt-chart/events) diff --git a/blazor/gantt-chart/template-pdf-export.md b/blazor/gantt-chart/template-pdf-export.md deleted file mode 100644 index 8b797a5bd7..0000000000 --- a/blazor/gantt-chart/template-pdf-export.md +++ /dev/null @@ -1,425 +0,0 @@ ---- -layout: post -title: PDF Export with templates in Blazor Gantt Chart Component | Syncfusion -description: Checkout and learn here all about PDF Exporting with templates in Syncfusion Blazor Gantt Chart component and much more. -platform: Blazor -control: Gantt Chart -documentation: ug ---- - -# Exporting PDF with templates - -The Gantt chart export functionality allows you to export both column and header templates to a PDF document. These templates can include various customizations such as images, formatted text, and custom cell styles within the header and columns. - -## Exporting with column template - -The PDF export functionality allows for advanced customization of Gantt chart columns, including the inclusion of images, background colors, and custom text. This can be achieved using the [PdfQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfQueryCellInfo) event. By handling this event, you can define how individual cells in the Gantt chart are rendered in the exported PDF. - -The following code snippet demonstrates how to use the `PdfQueryCellInfo` event to export Gantt columns with custom text and different cell background colors, - -{% 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") - { - await Gantt.ExportToPdfAsync(); - } - } - public void PdfQueryCellInfoHandler(Syncfusion.Blazor.Gantt.PdfQueryCellInfoEventArgs args) - { - if (args.Column.Field == "TaskName" && args.Data.TaskID == 5) - { - args.Cell.Value = "Updated Value"; - args.Cell.CellStyle = new PdfElementStyle() - { - FillBackgroundColor = "Orange", - Font = new PdfGridFont() - { - FontFamily = PdfFontFamily.TimesRoman, - FontSize = 6, - FontStyle = PdfFontStyle.Italic, - IsTrueType = false, - TextColor = "Red", - TextHighlightColor = "Green" - } - }; - args.Cell.CellStyle.Border = new Syncfusion.Blazor.Grids.PdfBorder() - { - Color = "Black", - DashStyle = Syncfusion.Blazor.Grids.PdfDashStyle.Dot, - Width = 0.1 - }; - } - } - 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/VDLejELSpVTlPVsF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -## Exporting with column header template - -The PDF export functionality allows for customization of Gantt chart columns header, including the inclusion of images, background colors, and custom text. This can be achieved using the [PdfColumnHeaderQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfColumnHeaderQueryCellInfo) event. By handling this event, you can define how each column header in the Gantt chart is rendered in the exported PDF. - -The following code snippet demonstrates how to use the `PdfColumnHeaderQueryCellInfo` event to export Gantt columns header with custom text and image on the task name column header, - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Gantt -@using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.Navigations -@using Syncfusion.PdfExport -@using System.Net.Http -@using System.IO -@inject HttpClient Http - - - - - - - - - - - - - - - -@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 PdfImage image; - - protected override async Task OnInitializedAsync() - { - TaskCollection = GetTaskCollection(); - - var imageBytes = await Http.GetByteArrayAsync("https://cdn.syncfusion.com/content/images/landing-page/yes.png"); - using var imageStream = new MemoryStream(imageBytes); - image = PdfImage.FromStream(imageStream); - } - - public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) - { - if (args.Item.Id == "PdfExport") - { - await Gantt.ExportToPdfAsync(); - } - } - - public void PdfHeaderQueryCellInfoHandler(Syncfusion.Blazor.Gantt.PdfHeaderQueryCellInfoEventArgs args) - { - if (args.Column.Field == "TaskName") - { - args.Cell.Value = "Updated Value"; - args.Cell.CellStyle = new PdfElementStyle(){ Image = image}; - - } - } - - 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() - { - return 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, 09) }, - 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 } - }; - } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrStYVIfUjgPhjz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -## Custom label for Gantt Chart PDF export - -The PDF export feature of the Gantt chart allows for detailed customization of labels such as right label, left label, and task label. This functionality includes the ability to include images, change background colors, and add custom text. These customizations are managed using the [PdfQueryTaskbarInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Gantt.GanttEvents-1.html#Syncfusion_Blazor_Gantt_GanttEvents_1_PdfQueryTaskbarInfo) event. By handling this event, you can specify how each label in the Gantt chart will appear in the exported PDF. - -The following example demonstrates how to implement the `PdfQueryTaskbarInfo` event to customize the PDF export of Gantt chart labels with specific text and images, - -{% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Gantt -@using Syncfusion.Blazor.Grids -@using Syncfusion.Blazor.Navigations -@using Syncfusion.PdfExport -@using System.Net.Http -@using System.IO - - - - - - - - - - - - - - - @{ - if ((context as TaskData).TaskID == 5) - { -
    - - @((context as TaskData).TaskName) -
    - } - } -     - - @if ((context as TaskData).TaskID == 2) - { -
    - Updated Value -
    - } - else - { -
    - @((context as TaskData).TaskName) -
    - } -     - - @if ((context as TaskData).TaskID == 3) - { -
    - -@((context as TaskData).Progress)% -
    - } - else - { -
    - @((context as TaskData).Progress)% -
    - } -     -     - -     - -@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 static PdfImage image; - - protected override async Task OnInitializedAsync() - { - this.TaskCollection = GetTaskCollection(); - - using var httpClient = new HttpClient(); - var imageBytes = await httpClient.GetByteArrayAsync("https://cdn.syncfusion.com/content/images/landing-page/yes.png"); - var imageStream = new MemoryStream(imageBytes); - image = PdfImage.FromStream(imageStream); - } - - public async void ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) - { - if (args.Item.Id == "PdfExport") - { - await Gantt.ExportToPdfAsync(); - } - } - - public void PdfQueryTaskbarInfoHandler(PdfQueryTaskbarInfoEventArgs args) - { - if (args.Data.TaskID == 2) - { - args.LabelSettings.LeftLabelValue = "Updated Value"; - } - else - { - args.LabelSettings.LeftLabelValue = args.Data.TaskName; - } - - if (args.Data.TaskID == 5) - { - args.LabelSettings.RightLabel = new PdfElementStyle() { Image = image }; - } - else - { - args.LabelSettings.RightLabelValue = args.Data.TaskName; - } - - if (args.Data.TaskID == 3) - { - args.LabelSettings.TaskbarLabelValue = $"-{args.Data.Progress}%"; - } - else - { - args.LabelSettings.TaskbarLabelValue = $"{args.Data.Progress}%"; - } - } - - 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() - { - return new List() - { - new TaskData() { TaskID = 1, TaskName = "Project initiation", StartDate = new DateTime(2022, 04, 05), EndDate = new DateTime(2022, 04, 21) }, - new TaskData() { TaskID = 2, TaskName = "Identify Site location", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 }, - new TaskData() { TaskID = 3, TaskName = "Perform soil test", StartDate = new DateTime(2022, 04, 05), Duration = "4", Progress = 40, ParentID = 1, Predecessor = "2" }, - new TaskData() { TaskID = 4, TaskName = "Soil test approval", StartDate = new DateTime(2022, 04, 05), Duration = "0", Progress = 30, ParentID = 1 , Predecessor = "3" }, - new TaskData() { TaskID = 5, TaskName = "Project estimation", StartDate = new DateTime(2022, 04, 06), EndDate = new DateTime(2022, 04, 21) }, - new TaskData() { TaskID = 6, TaskName = "Develop floor plan for estimation", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 30, ParentID = 5 }, - new TaskData() { TaskID = 7, TaskName = "List materials", StartDate = new DateTime(2022, 04, 06), Duration = "3", Progress = 40, ParentID = 5 }, - new TaskData() { TaskID = 8, TaskName = "Estimation approval", StartDate = new DateTime(2022, 04, 06), Duration = "0", Progress = 30, ParentID = 5 } - }; - } -} - -{% endhighlight %} -{% endtabs %} - -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLyNOhefKeOHrhh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -## Best practices for exporting PDF with templates - -- **Optimize PdfQueryCellInfo event usage**: Use the `PdfQueryCellInfo` event to customize individual cell appearances efficiently. Minimize complex logic to maintain performance. - -- **Utilize PdfColumnHeaderQueryCellInfo effectively**: Apply the `PdfColumnHeaderQueryCellInfo` event for custom header styles and content, focusing on clarity and readability. -- **Accessibility and clarity**: Keep header elements simple and accessible. Use straightforward text and icons to convey column purposes clearly. - -- **Efficient use of PdfQueryTaskbarInfo**: Utilize the `PdfQueryTaskbarInfo` event to apply label customizations based on task data conditions for effective communication of task statuses. -- **Consistent label styling**: Ensure consistent theme across labels with uniform font styles, colors, and sizes. - -## Image handling across events -- **Base64 and MemoryStream**: Convert images to Base64 strings, then use `MemoryStream` to convert them to `PdfImage`. This avoids reliance on potentially inaccessible web links. -- **Height and width management**: Scale images to fit designated areas to prevent default resizing that reflects cell or row heights. Maintain a professional PDF layout. -- **Compression and optimization**: Compress images prior to Base64 conversion to reduce file size while maintaining quality, optimizing the final PDF document size. - -## Troubleshooting PDF export - -1. **Customizations not appearing in PDF** - - **Check event handler**: Ensure that the `PdfQueryTaskbarInfo` event is correctly implemented and bound in your code. Double-check the event handler's logic to verify that conditions for customization are being met. - - **Data matching**: Ensure that the task data (like `TaskID`) used in the event matches the data in the task collection. Mismatches can prevent customizations from applying. - -2. **Images not displaying** - - **Image URL**: Verify that the image URLs are correct and accessible. Ensure that external images are hosted on a server with public access rights. - - **Supported formats**: Use compatible image formats such as JPG, PNG, or GIF. Unsupported formats may not render correctly in a PDF. - -3. **Performance issues** - - **Optimize resources**: Large images or complex styling may slow down the PDF export process. Consider optimizing image size and simplifying styles. - -4. **Color code customization** - - **Use valid color codes**: You can use HEX (`#RRGGBB`), or standard color names like `red`, `blue`, etc. Ensure all color codes or names used are supported and valid. - - **Consistency across styles**: Maintain consistent use of color codes in the styles to avoid unexpected color changes or conflicts during PDF rendering. \ No newline at end of file