908232: Added PDF UG

Author: Vignesh-Sivalingam

blazor/gantt-chart/template-pdf-export.md

@@ -12,18 +12,17 @@ documentation: ug
 
 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 header template
+## Exporting with column 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 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 `PdfColumnHeaderQueryCellInfo` event to export Gantt columns header with custom text and image on the task name column header,
+The following code snippet demonstrates how to use the `PdfQueryCellInfo` event to export Gantt columns with custom text and different cell background colors,
 
-``` cshtml
+```cshtml
 @using Syncfusion.Blazor.Gantt
 @using Syncfusion.Blazor.Grids
 @using Syncfusion.Blazor.Navigations
 @using Syncfusion.PdfExport
-@using System.Net
 
 <SfGantt @ref="Gantt" ID="GanttExport" DataSource="@TaskCollection" Height="450px" Width="900px" AllowPdfExport="true" Toolbar="toolbarItem">
     <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Dependency="Predecessor"
@@ -37,17 +36,13 @@ The following code snippet demonstrates how to use the `PdfColumnHeaderQueryCell
         <GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
         <GanttColumn Field="Predecessor" HeaderText="Dependency"></GanttColumn>
     </GanttColumns>
-    <GanttEvents OnToolbarClick="ToolbarClickHandler" PdfColumnHeaderQueryCellInfo="PdfHeaderQueryCellInfoHandler" TValue="TaskData"></GanttEvents>
+    <GanttEvents OnToolbarClick="ToolbarClickHandler" PdfQueryCellInfo="PdfQueryCellInfoHandler" TValue="TaskData"></GanttEvents>
 </SfGantt>
 
 @code {
     private List<TaskData> TaskCollection { get; set; }
     private SfGantt<TaskData> Gantt;
     private List<object> toolbarItem = new List<Object>() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
-    private static WebClient webClient = new WebClient();
-    private static byte[] imageBytes = webClient.DownloadData("https://cdn.syncfusion.com/content/images/landing-page/yes.png");
-    private static MemoryStream imageStream = new MemoryStream(imageBytes);
-    public static PdfImage image = PdfImage.FromStream(imageStream);
     protected override void OnInitialized()
     {
         this.TaskCollection = GetTaskCollection();
@@ -59,12 +54,30 @@ The following code snippet demonstrates how to use the `PdfColumnHeaderQueryCell
             await Gantt.ExportToPdfAsync();
         }
     }
-    public void PdfHeaderQueryCellInfoHandler(Syncfusion.Blazor.Gantt.PdfHeaderQueryCellInfoEventArgs args)
+    public void PdfQueryCellInfoHandler(Syncfusion.Blazor.Gantt.PdfQueryCellInfoEventArgs<TaskData> args)
     {
-        if (args.Column.Field == "TaskName")
+        if (args.Column.Field == "TaskName" && args.Data.TaskId == 5)
         {
             args.Cell.Value = "Updated Value";
-            args.Cell.CellStyle = new PdfElementStyle() { Image = image};
+            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 PdfBorder()
+            {
+                Color = "Black",
+                DashStyle = Syncfusion.Blazor.Grids.PdfDashStyle.Dot,
+                Width = 0.1
+            };
         }
     }
     public class TaskData
@@ -97,17 +110,18 @@ The following code snippet demonstrates how to use the `PdfColumnHeaderQueryCell
 }
 ```
 
-## Exporting with column template
+## Exporting with column header 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 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 `PdfQueryCellInfo` event to export Gantt columns with custom text and different cell background colors,
+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,
 
-```cshtml
+``` cshtml
 @using Syncfusion.Blazor.Gantt
 @using Syncfusion.Blazor.Grids
 @using Syncfusion.Blazor.Navigations
 @using Syncfusion.PdfExport
+@using System.Net
 
 <SfGantt @ref="Gantt" ID="GanttExport" DataSource="@TaskCollection" Height="450px" Width="900px" AllowPdfExport="true" Toolbar="toolbarItem">
     <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Dependency="Predecessor"
@@ -121,13 +135,17 @@ The following code snippet demonstrates how to use the `PdfQueryCellInfo` event
         <GanttColumn Field="Duration" HeaderText="Duration"></GanttColumn>
         <GanttColumn Field="Predecessor" HeaderText="Dependency"></GanttColumn>
     </GanttColumns>
-    <GanttEvents OnToolbarClick="ToolbarClickHandler" PdfQueryCellInfo="PdfQueryCellInfoHandler" TValue="TaskData"></GanttEvents>
+    <GanttEvents OnToolbarClick="ToolbarClickHandler" PdfColumnHeaderQueryCellInfo="PdfHeaderQueryCellInfoHandler" TValue="TaskData"></GanttEvents>
 </SfGantt>
 
 @code {
     private List<TaskData> TaskCollection { get; set; }
     private SfGantt<TaskData> Gantt;
     private List<object> toolbarItem = new List<Object>() { new ToolbarItem() { Text = "PDF Export", TooltipText = "PDF Export", Id = "PdfExport", PrefixIcon = "e-pdfexport" } };
+    private static WebClient webClient = new WebClient();
+    private static byte[] imageBytes = webClient.DownloadData("https://cdn.syncfusion.com/content/images/landing-page/yes.png");
+    private static MemoryStream imageStream = new MemoryStream(imageBytes);
+    public static PdfImage image = PdfImage.FromStream(imageStream);
     protected override void OnInitialized()
     {
         this.TaskCollection = GetTaskCollection();
@@ -139,30 +157,12 @@ The following code snippet demonstrates how to use the `PdfQueryCellInfo` event
             await Gantt.ExportToPdfAsync();
         }
     }
-    public void PdfQueryCellInfoHandler(Syncfusion.Blazor.Gantt.PdfQueryCellInfoEventArgs<TaskData> args)
+    public void PdfHeaderQueryCellInfoHandler(Syncfusion.Blazor.Gantt.PdfHeaderQueryCellInfoEventArgs args)
     {
-        if (args.Column.Field == "TaskName" && args.Data.TaskId == 5)
+        if (args.Column.Field == "TaskName")
         {
             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 PdfBorder()
-            {
-                Color = "Black",
-                DashStyle = Syncfusion.Blazor.Grids.PdfDashStyle.Dot,
-                Width = 0.1
-            };
+            args.Cell.CellStyle = new PdfElementStyle() { Image = image};
         }
     }
     public class TaskData
@@ -194,4 +194,3 @@ The following code snippet demonstrates how to use the `PdfQueryCellInfo` event
     }
 }
 ```
-