diff --git a/blazor/datagrid/images/Enabling-horizontal-overflow.gif b/blazor/datagrid/images/Enabling-horizontal-overflow.gif
new file mode 100644
index 0000000000..82378f5bc3
Binary files /dev/null and b/blazor/datagrid/images/Enabling-horizontal-overflow.gif differ
diff --git a/blazor/datagrid/pdf-export-options.md b/blazor/datagrid/pdf-export-options.md
new file mode 100644
index 0000000000..89e17daa9b
--- /dev/null
+++ b/blazor/datagrid/pdf-export-options.md
@@ -0,0 +1,2103 @@
+---
+layout: post
+title: PDF Export Options in Blazor DataGrid | Syncfusion
+description: Checkout and learn here all about PDF Export Options in Syncfusion Blazor DataGrid and much more.
+platform: Blazor
+control: DataGrid
+documentation: ug
+---
+
+# PDF export options in Blazor DataGrid
+
+The Syncfusion Blazor DataGrid allows you to customize the PDF export options functionality. This flexibility enables you to have greater control over the exported content and layout to meet your specific requirements.
+
+The PDF export action can be customized based on your requirements using the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) property. By using the `PdfExportProperties` property, you can export the current page records, selected records, or filtered records, exclude or include hidden column, export with custom data source and change the file name. Additionally, you can customize the page alignments using the `PdfExportProperties` property.
+
+## Export current page records
+
+Exporting the current page in Syncfusion Blazor DataGrid to a PDF document provides the ability to export the currently displayed page records. This feature allows for generating PDF documents that specifically include the content from the current page of the Grid.
+
+To export the current page of the Grid to a PDF document, you need to specify the [ExportType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_ExportType) property. This property allows you to define which records you want to export. You can choose between two options:
+
+1. **CurrentPage**: Exports only the records on the current Grid page.
+2. **AllPages**: Exports all the records from the Grid.
+
+The following example demonstrates how to export current page to a PDF document when a toolbar item is clicked, using the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event and the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfGrid Grid;
+ public List Orders { get; set; }
+ private string SelectedExportType = "CurrentPage";
+ List DropDownValue = new List
+ {
+ new DropDownOrder { Text = "CurrentPage", Value = "CurrentPage" },
+ new DropDownOrder { Text = "AllPages", Value = "AllPages" },
+ };
+
+ protected override void OnInitialized()
+ {
+ Orders = EmployeeData.GetAllRecords();
+ }
+
+ public async Task ToolbarClickHandler(ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
+ {
+ var exportProperties = new PdfExportProperties
+ {
+ ExportType = SelectedExportType == "AllPages" ? ExportType.AllPages : ExportType CurrentPage
+ };
+ await Grid.ExportToPdfAsync(exportProperties);
+ }
+ }
+
+ public class DropDownOrder
+ {
+ public string Text { get; set; }
+ public string Value { get; set; }
+ }
+
+}
+
+{% endhighlight %}
+{% highlight c# tabtitle="EmployeeData.cs" %}
+
+ public class EmployeeData
+ {
+ public static List Employees = new List();
+
+ public EmployeeData(int employeeID, string firstName, string lastName, string city)
+ {
+ this.EmployeeID = employeeID;
+ this.FirstName = firstName;
+ this.LastName = lastName;
+ this.City = city;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Employees.Count == 0)
+ {
+ Employees.Add(new EmployeeData(1001, "Nancy", "Davolio", "Seattle"));
+ Employees.Add(new EmployeeData(1002, "Andrew", "Fuller", "Tacoma"));
+ Employees.Add(new EmployeeData(1003, "Janet", "Leverling", "Kirkland"));
+ Employees.Add(new EmployeeData(1004, "Margaret", "Peacock", "Redmond"));
+ Employees.Add(new EmployeeData(1005, "Steven", "Buchanan", "London"));
+ Employees.Add(new EmployeeData(1006, "Michael", "Suyama", "London"));
+ Employees.Add(new EmployeeData(1007, "Robert", "King", "London"));
+ Employees.Add(new EmployeeData(1008, "Laura", "Callahan", "Seattle"));
+ Employees.Add(new EmployeeData(1009, "Anne", "Dodsworth", "London"));
+ }
+ return Employees;
+ }
+
+ public int EmployeeID { get; set; }
+ public string FirstName { get; set; }
+ public string LastName { get; set; }
+ public string City { get; set; }
+ }
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBeNzMWgoxPClQM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Export selected records
+
+Exporting only the selected records from the Syncfusion Blazor DataGrid allows generating PDF document that include only the desired data from the Grid. This feature provides the flexibility to export specific records that are relevant to the needs, enabling more focused and targeted PDF exports.
+
+To export the selected records from the Grid to a PDF document, you can follow these steps:
+
+1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event of the Grid and retrieve the selected records using the [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRecordsAsync) method.
+
+2. Assign the selected data to the [ExportProperties.DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_DataSource) property.
+
+3. Trigger the export operation using the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method.
+
+The following example demonstrates how to export the selected records to a PDF document when a toolbar item is clicked.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfGrid Grid;
+ public List Orders { get; set; }
+
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+
+ public async Task ToolbarClickHandler(ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
+ {
+ var selectedRecords = await Grid.GetSelectedRecordsAsync();
+ PdfExportProperties exportProperties = new PdfExportProperties
+ {
+ DataSource = selectedRecords
+ };
+ await this.Grid.ExportToPdfAsync(exportProperties);
+ }
+ }
+}
+
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData(int orderID, string customerID, double freight, string shipCity)
+ {
+ this.OrderID = orderID;
+ this.CustomerID = customerID;
+ this.Freight = freight;
+ this.ShipCity = shipCity;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims"));
+ Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster"));
+ Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro"));
+ Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon"));
+ Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi"));
+ Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro"));
+ Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern"));
+ Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève"));
+ Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende"));
+ Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal"));
+ Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz"));
+ Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F."));
+ Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln"));
+ Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro"));
+ Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque"));
+ }
+
+ return Orders;
+ }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCity { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLyZJWignXqmlaL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Export filtered records
+
+Exporting only the filtered records from the Syncfusion Blazor DataGrid allows you to generate PDF document that include only the data that matches your applied filters. This feature is useful when you want to export a subset of data based on specific criteria.
+
+This can be achieved by defining the filtered data in the [ExportProperties.DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_DataSource) property before initiating the export.
+
+To export only the filtered data from the Grid to a PDF document, you can follow these steps:
+
+1. Apply the desired filter to the Grid data by enabling [AllowFiltering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering) property.
+
+2. Get the filtered data using the [GetFilteredRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetFilteredRecordsAsync_System_Boolean_) method.
+
+3. Assign the filtered data to the `ExportProperties.DataSource` property.
+
+4. Trigger the export operation using the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method.
+
+The following example demonstrates how to export the filtered records to a PDF document.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfGrid Grid;
+ public List Orders { get; set; }
+
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+
+ public async Task ToolbarClickHandler(ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
+ {
+ var FilterdRecords = (IEnumerable)await Grid.GetFilteredRecordsAsync();
+ PdfExportProperties exportProperties = new PdfExportProperties
+ {
+ DataSource = FilterdRecords
+ };
+ await this.Grid.ExportToPdfAsync(exportProperties);
+ }
+ }
+}
+
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData(int orderID, string customerID, double freight, string shipCity)
+ {
+ this.OrderID = orderID;
+ this.CustomerID = customerID;
+ this.Freight = freight;
+ this.ShipCity = shipCity;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims"));
+ Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster"));
+ Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro"));
+ Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon"));
+ Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi"));
+ Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro"));
+ Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern"));
+ Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève"));
+ Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende"));
+ Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal"));
+ Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz"));
+ Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F."));
+ Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln"));
+ Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro"));
+ Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque"));
+ }
+
+ return Orders;
+ }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCity { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVINzMpVxeuzFVM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Export with hidden columns
+
+Exporting hidden columns in the Syncfusion Blazor DataGrid allows you to include hidden columns in the exported PDF document. This feature is useful when you have columns that are hidden in the UI but still need to be included in the exported document.
+
+To export hidden columns of the Grid to a PDF document, you need to set the [IncludeHiddenColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_IncludeHiddenColumn) property as **true** in the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) property.
+
+The following example demonstrates how to export hidden columns to a PDF document using the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event and the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method. In this example, the **ShipCity** column, which is not visible in the UI, is exported to the PDF document. You can also export the Grid by changing the `PdfExportProperties.IncludeHiddenColumn` property based on the switch toggle using the `bind-Checked` property of the [Blazor Toggle Switch Button](https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started-webapp).
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfGrid Grid;
+ public List Orders { get; set; }
+
+ public bool IncludeHiddenColumns { get; set; } = false;
+
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+
+ public async Task ToolbarClickHandler(ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
+ {
+ PdfExportProperties exportProperties = new PdfExportProperties
+ {
+ IncludeHiddenColumn = IncludeHiddenColumns
+ };
+
+ await Grid.ExportToPdfAsync(exportProperties);
+ }
+ }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName, string shipCountry)
+ {
+ this.OrderID = orderID;
+ this.CustomerID = customerID;
+ this.Freight = freight;
+ this.ShipCity = shipCity;
+ this.ShipName = shipName;
+ this.ShipCountry = shipCountry;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier", "France"));
+ Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten", "Germany"));
+ Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
+ Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock", "France"));
+ Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices", "Belgium"));
+ Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
+ Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese", "Switzerland"));
+ Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt", "Switzerland"));
+ Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export", "Brazil"));
+ Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos", "Venezuela"));
+ Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel", "Austria"));
+ Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial", "Mexico"));
+ Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen", "Germany"));
+ Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia", "Brazil"));
+ Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery", "USA"));
+ }
+
+ return Orders;
+ }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ public string ShipCountry { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhoNJWiAnvCslzK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Show or hide columns while exporting
+
+The Syncfusion Blazor DataGrid provides the functionality to show or hide columns dynamically during the export process. This feature allows you to selectively display or hide specific columns based on your requirements.
+
+To show or hide columns based on user interaction during the export process, you can follow these steps:
+
+1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event of the Grid and update the visibility of the desired columns by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible) property of the column to **true** or **false**.
+
+2. Export the Grid to PDF document.
+
+3. Handle the [ExportComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExportComplete) event to restore the column visibility to its original state.
+
+In the following example, the **CustomerID** is initially a hidden column in the Grid. However, during the export process, the **CustomerID** column is made visible, while the **ShipCity** column is hidden.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfGrid Grid;
+ public List Orders { get; set; }
+ public bool isCustomerIDVisible { get; set; } = false;
+ public bool isShipCityVisible { get; set; }
+
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+
+ public async Task ToolbarClickHandler(ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
+ {
+ isCustomerIDVisible = true;
+ isShipCityVisible=false;
+ await Grid.ExportToPdfAsync();
+ }
+ }
+
+ public void ExportCompleteHandler(object args)
+ {
+ isCustomerIDVisible = false;
+ isShipCityVisible=true;
+ }
+}
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName, string shipCountry)
+ {
+ this.OrderID = orderID;
+ this.CustomerID = customerID;
+ this.Freight = freight;
+ this.ShipCity = shipCity;
+ this.ShipName = shipName;
+ this.ShipCountry = shipCountry;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier", "France"));
+ Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten", "Germany"));
+ Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
+ Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock", "France"));
+ Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices", "Belgium"));
+ Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
+ Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese", "Switzerland"));
+ Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt", "Switzerland"));
+ Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export", "Brazil"));
+ Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos", "Venezuela"));
+ Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel", "Austria"));
+ Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial", "Mexico"));
+ Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen", "Germany"));
+ Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia", "Brazil"));
+ Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery", "USA"));
+ }
+
+ return Orders;
+ }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ public string ShipCountry { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNByZTBaJDQfXHAZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Change page orientation
+
+The Syncfusion Blazor DataGrid allows you to change the page orientation of the exported PDF document from the default portrait mode to landscape mode. This feature provides the flexibility to adjust the layout and presentation of the exported PDF document according to your needs.
+
+To change the page orientation to landscape for the exported document, you can set the [PageOrientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_PageOrientation) property of the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) property.
+
+The supported `PageOrientation` options are:
+
+1. **Landscape**: Exports the Grid with a landscape PDF page orientation.
+
+2. **Portrait**: Exports the Grid with a portrait PDF page orientation.
+
+The following example demonstrates how to export the Grid into PDF document by setting the `PdfExportProperties.PageOrientation` property using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) property of the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list).
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.Navigations
+@using System.Collections.Generic
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfGrid Grid;
+ public List Data { get; set; }
+
+ public class OrientationItem
+ {
+ public string Text { get; set; }
+ public string Value { get; set; }
+ }
+
+ public string SelectedOrientation { get; set; } = "Portrait";
+
+ public List Orientations = new List
+ {
+ new OrientationItem { Text = "Portrait", Value = "Portrait" },
+ new OrientationItem { Text = "Landscape", Value = "Landscape" }
+ };
+
+ protected override void OnInitialized()
+ {
+ Data = OrderData.GetAllRecords();
+ }
+
+ public async Task ToolbarClickHandler(ClickEventArgs args)
+ {
+ if (args.Item.Id.Contains("pdfexport", StringComparison.OrdinalIgnoreCase))
+ {
+ var exportProps = new PdfExportProperties
+ {
+ PageOrientation = SelectedOrientation == "Landscape" ? PageOrientation.Landscape : PageOrientation.Portrait
+ };
+ await Grid.ExportToPdfAsync(exportProps);
+ }
+ }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName, string shipCountry)
+ {
+ this.OrderID = orderID;
+ this.CustomerID = customerID;
+ this.Freight = freight;
+ this.ShipCity = shipCity;
+ this.ShipName = shipName;
+ this.ShipCountry = shipCountry;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier", "France"));
+ Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten", "Germany"));
+ Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
+ Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock", "France"));
+ Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices", "Belgium"));
+ Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
+ Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese", "Switzerland"));
+ Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt", "Switzerland"));
+ Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export", "Brazil"));
+ Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos", "Venezuela"));
+ Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel", "Austria"));
+ Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial", "Mexico"));
+ Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen", "Germany"));
+ Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia", "Brazil"));
+ Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery", "USA"));
+ }
+ return Orders;
+ }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ public string ShipCountry { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLeNzVKUaStvZne?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Change page size
+
+The Syncfusion Blazor DataGrid allows you to customize the page size of the exported PDF document according to your requirements. This feature provides the flexibility to adjust the layout and PDF document to fit different paper sizes or printing needs.
+
+To customize the page size for the exported document, you can set the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_PageSize) property of the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) property to the desired [PdfPageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfPageSize.html).
+
+Supported [PdfPageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfPageSize.html#fields) are:
+* Letter
+* Note
+* Legal
+* A0
+* A1
+* A2
+* A3
+* A4
+* A5
+* A6
+* A7
+* A8
+* A9
+* B0
+* B1
+* B2
+* B3
+* B4
+* B5
+* Archa
+* Archb
+* Archc
+* Archd
+* Arche
+* Flsa
+* HalfLetter
+* Letter11x17
+* Ledger
+
+The following example demonstrates how to export the Grid into PDF document by setting the `PdfExportProperties.PageSize` property by using [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Value) property of the [DropDownList](https://blazor.syncfusion.com/documentation/dropdown-list).
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.DropDowns
+@using Syncfusion.Blazor.Navigations
+@using Syncfusion.Blazor
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfGrid Grid;
+ public List Orders { get; set; }
+
+ private string SelectedPageSize = "A4";
+
+ public List PageSizes = new()
+ {
+ new PageSizeOption { Text = "Letter", Value = "Letter" },
+ new PageSizeOption { Text = "Note", Value = "Note" },
+ new PageSizeOption { Text = "Legal", Value = "Legal" },
+ new PageSizeOption { Text = "A0", Value = "A0" },
+ new PageSizeOption { Text = "A1", Value = "A1" },
+ new PageSizeOption { Text = "A2", Value = "A2" },
+ new PageSizeOption { Text = "A3", Value = "A3" },
+ new PageSizeOption { Text = "A4", Value = "A4" },
+ new PageSizeOption { Text = "A5", Value = "A5" },
+ new PageSizeOption { Text = "A6", Value = "A6" },
+ new PageSizeOption { Text = "B4", Value = "B4" },
+ new PageSizeOption { Text = "B5", Value = "B5" },
+ new PageSizeOption { Text = "Flsa", Value = "Flsa" },
+ new PageSizeOption { Text = "HalfLetter", Value = "HalfLetter" },
+ new PageSizeOption { Text = "Ledger", Value = "Ledger" },
+ new PageSizeOption { Text = "Letter11x17", Value = "Letter11x17" },
+ new PageSizeOption { Text = "ArchC", Value = "ArchC" },
+ new PageSizeOption { Text = "ArchD", Value = "ArchD" },
+ new PageSizeOption { Text = "ArchE", Value = "ArchE" },
+ };
+
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+
+ public async Task ToolbarClickHandler(ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
+ {
+ var exportProps = new PdfExportProperties
+ {
+ PageSize = Enum.TryParse(SelectedPageSize, out var size) ? size : PdfPageSize.A4
+ };
+ await Grid.ExportToPdfAsync(exportProps);
+ }
+ }
+
+ public class PageSizeOption
+ {
+ public string Text { get; set; }
+ public string Value { get; set; }
+ }
+}
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderDetails.cs" %}
+
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName)
+ {
+ this.OrderID = orderID;
+ this.CustomerID = customerID;
+ this.Freight = freight;
+ this.ShipCity = shipCity;
+ this.ShipName = shipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier"));
+ Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export"));
+ Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos"));
+ Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel"));
+ Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial"));
+ Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen"));
+ Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia"));
+ Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery"));
+ }
+ return Orders;
+ }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhoNIXoheMzaxjw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Define file name
+
+The Syncfusion Blazor DataGrid allows you to specify a custom file name for the exported PDF document. This feature enables you to provide a meaningful and descriptive name for the exported file, making it easier to identify and manage the exported data.
+
+To assign a custom file name for the exported document, you can set the [FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_FileName) property of the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html) property in the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event and pass it to the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method.
+
+The following example demonstrates how to define a file name using `PdfExportProperties.FileName` property when exporting to PDF document, based on the entered value as the file name.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfGrid DefaultGrid;
+ public List Orders { get; set; }
+
+ public async Task ToolbarClickHandler(ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
+ {
+ PdfExportProperties ExportProperties = new PdfExportProperties();
+ ExportProperties.FileName = "New.pdf";
+ await this.DefaultGrid.PdfExport(ExportProperties);
+ }
+ }
+ protected override void OnInitialized()
+ {
+ Orders = OrderDetails.GetAllRecords();
+ }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderDetails.cs" %}
+
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerId, string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+ order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+ order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt"));
+ order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora"));
+ order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos"));
+ order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel"));
+ order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma"));
+ order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+ order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia"));
+ order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
+ }
+ return order;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDByjpMMziSSVgoO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Enabling horizontal overflow
+
+The Syncfusion Blazor DataGrid allows you to display all defined Grid columns on a single page even when the number of columns exceeds the maximum limits for columns in the exported PDF document. This ensures that your exported PDF document maintains its readability and comprehensiveness.
+
+You can achieve this by utilizing the [PdfExportProperties.AllowHorizontalOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_AllowHorizontalOverflow) property of the Grid.
+
+In the following example, the [Blazor Toggle Switch Button](https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started-webapp) is added to enable and disable the `PdfExportProperties.AllowHorizontalOverflow` property. Based on the switch toggle, the `PdfExportProperties.AllowHorizontalOverflow` property is updated using the `Checked` property, and the export action is performed accordingly when the toolbar is clicked.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Blazor.Navigations
+@using Syncfusion.Blazor.Buttons
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfGrid Grid;
+ private bool DisableHorizontalOverflow = false;
+
+ public List Orders { get; set; }
+
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+ public async Task ToolbarClickHandler(ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
+ {
+ var pdfExportProps = new PdfExportProperties
+ {
+ AllowHorizontalOverflow = !DisableHorizontalOverflow
+ };
+ await Grid.ExportToPdfAsync(pdfExportProps);
+ }
+ }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+ public class OrderData
+ {
+ public static List Orders = new();
+
+ public OrderData(int orderID, string customerID, string shipCity, string shipName, string shipAddress, string shipRegion, string shipPostalCode, string shipCountry)
+ {
+ OrderID = orderID;
+ CustomerID = customerID;
+ ShipCity = shipCity;
+ ShipName = shipName;
+ ShipAddress = shipAddress;
+ ShipRegion = shipRegion;
+ ShipPostalCode = shipPostalCode;
+ ShipCountry = shipCountry;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier", "59 rue de l'Abbaye", "", "51100", "France"));
+ Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten", "Luisenstr. 48", "", "44087", "Germany"));
+ Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes", "Rua do Paço, 67", "RJ", "05454-876", "Brazil"));
+ Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock", "2, rue du Commerce", "", "69004", "France"));
+ Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices", "Boulevard Tirou, 255", "", "B-6000", "Belgium"));
+ Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes", "Rua do Paço, 67", "RJ", "05454-876", "Brazil"));
+ Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese", "Hauptstr. 31", "", "3012", "Switzerland"));
+ Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt", "Starenweg 5", "", "1204", "Switzerland"));
+ Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Importadora", "Rua do Mercado, 12", "SP", "08737-363", "Brazil"));
+ Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "HILARION-Abastos", "Carrera 22 con Ave. Carlos Soublette #8-35", "Táchira", "5022", "Venezuela"));
+ }
+
+ return Orders;
+ }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; } = string.Empty;
+ public string ShipCity { get; set; } = string.Empty;
+ public string ShipName { get; set; } = string.Empty;
+ public string ShipAddress { get; set; } = string.Empty;
+ public string ShipRegion { get; set; } = string.Empty;
+ public string ShipPostalCode { get; set; } = string.Empty;
+ public string ShipCountry { get; set; } = string.Empty;
+ }
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+> You can find a complete sample on [GitHub](https://github.com/SyncfusionExamples/exporting-blazor-datagrid/tree/master/Exporting-PDF-Datagrid/Horizontal_overflow).
+
+## Customizing columns on export
+
+The Syncfusion Blazor DataGrid allows you to customize the appearance of Grid columns in your exported PDF documents. This feature empowers you to tailor specific column attributes such as field, header text, and text alignment, ensuring that your exported PDFs align perfectly with your design and reporting requirements.
+
+To customize the Grid columns, you can follow these steps:
+
+1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event, and access the [PdfExportProperties.Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Columns) property of the Grid.
+
+2. Define new list of GridColumn objects with the desired properties such as Field, HeaderText, TextAlign, Format, and Width for each column to be exported.
+
+3. Assign this list to the `Columns` property of the `PdfExportProperties` object, then pass it to the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) to apply the customizations during export.
+
+The following example demonstrates how to customize the Grid columns when exporting a document. In this scenario, the attributes for different columns have been customized: **OrderID** with `HeaderText` set to **Order Number**, **CustomerID** with headerText as **Customer Name**, and **Freight** with a center-aligned `TextAlign` property, which is not rendered in the Grid columns:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfGrid Grid;
+ public List Orders { get; set; }
+
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+
+ public async Task ToolbarClickHandler(ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
+ {
+ List ExportColumns = new List();
+ ExportColumns.Add(new GridColumn() { Field = "OrderID", HeaderText = "Order Number", Width = "120" });
+ ExportColumns.Add(new GridColumn() { Field = "CustomerID", HeaderText = "Customer Name", Width = "120" });
+ ExportColumns.Add(new GridColumn() { Field = "Freight", HeaderText = "Freight", Width = "120", Format = "C2", TextAlign = TextAlign.Center });
+
+ var exportProperties = new PdfExportProperties
+ {
+ Columns = ExportColumns
+ };
+ await Grid.ExportToPdfAsync(exportProperties);
+ }
+ }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderDetails.cs" %}
+
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName, string shipCountry)
+ {
+ this.OrderID = orderID;
+ this.CustomerID = customerID;
+ this.Freight = freight;
+ this.ShipCity = shipCity;
+ this.ShipName = shipName;
+ this.ShipCountry = shipCountry;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier", "France"));
+ Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten", "Germany"));
+ Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
+ Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock", "France"));
+ Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices", "Belgium"));
+ Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
+ Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese", "Switzerland"));
+ Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt", "Switzerland"));
+ Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export", "Brazil"));
+ Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos", "Venezuela"));
+ Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel", "Austria"));
+ Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial", "Mexico"));
+ Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen", "Germany"));
+ Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia", "Brazil"));
+ Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery", "USA"));
+ }
+
+ return Orders;
+ }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ public string ShipCountry { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLeNzWspWvjNiOp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+### Customize column width in exported PDF document
+
+The PDF export provides an option to customize the column being exported to a PDF format using the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Columns) property of the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class. While defining the column, we can change its width as per the requirement.
+
+The following example demonstrates how to customize the column widths of the exported PDF document by enabling the[DisableAutoFitWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_DisableAutoFitWidth) property of the `PdfExportProperties`.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Buttons
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+@code{
+ private SfGrid DefaultGrid;
+ public List Orders { get; set; }
+
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+ public async Task PdfExport()
+ {
+ PdfExportProperties ExportProperties = new PdfExportProperties();
+ ExportProperties.DisableAutoFitWidth = true;
+ ExportProperties.Columns = new List()
+ {
+ new GridColumn(){ Field="OrderID", HeaderText="Order ID", TextAlign=TextAlign.Left, Width="300"},
+ new GridColumn(){ Field="CustomerID", HeaderText="Customer Name", TextAlign=TextAlign.Left, Width="100"},
+ new GridColumn(){ Field="OrderDate", HeaderText=" Order Date", Type=ColumnType.Date, Format="d", TextAlign=TextAlign.Left, Width="80"}
+ };
+ await this.DefaultGrid.ExportToPdfAsync(ExportProperties);
+ }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData() { }
+
+ public OrderData(int OrderID, string CustomerID, DateTime? OrderDate)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.OrderDate = OrderDate;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData { OrderID = 10248, CustomerID = "VINET", OrderDate = new DateTime(1996, 7, 4) });
+ Orders.Add(new OrderData { OrderID = 10249, CustomerID = "TOMSP", OrderDate = new DateTime(1996, 7, 5) });
+ Orders.Add(new OrderData { OrderID = 10250, CustomerID = "HANAR", OrderDate = new DateTime(1996, 7, 6) });
+ Orders.Add(new OrderData { OrderID = 10251, CustomerID = "VINET", OrderDate = new DateTime(1996, 7, 7) });
+ Orders.Add(new OrderData { OrderID = 10252, CustomerID = "SUPRD", OrderDate = new DateTime(1996, 7, 8) });
+ Orders.Add(new OrderData { OrderID = 10253, CustomerID = "HANAR", OrderDate = new DateTime(1996, 7, 9) });
+ Orders.Add(new OrderData { OrderID = 10254, CustomerID = "CHOPS", OrderDate = new DateTime(1996, 7, 10) });
+ Orders.Add(new OrderData { OrderID = 10255, CustomerID = "VINET", OrderDate = new DateTime(1996, 7, 11) });
+ Orders.Add(new OrderData { OrderID = 10256, CustomerID = "HANAR", OrderDate = new DateTime(1996, 7, 12) });
+ }
+ return Orders;
+ }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public DateTime? OrderDate { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVetyXEWnovmFoM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Font and color customization
+
+The Syncfusion Blazor DataGrid provides the ability to customize the font in the exported PDF document. This feature allows you to control the appearance and styling of the text in the exported file, ensuring consistency with your application's design.
+
+To apply a theme to the exported PDF document, you can define the [Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Theme) property within the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html). This property allows you to specify the `Theme` to be used in the exported PDF document, including styles for the caption, header, and record content. You can define this property in the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event and pass it to the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method.
+
+[Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfTheme.html#Syncfusion_Blazor_Grids_PdfTheme_Caption): This property defines the theme style for the caption content in the exported PDF document. The caption is the title or description that appears at the top of the exported PDF document.
+
+[Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfTheme.html#Syncfusion_Blazor_Grids_PdfTheme_Header): This property is used to defines the style for the header content in the exported PDF document. The header corresponds to the column headers in the Grid.
+
+[Record](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfTheme.html#Syncfusion_Blazor_Grids_PdfTheme_Record): This property defines the theme style for the record content in the exported PDF document. The record represents the data rows in the Grid that are exported to PDF document.
+
+N> By default, material theme is applied to exported PDF document.
+
+### Default fonts
+
+By default, the Syncfusion Blazor DataGrid uses the **Helvetica** font in the exported document. However, you can change the default font by utilizing the [PdfExportProperties.Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfTheme.html) property. The available default fonts that you can choose from are:
+
+* Helvetica
+* TimesRoman
+* Courier
+* Symbol
+* ZapfDingbats
+
+To change the default font in the exported PDF document, set the `Theme` property with your desired font in the `PdfExportProperties` before triggering the export operation.
+
+The following example demonstrates, how to change the default font, font color, font size and border style when exporting a PDF document.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfGrid Grid;
+
+ public List Orders { get; set; }
+ public string fontFamily { get; set; } = "TimesRoman";
+ public string[] Initial = (new string[] { "CustomerID", "ShipCity" });
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+
+ public async Task ToolbarClickHandler(ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
+ {
+ var exportProps = new PdfExportProperties
+ {
+ Theme = new PdfTheme
+ {
+ Header = new PdfThemeStyle
+ {
+ Font = new PdfGridFont { FontFamily = "@fontFamily", FontSize = 11 },
+ FontColor = "#000080",
+ Bold = true,
+ Border = new PdfBorder { Color = "#5A5A5A", DashStyle = PdfDashStyle.Solid }
+ },
+ Caption = new PdfThemeStyle
+ {
+ Font = new PdfGridFont { FontFamily = "@fontFamily", FontSize = 9 },
+ FontColor = "#0B6623",
+ Bold = true
+ },
+ Record = new PdfThemeStyle
+ {
+ Font = new PdfGridFont { FontFamily = "@fontFamily", FontSize = 10 },
+ FontColor = "#B22222",
+ Bold = true
+ }
+ }
+ };
+ await Grid.ExportToPdfAsync(exportProps);
+ }
+ }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderDetails.cs" %}
+
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName, string shipCountry)
+ {
+ this.OrderID = orderID;
+ this.CustomerID = customerID;
+ this.Freight = freight;
+ this.ShipCity = shipCity;
+ this.ShipName = shipName;
+ this.ShipCountry = shipCountry;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier", "France"));
+ Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten", "Germany"));
+ Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
+ Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock", "France"));
+ Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices", "Belgium"));
+ Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
+ Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese", "Switzerland"));
+ Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt", "Switzerland"));
+ Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export", "Brazil"));
+ Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos", "Venezuela"));
+ Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel", "Austria"));
+ Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial", "Mexico"));
+ Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen", "Germany"));
+ Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia", "Brazil"));
+ Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery", "USA"));
+ }
+
+ return Orders;
+ }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ public string ShipCountry { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrIjIjeLyPqfijX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+### Add custom font
+
+In addition to changing the default font, the Syncfusion Blazor DataGrid allows you to use a custom font for the Grid header, content, and caption cells in the exported document. This can be achieved by utilizing the [PdfExportProperties.Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfTheme.html) property.
+
+When using a custom font, it's important to provide the font in a format that can be easily embedded in the exported document. This is typically done by encoding the font file into a base64 string. This base64 encoded font data can then be used within the export settings to ensure the custom font is applied to the exported PDF document.
+
+The following example demonstrates how to use the custom **Algeria** font for exporting the Grid. The **base64AlgeriaFont** variable contains the base64 encoded string representing the **Algeria** font file. This encoded font data is used in the PDF export properties to specify the custom font.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+
+ private SfGrid Grid;
+ public string fontFamily { get; set; } = "AAEAAAANAIAAAwBQRFNJRw5vA.....";
+
+ public List Orders { get; set; }
+
+ public string[] Initial = (new string[] { "ShipCity" });
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+
+ public async Task ToolbarClickHandler(ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
+ {
+ var exportProps = new PdfExportProperties
+ {
+ Theme = new PdfTheme
+ {
+ Header = new PdfThemeStyle
+ {
+ Font = new PdfGridFont { FontFamily = "@fontFamily", FontSize = 11 },
+ FontColor = "#000080",
+ Bold = true,
+ Border = new PdfBorder { Color = "#5A5A5A", DashStyle = PdfDashStyle.Solid }
+ },
+ Caption = new PdfThemeStyle
+ {
+ Font = new PdfGridFont { FontFamily = "@fontFamily", FontSize = 9 },
+ FontColor = "#0B6623",
+ Bold = true
+ },
+ Record = new PdfThemeStyle
+ {
+ Font = new PdfGridFont { FontFamily = "@fontFamily", FontSize = 10 },
+ FontColor = "#B22222",
+ Bold = true
+ }
+ }
+ };
+ await Grid.ExportToPdfAsync(exportProps);
+ }
+ }
+
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderDetails.cs" %}
+
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName, string shipCountry)
+ {
+ this.OrderID = orderID;
+ this.CustomerID = customerID;
+ this.Freight = freight;
+ this.ShipCity = shipCity;
+ this.ShipName = shipName;
+ this.ShipCountry = shipCountry;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier", "France"));
+ Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten", "Germany"));
+ Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
+ Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock", "France"));
+ Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices", "Belgium"));
+ Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
+ Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese", "Switzerland"));
+ Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt", "Switzerland"));
+ Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export", "Brazil"));
+ Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos", "Venezuela"));
+ Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel", "Austria"));
+ Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial", "Mexico"));
+ Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen", "Germany"));
+ Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia", "Brazil"));
+ Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery", "USA"));
+ }
+
+ return Orders;
+ }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ public string ShipCountry { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjByXSXoVxArjAFT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Rotate a header text in the exported PDF document
+
+The Syncfusion Blazor DataGrid provides support for customize the column header and content styles, such as changing text orientation, the font color, the width of the header and content text, and so on in the exported PDF document. To achieve this requirement, you can use the [BeginCellLayout](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_BeginCellLayout) event of the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class along with a custom event handler.
+
+To rotate a column header text in a PDF document, follow these steps:
+
+1. The [PdfHeaderQueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfHeaderQueryCellInfoEvent) event is triggered when creating a column header for the PDF document to be exported. In this event, you can collect the column header details and handle customizations.
+
+2. In the `BeginCellLayout` event handler, you can use the `Graphics.DrawString` method to rotate the header text to the desired degree, will be triggered when creating a column header for the PDF document to be exported. Collect the column header details in this event and handle the custom in the `BeginCellLayout` event handler.
+
+In the following demo, the [DrawString](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.Graphics.PdfGraphics.html#Syncfusion_Pdf_Graphics_PdfGraphics_DrawString_System_String_Syncfusion_Pdf_Graphics_PdfFont_Syncfusion_Pdf_Graphics_PdfBrush_System_Drawing_PointF_) method from the [Graphics](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.Graphics.PdfGraphics.html) is used to rotate the header text of the column header inside the `BeginCellLayout` event handler.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.Pdf.Graphics
+@using Syncfusion.PdfExport
+@using System.Drawing
+@using Syncfusion.Pdf
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ public SfGrid DefaultGrid;
+ public List Orders { get; set; }
+ List headerValues = new List();
+
+ public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_pdfexport") // Id is combination of Grid's ID and itemname.
+ {
+ PdfExportProperties ExportProperties = new PdfExportProperties();
+ ExportProperties.BeginCellLayout = new PdfGridBeginCellLayoutEventHandler(BeginCellEvent);
+ ExportProperties.FileName = "test.pdf";
+ ExportProperties.IsRepeatHeader = true;
+ await this.DefaultGrid.PdfExport(ExportProperties);
+ }
+ }
+
+ // Handles custom drawing for each cell (used here for header rotation).
+ public void BeginCellEvent(object sender, PdfGridBeginCellLayoutEventArgs args)
+ {
+ PdfGrid grid = (PdfGrid)sender;
+
+ // Apply gray brush for header text.
+ var brush = new Syncfusion.PdfExport.PdfSolidBrush(new Syncfusion.PdfExport.PdfColor(Color.DimGray));
+ args.Graphics.Save();
+
+ // Translate the origin for rotated text.
+ args.Graphics.TranslateTransform(args.Bounds.X + 50, args.Bounds.Height + 40);
+
+ // Rotate text (e.g., -60 degrees).
+ args.Graphics.RotateTransform(-60);
+
+ // Draw the text at particular bounds.
+ args.Graphics.DrawString(headerValues[args.CellIndex], new Syncfusion.PdfExport.PdfStandardFont(Syncfusion.PdfExport.PdfFontFamily.Helvetica, 10), brush, new PointF(0, 0));
+
+ // Clear default header text so rotated version is used.
+ if (args.IsHeaderRow)
+ {
+ grid.Headers[0].Cells[args.CellIndex].Value = string.Empty;
+ }
+ args.Graphics.Restore();
+ }
+
+ public void PdfHeaderQueryCellInfoHandler(PdfHeaderQueryCellInfoEventArgs args)
+ {
+ headerValues.Add(args.Column.HeaderText);
+ var longestString = headerValues.Where(s => s.Length == headerValues.Max(m => m.Length)).
+ First();
+ Syncfusion.PdfExport.PdfFont font = new Syncfusion.PdfExport.PdfStandardFont(Syncfusion.PdfExport.PdfFontFamily.Helvetica, 6);
+ SizeF size = font.MeasureString(longestString);
+
+ // Adjust header height to accommodate rotated text.
+ args.PdfGridColumn.Grid.Headers[0].Height = size.Width * 2;
+ }
+
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+}
+
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderDetails.cs" %}
+
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName, string shipCountry)
+ {
+ this.OrderID = orderID;
+ this.CustomerID = customerID;
+ this.Freight = freight;
+ this.ShipCity = shipCity;
+ this.ShipName = shipName;
+ this.ShipCountry = shipCountry;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier", "France"));
+ Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten", "Germany"));
+ Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
+ Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock", "France"));
+ Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices", "Belgium"));
+ Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes", "Brazil"));
+ Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese", "Switzerland"));
+ Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt", "Switzerland"));
+ Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export", "Brazil"));
+ Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos", "Venezuela"));
+ Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel", "Austria"));
+ Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial", "Mexico"));
+ Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen", "Germany"));
+ Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia", "Brazil"));
+ Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery", "USA"));
+ }
+
+ return Orders;
+ }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+ public string ShipCountry { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+
+
+> You can find a complete sample on [GitHub](https://github.com/SyncfusionExamples/exporting-blazor-datagrid/tree/master/Exporting-PDF-Datagrid/Rotate_header).
+
+## Exporting Grid data as stream
+
+The Syncfusion Blazor DataGrid allows exporting Grid data as a memory stream, enabling programmatic handling before saving or processing. The following sections cover how to export Grid data as a memory stream, merge multiple memory streams into one, and convert the memory stream to a file stream for saving the exported file.
+
+### Exporting Grid data as memory stream
+
+The export to memory stream feature allows you to export data from a Grid to a memory stream instead of saving it to a file directly on the server. This can be particularly useful when you want to generate and serve the file directly to the client without saving it on the server, ensuring a smooth and efficient download process.
+
+To achieve this functionality, you can utilize the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method along with the `asMemoryStream` parameter set to **true** within the [OnToolbarClick](https://blazor.syncfusion.com/documentation/datagrid/events#ontoolbarclick) event. This method will export an PDF document as a memory stream, which can then be sent to the browser for download.
+
+The provided example showcases the process of exporting the file as a memory stream and sending the byte to initiate a browser download.
+
+**Step 1**: **Add JavaScript for file download**
+
+Create a JavaScript file named **saveAsFile.js** under the **wwwroot** directory and include the following function to trigger browser download:
+
+{% tabs %}
+{% highlight razor tabtitle="saveAsFile.js" %}
+
+function saveAsFile(filename, bytesBase64) {
+ var link = document.createElement('a');
+ link.download = filename;
+ link.href = "data:application/octet-stream;base64," + bytesBase64;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 2**:**Register the JavaScript file**
+
+Include the script reference inside your **App.razor** (or **index.html** in Blazor WebAssembly):
+
+{% tabs %}
+{% highlight razor tabtitle="App.razor" %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+{% endhighlight %}
+{% endtabs %}
+
+**Step 3: Invoke the JavaScript function to perform the browser download using the memory stream**
+
+In the **Index.razor** file, the Grid is set up, the export operation is triggered, and the `saveAsFile` function is invoked to handle the browser download.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids;
+@using Syncfusion.Blazor.Navigations;
+@using System.IO;
+@using Syncfusion.Pdf
+@using Syncfusion.PdfExport;
+@inject IJSRuntime JSRuntime
+
+
+
+
+
+
+
+
+
+
+
+
+@code{
+ private SfGrid Grid;
+ public List Orders { get; set; }
+
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+
+ public async Task ToolbarClickHandler(ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
+ {
+ MemoryStream streamDoc = await Grid.ExportToPdfAsync(asMemoryStream: true);
+ await JSRuntime.InvokeVoidAsync("saveAsFile", new object[] {"PdfMemoryStream.pdf", Convert.ToBase64String(streamDoc.ToArray()), true });
+ }
+ }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName)
+ {
+ this.OrderID = orderID;
+ this.CustomerID = customerID;
+ this.Freight = freight;
+ this.ShipCity = shipCity;
+ this.ShipName = shipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier"));
+ Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export"));
+ Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos"));
+ Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel"));
+ Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial"));
+ Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen"));
+ Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia"));
+ Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery"));
+ }
+ return Orders;
+ }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+> You can find a complete sample on [GitHub](https://github.com/SyncfusionExamples/exporting-blazor-datagrid/tree/master/Exporting-PDF-Datagrid/Blazor_Memory_Stream).
+
+### Converting memory stream to file stream for PDF export
+
+The PDF Export feature in Syncfusion Blazor DataGrid allows you to converting a memory stream obtained from the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method into a file stream to export PDF document.
+
+To know about exporting Grid as a Stream to a PDF document in Grid, you can check this video.
+
+{% youtube "youtube:https://www.youtube.com/watch?v=H5rqB_hBpUM"%}
+
+To achieve this, you can use the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event in conjunction with the `ExportToPdfAsync` method. The `ExportToPdfAsync` method generates the PDF document as a `MemoryStream`. You can then convert this memory stream into a `FileStream` and save the file to a specified location.
+
+The example below demonstrates how to achieve this by converting the memory stream into a file stream for saving the exported PDF document:
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using System.IO;
+@using Syncfusion.Pdf
+@using Syncfusion.PdfExport;
+@inject IJSRuntime JSRuntime
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfGrid DefaultGrid;
+ public List Orders { get; set; }
+
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+
+ public async Task ToolbarClickHandler(ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
+ {
+ // Memory stream to file stream exporting.
+ MemoryStream streamDoc1 = await DefaultGrid.ExportToPdfAsync(asMemoryStream: true);
+
+ // Create a copy of streamDoc1.
+ MemoryStream copyOfStreamDoc1 = new MemoryStream(streamDoc1.ToArray());
+
+ // For creating the exporting location with file name, for this need to specify the physical exact path of the file.
+ string filePaths = "C:Users/abc/Downloads/SampleTestPdf.pdf";
+
+ // Create a file stream to write the memory stream contents to a file.
+ using (FileStream fileStream = File.Create(filePaths))
+ {
+ // Copy the memory stream data to the file stream.
+ copyOfStreamDoc1.CopyTo(fileStream);
+ }
+ }
+ }
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+ public class OrderData
+ {
+ public static List Orders = new List();
+ public OrderData() { }
+ public OrderData(int OrderID, string CustomerID, double Freight, DateTime? OrderDate)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData { OrderID = 10248, CustomerID = "VINET", Freight = 32.38, OrderDate = new DateTime(1996, 7, 4) });
+ Orders.Add(new OrderData { OrderID = 10249, CustomerID = "TOMSP", Freight = 11.61, OrderDate = new DateTime(1996, 7, 5) });
+ Orders.Add(new OrderData { OrderID = 10250, CustomerID = "HANAR", Freight = 65.83, OrderDate = new DateTime(1996, 7, 6) });
+ Orders.Add(new OrderData { OrderID = 10251, CustomerID = "VINET", Freight = 41.34, OrderDate = new DateTime(1996, 7, 7) });
+ Orders.Add(new OrderData { OrderID = 10252, CustomerID = "SUPRD", Freight = 151.30, OrderDate = new DateTime(1996, 7, 8) });
+ Orders.Add(new OrderData { OrderID = 10253, CustomerID = "HANAR", Freight = 58.17, OrderDate = new DateTime(1996, 7, 9) });
+ Orders.Add(new OrderData { OrderID = 10254, CustomerID = "CHOPS", Freight = 22.98, OrderDate = new DateTime(1996, 7, 10) });
+ Orders.Add(new OrderData { OrderID = 10255, CustomerID = "VINET", Freight = 148.33, OrderDate = new DateTime(1996, 7, 11) });
+ Orders.Add(new OrderData { OrderID = 10256, CustomerID = "HANAR", Freight = 13.97, OrderDate = new DateTime(1996, 7, 12) });
+ }
+ return Orders;
+ }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double? Freight { get; set; }
+ public DateTime? OrderDate { get; set; }
+ }
+
+{% endhighlight %}
+{% endtabs %}
+
+> You can find a complete sample on [GitHub](https://github.com/SyncfusionExamples/exporting-blazor-datagrid/tree/master/Exporting-PDF-Datagrid/PDF_Converting_Memory_Stream).
+
+### Merging two PDF memory streams
+
+When merging two PDF memory stream files and exporting the resulting merged file as a PDF document. To accomplish this, you can use the PDF documents [Merge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.PdfDocumentBase.html?#Syncfusion_Pdf_PdfDocumentBase_Merge_Syncfusion_Pdf_PdfDocumentBase_Syncfusion_Pdf_Parsing_PdfLoadedDocument_) method available in the [PdfDocumentBase](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.PdfDocumentBase.html) class, class. To achieve this functionality, you can utilize the [Syncfusion.Blazor.Pdf](https://www.nuget.org/packages/Syncfusion.Pdf.Net.Core) package.
+
+The provided example demonstrates the merging of two memory streams and exporting the resulting merged memory stream for browser download.
+
+In this example, there are two memory streams: *streamDoc1* and *streamDoc2*. streamDoc1 represents the normal Grid memory stream, while streamDoc2 contains the memory stream of a customized Grid using the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class. The merging process combines these streams into a new PDF document, converting it into a memory stream. This merged memory stream is then utilized to initiate the browser download.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using System.IO;
+@using Syncfusion.Pdf;
+@using Syncfusion.PdfExport;
+@inject IJSRuntime JSRuntime
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfGrid DefaultGrid;
+ public List Orders { get; set; }
+
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+ public async Task ToolbarClickHandler(ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
+ {
+ //Merging two memory stream.
+ MemoryStream mergedStream = new MemoryStream();
+
+ //Creates a PDF document.
+ Syncfusion.Pdf.PdfDocument finalDoc = new Syncfusion.Pdf.PdfDocument();
+ MemoryStream streamDoc1 = await DefaultGrid.ExportToPdfAsync(asMemoryStream: true);
+
+ //Create a copy of streamDoc1 to access the memory stream.
+ MemoryStream copyOfStreamDoc1 = new MemoryStream(streamDoc1.ToArray());
+
+ //Customized Grid for memory stream export.
+ PdfExportProperties ExportProperties = new PdfExportProperties();
+ PdfTheme Theme = new PdfTheme();
+ PdfBorder HeaderBorder = new PdfBorder();
+ HeaderBorder.Color = "#000000";
+
+ PdfThemeStyle HeaderThemeStyle = new PdfThemeStyle()
+ {
+ FontColor = "#6A5ACD",
+ FontName = "Comic Sans MS",
+ FontSize = 17,
+ Bold = true,
+ Border = HeaderBorder
+ };
+ Theme.Header = HeaderThemeStyle;
+
+ PdfThemeStyle RecordThemeStyle = new PdfThemeStyle()
+ {
+ FontColor = "#800080",
+ FontName = "Comic Sans MS",
+ FontSize = 14,
+ Border = HeaderBorder
+ };
+ Theme.Record = RecordThemeStyle;
+
+ ExportProperties.Theme = Theme;
+ MemoryStream streamDoc2 = await DefaultGrid.ExportToPdfAsync(asMemoryStream: true, ExportProperties);
+
+ // Create a copy of streamDoc2 to access the memory stream.
+ MemoryStream copyOfStreamDoc2 = new MemoryStream(streamDoc2.ToArray());
+
+ // Creates a PDF stream for merging.
+ Stream[] streams = { copyOfStreamDoc1, copyOfStreamDoc2 };
+ Syncfusion.Pdf.PdfDocument.Merge(finalDoc, streams);
+ finalDoc.Save(mergedStream);
+ await JSRuntime.InvokeVoidAsync("saveAsFile", new object[] { "MemoryStreamMerge.pdf", Convert.ToBase64String(mergedStream.ToArray()), true });
+ }
+ }
+}
+
+{% endhighlight %}
+
+{% highlight js tabtitle="wwwroot/saveAsFile.js" %}
+
+function saveAsFile(filename, bytesBase64) {
+ var link = document.createElement('a');
+ link.download = filename;
+ link.href = "data:application/octet-stream;base64," + bytesBase64;
+ document.body.appendChild(link);
+ link.click();
+ document.body.removeChild(link);
+}
+
+{% endhighlight %}
+
+{% highlight c# tabtitle="OrderData.cs" %}
+
+public class OrderData
+{
+ public static List Orders = new List();
+
+ public OrderData() { }
+
+ public OrderData(int OrderID, string CustomerID, double Freight, DateTime? OrderDate)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData { OrderID = 10248, CustomerID = "VINET", Freight = 32.38, OrderDate = new DateTime(1996, 7, 4) });
+ Orders.Add(new OrderData { OrderID = 10249, CustomerID = "TOMSP", Freight = 11.61, OrderDate = new DateTime(1996, 7, 5) });
+ Orders.Add(new OrderData { OrderID = 10250, CustomerID = "HANAR", Freight = 65.83, OrderDate = new DateTime(1996, 7, 6) });
+ Orders.Add(new OrderData { OrderID = 10251, CustomerID = "VINET", Freight = 41.34, OrderDate = new DateTime(1996, 7, 7) });
+ Orders.Add(new OrderData { OrderID = 10252, CustomerID = "SUPRD", Freight = 151.30, OrderDate = new DateTime(1996, 7, 8) });
+ Orders.Add(new OrderData { OrderID = 10253, CustomerID = "HANAR", Freight = 58.17, OrderDate = new DateTime(1996, 7, 9) });
+ Orders.Add(new OrderData { OrderID = 10254, CustomerID = "CHOPS", Freight = 22.98, OrderDate = new DateTime(1996, 7, 10) });
+ Orders.Add(new OrderData { OrderID = 10255, CustomerID = "VINET", Freight = 148.33, OrderDate = new DateTime(1996, 7, 11) });
+ Orders.Add(new OrderData { OrderID = 10256, CustomerID = "HANAR", Freight = 13.97, OrderDate = new DateTime(1996, 7, 12) });
+ }
+ return Orders;
+ }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double? Freight { get; set; }
+ public DateTime? OrderDate { get; set; }
+}
+
+{% endhighlight %}
+{% endtabs %}
+
+> You can find a complete sample on [GitHub](https://github.com/SyncfusionExamples/exporting-blazor-datagrid/tree/master/Exporting-PDF-Datagrid/Merging_Two_PDF_Memory_Stream).
\ No newline at end of file
diff --git a/blazor/datagrid/pdf-export.md b/blazor/datagrid/pdf-export.md
index 30915e747f..d17b8035f4 100644
--- a/blazor/datagrid/pdf-export.md
+++ b/blazor/datagrid/pdf-export.md
@@ -1,1687 +1,668 @@
---
layout: post
-title: Pdf Export in Blazor DataGrid Component | Syncfusion
-description: Checkout and learn here all about Pdf Export in Syncfusion Blazor DataGrid component and much more details.
+title: Pdf Export in Blazor DataGrid | Syncfusion
+description: Checkout and learn here all about Pdf Export in Syncfusion Blazor DataGrid and much more details.
platform: Blazor
control: DataGrid
documentation: ug
---
-
+# PDF export in Blazor DataGrid
-# PDF Export in Blazor DataGrid Component
+The PDF export feature in the Syncfusion Blazor DataGrid allows you to export Grid data to a PDF document, providing the ability to generate printable reports or share data in a standardized format.
-PDF export allows exporting DataGrid data to PDF document. You need to use the
- **PdfExport** method for exporting. To enable PDF export in the datagrid, set the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPdfExport) as true.
+To enable PDF export in the Grid, you need to set the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPdfExport) property to **true** and use the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method for exporting.
-To know about how to export blazor datagrid component to PDF document, you can check this video.
+The following example demonstrates how to perform a PDF export action in the Grid.
-{% youtube "youtube:https://www.youtube.com/watch?v=HwERozt9fuY"%}
-
-```cshtml
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
-
+
+
-
-
-
-
+
+
+
+
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
+@code {
+ private SfGrid DefaultGrid;
+ public List Orders { get; set; }
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
{
- await this.DefaultGrid.PdfExport();
+ await this.DefaultGrid.ExportToPdfAsync();
}
}
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
-}
-```
-
-
-
-## To customize PDF export
-
-PDF export provides an option to customize mapping of datagrid to exported PDF document.
-
-### File name for exported document
-
-You can assign the file name for the exported document by defining **fileName** property in **PdfExportProperties**.
-
-```cshtml
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
-
- public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
- {
- PdfExportProperties ExportProperties = new PdfExportProperties();
- ExportProperties.FileName = "test.pdf";
- await this.DefaultGrid.PdfExport(ExportProperties);
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerId, string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+ order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+ order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt"));
+ order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora"));
+ order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos"));
+ order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel"));
+ order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma"));
+ order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+ order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia"));
+ order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
}
+ return order;
}
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
}
-```
-
-
-
-
-### To add header and footer
-
-You can customize text, page number, line, page size and changing orientation in header and footer of the exported document.
-
-#### How to add a text in header/footer
-
-You can add text and customize its styles either in Header or Footer of exported PDF document using [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Header) and [Footer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Footer) properties of the [PdfExportProperties](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class.
-
-The following sample code demonstrates adding text and customizing its styles in the Header section of the exported document,
-
-```cshtml
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
- public List HeaderContent = new List
+public class OrderDetails
{
- new PdfHeaderFooterContent() { Type = ContentType.Text, Value = "Northwind Traders", Position = new PdfPosition() { X = 0, Y = 50 }, Style = new PdfContentStyle() { TextBrushColor = "#000000", FontSize = 13 } }
- };
-
- public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
- {
- PdfExportProperties ExportProperties = new PdfExportProperties();
- PdfHeader Header = new PdfHeader()
- {
- FromTop = 0,
- Height = 130,
- Contents = HeaderContent
- };
-
- ExportProperties.Header = Header;
- await this.DefaultGrid.PdfExport(ExportProperties);
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerId, string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+ order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+ order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt"));
+ order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora"));
+ order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos"));
+ order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel"));
+ order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma"));
+ order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+ order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia"));
+ order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
}
+ return order;
}
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
}
-```
-#### How to draw a line in header/footer
+{% endhighlight %}
+{% endtabs %}
-You can add line either in the Header or Footer area of the exported PDF document using [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Header) and [Footer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Footer) properties of the [PdfExportProperties](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVetptuKCqkceUU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-Supported line styles are,
+## Binding custom data source while exporting
-* Dash
-* Dot
-* DashDot
-* DashDotDot
-* Solid
+The Syncfusion Blazor DataGrid provides a convenient way to export data to a PDF format. With the PDF export feature, you can define a custom data source while exporting. This allows you to export data that is not necessarily bind to the Grid, which can be generated or retrieved based on your application logic.
-The following sample code demonstrates adding line in the Header section of the exported document,
+To export data, you need to define the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_DataSource) property within the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) object. This property represents the data source that will be used for the PDF export.
-```cshtml
+The following example demonstrates how to render custom data source during PDF export. By utilizing the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method and passing the `PdfExportProperties` object through the Grid instance, the Grid data will be exported to a PDF using the dynamically defined data source.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
-
+
+
-
-
-
-
+
+
+
+
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
-
- 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 async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
- {
- PdfExportProperties ExportProperties = new PdfExportProperties();
- PdfHeader Header = new PdfHeader()
- {
- FromTop = 0,
- Height = 130,
- Contents = HeaderContent
- };
+@code {
+ private SfGrid DefaultGrid;
+ public List Orders { get; set; }
+ public List newOrders { get; set; }
- ExportProperties.Header = Header;
- await this.DefaultGrid.PdfExport(ExportProperties);
- }
- }
- protected override void OnInitialized()
+ private List ConvertToOrderDetails(List changes)
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
+ return changes.Select(c => new OrderDetails(c.OrderID, c.CustomerID, c.ShipCity, c.ShipName)).ToList();
}
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
-}
-```
-
-#### How to add repeat headers in PDF Export
-
-You can add headers for every page of PDF exported document by enabling [IsRepeatHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_IsRepeatHeader) property of the [PdfExportProperties](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class.
-
-```cshtml
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
-
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
{
- PdfExportProperties ExportProperties = new PdfExportProperties();
- ExportProperties.IsRepeatHeader = true;
- await this.DefaultGrid.PdfExport(ExportProperties);
+ var convertedOrders = ConvertToOrderDetails(newOrders);
+ PdfExportProperties PdfProperties = new PdfExportProperties
+ {
+ DataSource = convertedOrders
+ };
+ await this.DefaultGrid.ExportToPdfAsync(PdfProperties);
}
}
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
+ Orders = OrderDetails.GetAllRecords();
+ newOrders = ChangeData.GetAllRecords();
}
}
-```
-
-#### How to export the Grid with specific columns
-You can export the PDF grid with specific columns instead of all columns which are defined in the Grid definition. To achieve this scenario by using [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Columns) property of the [PdfExportProperties](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class.
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
-```cshtml
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
-
- public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
- {
- PdfExportProperties ExportProperties = new PdfExportProperties();
- List ExportColumns = new List();
-#pragma warning disable BL0005
- ExportColumns.Add(new GridColumn() { Field = "CustomerID", HeaderText = "Customer Name", Width = "100" });
- ExportColumns.Add(new GridColumn() { Field = "OrderDate", HeaderText = "Date", Width = "120", Format = "d" });
- ExportColumns.Add(new GridColumn() { Field = "Freight", HeaderText = "Freight", Width = "120", Format = "C2", TextAlign = TextAlign.Right });
-#pragma warning restore BL0005
- ExportProperties.Columns = ExportColumns;
-
- await this.DefaultGrid.PdfExport(ExportProperties);
+public class OrderDetails
+{
+ public static List order = new List();
+ public OrderDetails(int OrderID, string CustomerId, string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
+ public static List GetAllRecords()
+ {
+ if (order.Count == 0)
+ {
+ order.Add(new OrderDetails(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
+ order.Add(new OrderDetails(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
+ order.Add(new OrderDetails(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ order.Add(new OrderDetails(10251, "VICTE", "Lyon", "Victuailles en stock"));
+ order.Add(new OrderDetails(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
+ order.Add(new OrderDetails(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
+ order.Add(new OrderDetails(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
+ order.Add(new OrderDetails(10255, "RICSU", "Genève", "Richter Supermarkt"));
+ order.Add(new OrderDetails(10256, "WELLI", "Resende", "Wellington Importadora"));
+ order.Add(new OrderDetails(10257, "HILAA", "San Cristóbal", "HILARION-Abastos"));
+ order.Add(new OrderDetails(10258, "ERNSH", "Graz", "Ernst Handel"));
+ order.Add(new OrderDetails(10259, "CENTC", "México D.F.", "Centro comercial Moctezuma"));
+ order.Add(new OrderDetails(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
+ order.Add(new OrderDetails(10261, "QUEDE", "Rio de Janeiro", "Que Delícia"));
+ order.Add(new OrderDetails(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
}
+ return order;
}
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
}
-```
-
-#### Add page number in header/footer
-
-You can add page number either in Header or Footer area of exported PDF document using [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Header) and [Footer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Footer) properties of the [PdfExportProperties](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class.
-
-Supported page number types are,
-
-* LowerLatin - a, b, c,
-* UpperLatin - A, B, C,
-* LowerRoman - i, ii, iii,
-* UpperRoman - I, II, III,
-* Number - 1,2,3.
-
-The following sample code demonstrates adding page number in the Header section of the exported document,
-
-```cshtml
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
+{% endhighlight %}
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
+{% highlight c# tabtitle="ChangeData.cs" %}
- public List HeaderContent = new List
+public class ChangeData
{
- new PdfHeaderFooterContent() { Type = ContentType.PageNumber, PageNumberType = PdfPageNumberType.Arabic, Position = new PdfPosition() { X = 0, Y = 25 }, Style = new PdfContentStyle() { TextBrushColor = "#0000ff", FontSize = 12, HAlign = PdfHorizontalAlign.Center } }
- };
-
- public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
- {
- PdfExportProperties ExportProperties = new PdfExportProperties();
- PdfHeader Header = new PdfHeader()
- {
- FromTop = 0,
- Height = 130,
- Contents = HeaderContent
- };
-
- ExportProperties.Header = Header;
- await this.DefaultGrid.PdfExport(ExportProperties);
+ public static List newOrders = new List();
+
+ public ChangeData(int OrderID, string CustomerId, string ShipCity, string ShipName)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.ShipCity = ShipCity;
+ this.ShipName = ShipName;
+ }
+
+ public static List GetAllRecords()
+ {
+ if (newOrders.Count == 0)
+ {
+ newOrders.Add(new ChangeData(20201, "BLAUS", "Madrid", "Blauer See Delikatessen"));
+ newOrders.Add(new ChangeData(20202, "FAMIA", "Sevilla", "Familia Arquibaldo"));
+ newOrders.Add(new ChangeData(20203, "GODOS", "Lisbon", "Godos Gourmet"));
+ newOrders.Add(new ChangeData(20204, "LINOD", "Porto", "Lino Delicias"));
+ newOrders.Add(new ChangeData(20205, "ALFKI", "Berlin", "Alfreds Futterkiste"));
+ newOrders.Add(new ChangeData(20206, "FRANK", "Paris", "Frankenversand"));
+ newOrders.Add(new ChangeData(20207, "LAMAI", "Milan", "La Maison du Délice"));
+ newOrders.Add(new ChangeData(20208, "TRADH", "Zürich", "Tradição Hipermercado"));
+ newOrders.Add(new ChangeData(20209, "WOLZA", "Hamburg", "Wolski Zajazd"));
+ newOrders.Add(new ChangeData(20210, "PICCO", "Naples", "Piccolo Ristorante"));
+ newOrders.Add(new ChangeData(20211, "BERGS", "Oslo", "Berglunds snabbköp"));
+ newOrders.Add(new ChangeData(20212, "BONAP", "Marseille", "Bon app'"));
+ newOrders.Add(new ChangeData(20213, "FOLKO", "Stockholm", "Folk och fä HB"));
+ newOrders.Add(new ChangeData(20214, "LEHMS", "Copenhagen", "Lehmanns Marktstand"));
+ newOrders.Add(new ChangeData(20215, "QUEEN", "London", "Queen Cozinha"));
}
- }
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
+ return newOrders;
}
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
}
-```
-#### Insert an image in header/footer
+{% endhighlight %}
+{% endtabs %}
-Image (Base64 string) can be added in header/footer area of the exported PDF document using [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Header) and [Footer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Footer) properties of the [PdfExportProperties](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXryXfDOqaghyKye?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-The following sample code demonstrates inserting image in the Header section of the exported document,
+## Exporting with custom aggregate
-```cshtml
-@using Syncfusion.Blazor.Grids
+Custom aggregates in the Syncfusion Blazor DataGrid involves exporting Grid data that includes additional calculated values based on specific requirements. This feature enables you to show the comprehensive view of the data in the exported file by incorporating the specific aggregated information you need for analysis or reporting purposes.
-
-
-
-
-
-
-
-
-
+In order to utilize custom aggregation, you need to specify the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html?_gl=1*n3kv9z*_gcl_aw*R0NMLjE3MzgwNjYwODYuQ2p3S0NBaUFuZUs4QmhBVkVpd0FveTJIWVFDU1Nhbm1XaWRsRGpDb2lSTEZBZEhPR21xMERSM2VxSGZRRzVGUVA3WEZsNjV1NndrRG14b0NqMHNRQXZEX0J3RQ..*_ga*NzE4Mzg0MjU3LjE3NDEwOTIxNDg.*_ga_41J4HFMX1J*MTc0NDE5NjE5My4xMjAuMS4xNzQ0MTk3ODY5LjAuMC4w#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) property as **Custom**.
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
+Within the **CustomAggregateFunction** function, it takes an input data that contains a result property. The function calculates the count of objects in this data where the **ShipCountry** field value is equal to **Brazil** and returns the count with a descriptive label.
- public List HeaderContent = new List
- {
- new PdfHeaderFooterContent() { Type = ContentType.Image, Src = "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", Position = new PdfPosition() { X = 40, Y = 10 }, Size = new PdfSize() { Height = 100, Width = 250 } }
- };
+The [PdfAggregateTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfAggregateTemplateInfo) event is used to handle custom aggregates during the export process. Within this event, the custom aggregate value is applied to the `args.Cell.Value` property, allowing you to include the custom aggregation in the exported PDF document.
- public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
- {
- PdfExportProperties ExportProperties = new PdfExportProperties();
- PdfHeader Header = new PdfHeader()
- {
- FromTop = 0,
- Height = 130,
- Contents = HeaderContent
- };
+The following example shows how to export the Grid with a custom aggregate that shows the calculation of the **Brazil** count of the **ShipCountry** column.
- ExportProperties.Header = Header;
- await this.DefaultGrid.PdfExport(ExportProperties);
- }
- }
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
-}
-```
-
-### How to change page orientation
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
-Page orientation can be changed Landscape(Default Portrait) for the exported document using the export properties.
-
-```cshtml
@using Syncfusion.Blazor.Grids
-
-
+
+
+
+
+
+
+
+
+ @{
+
+
Brazil Count: @CustomAggregateFunction()
+
+ }
+
+
+
+
+
+
-
-
-
-
+
+
+
+
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
+@code {
+ private SfGrid DefaultGrid;
+ public List OrderData { get; set; }
- public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
- {
- PdfExportProperties ExportProperties = new PdfExportProperties();
- ExportProperties.PageOrientation = Syncfusion.Blazor.Grids.PageOrientation.Landscape;
- await this.DefaultGrid.PdfExport(ExportProperties);
- }
- }
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
+ OrderData = OrderDetails.GetAllRecords();
}
-}
-```
-
-### How to change page size
-
-Page size can be customized for the exported document using the export properties.
-
-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
-
-```cshtml
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
{
- PdfExportProperties ExportProperties = new PdfExportProperties();
- ExportProperties.PageSize = PdfPageSize.Letter;
- await this.DefaultGrid.PdfExport(ExportProperties);
+ await DefaultGrid.ExportToPdfAsync();
}
}
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
- public class Order
+ private int CustomAggregateFunction()
{
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
+ return OrderData.Count(x => x.ShipCountry.Contains("Brazil"));
}
-}
-```
-
-### Export current page
-
-PDF export provides an option to export the current page into PDF. To export current page, define the **exportType** to **CurrentPage**.
-
-```cshtml
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
-
- public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
+ public void PdfAggregateTemplateInfoHandler(PdfAggregateEventArgs args)
{
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
+ if (args.Column.Field == "ShipCountry")
{
- PdfExportProperties ExportProperties = new PdfExportProperties();
- ExportProperties.ExportType = ExportType.CurrentPage;
- await this.DefaultGrid.PdfExport(ExportProperties);
+ args.Cell.Value = $"Brazil Count: {CustomAggregateFunction()}";
}
}
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
}
-```
-
-### Export hidden columns
-PDF export provides an option to export hidden columns of DataGrid by defining the [IncludeHiddenColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_IncludeHiddenColumn) as **true**.
+{% endhighlight %}
+{% highlight c# tabtitle="OrderDetails.cs" %}
-```cshtml
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
-
- public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
- {
- PdfExportProperties ExportProperties = new PdfExportProperties();
- ExportProperties.IncludeHiddenColumn = true;
- await this.DefaultGrid.PdfExport(ExportProperties);
+public class OrderDetails
+{
+ public static List Order = new List();
+ public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry)
+ {
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerId;
+ this.Freight = Freight;
+ this.ShipCountry = ShipCountry;
+ }
+ public static List GetAllRecords()
+ {
+ if (Order.Count == 0)
+ {
+ Order.Add(new OrderDetails(10248, "VINET", 32.38, "France"));
+ Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany"));
+ Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil"));
+ Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France"));
+ Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium"));
+ Order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil"));
+ Order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland"));
+ Order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland"));
+ Order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil"));
+ Order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela"));
+ Order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria"));
+ Order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico"));
+ Order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany"));
+ Order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil"));
+ Order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA"));
}
+ return Order;
}
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCountry { get; set; }
}
-```
-### Export the selected records only
+{% endhighlight %}
+{% endtabs %}
-The Grid has an option to export the selected records in a pdf exported document. This can be achieved by using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_DataSource) property of the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class and the [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRecordsAsync) method of the Grid.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrINftYJMQFuKca?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-In the following sample, selected records will be gotten from the `GetSelectedRecordsAsync` method and provided to the` DataSource` property of `PdfExportProperties`. Then pass this PdfExportProperties class to the [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_System_Nullable_System_Boolean__System_Object_System_Nullable_System_Boolean__) method to get the selected records in the exported document.
+## Exporting with custom date format
-```cshtml
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
- public async Task OnToolbarClick(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
- {
- PdfExportProperties PdfProperties = new PdfExportProperties();
- var selectedRecord = await DefaultGrid.GetSelectedRecordsAsync();
- if(selectedRecord.Count() > 0)
- {
- PdfProperties.DataSource = selectedRecord;
- }
- else
- {
- PdfProperties.DataSource = Orders;
- }
- await this.DefaultGrid.ExportToPdfAsync(PdfProperties);
- }
- }
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 15).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- ShipCountry = (new string[] { "Germany", "UK", "USA", "Italy", "France" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public string ShipCountry { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
-}
-```
+The exporting functionality in the Syncfusion Blazor DataGrid allows you to export Grid data, including custom date format. This feature is useful when you need to export Grid data with customized date values.
-### Theme
+To apply a custom date format to Grid columns during the export, you can utilize the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html?_gl=1*menbkd*_gcl_aw*R0NMLjE3MzgwNjYwODYuQ2p3S0NBaUFuZUs4QmhBVkVpd0FveTJIWVFDU1Nhbm1XaWRsRGpDb2lSTEZBZEhPR21xMERSM2VxSGZRRzVGUVA3WEZsNjV1NndrRG14b0NqMHNRQXZEX0J3RQ..*_ga*NzE4Mzg0MjU3LjE3NDEwOTIxNDg.*_ga_41J4HFMX1J*MTc0NDI2NjE5MC4xMjIuMS4xNzQ0MjY3NTQ1LjAuMC4w#Syncfusion_Blazor_Grids_GridColumn_Format) property. This property allows you to define a custom format using format options.
-PDF export provides an option to include theme for exported PDF document.
+The following example demonstrates how to export the Grid with a custom date format. In this example, the `Format` property is used for the **OrderDate** column. This custom date `Format` displays the date in the format of day-of-the-week, month abbreviation, day, and 2-digit year (e.g., Sun, Jan 15, 23). The [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) method is called in the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event to export the data to PDF document.
-To apply theme in exported PDF, define the **theme** in export properties.
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
-```cshtml
@using Syncfusion.Blazor.Grids
-
+
-
-
-
-
+
+
+
+
+
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
+@code {
+ private SfGrid DefaultGrid;
+ public List Orders { get; set; }
+ public string FormatOptions = "ddd, MMM d, ''yy";
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
{
- PdfExportProperties ExportProperties = new PdfExportProperties();
- PdfTheme Theme = new PdfTheme();
-
- PdfBorder HeaderBorder = new PdfBorder();
- HeaderBorder.Color = "#64FA50";
-
- PdfThemeStyle HeaderThemeStyle = new PdfThemeStyle()
- {
- FontColor = "#64FA50",
- FontName = "Calibri",
- FontSize = 17,
- Bold = true,
- Border = HeaderBorder
- };
- Theme.Header = HeaderThemeStyle;
-
- PdfThemeStyle RecordThemeStyle = new PdfThemeStyle()
- {
- FontColor = "#64FA50",
- FontName = "Calibri",
- FontSize = 17
-
- };
- Theme.Record = RecordThemeStyle;
-
- PdfThemeStyle CaptionThemeStyle = new PdfThemeStyle()
- {
- FontColor = "#64FA50",
- FontName = "Calibri",
- FontSize = 17,
- Bold = true
-
- };
- Theme.Caption = CaptionThemeStyle;
-
- ExportProperties.Theme = Theme;
- await this.DefaultGrid.PdfExport(ExportProperties);
+ await this.DefaultGrid.ExportToPdfAsync();
}
}
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
-}
-```
-
-N> By default, material theme is applied to exported PDF document.
-
-### Customize column width in exported PDF document
-
-The PDF export provides an option to customize the column being exported to a PDF format using the [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Columns) property of the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class. While defining the column, we can change its width as per the requirement.
-
-In the following code sample, we have customized the column width for the PDF exported grid by enabling the [DisableAutoFitWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_DisableAutoFitWidth) property of the `PdfExportProperties` class.
-
-```cshtml
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
protected override void OnInitialized()
{
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
+ Orders = OrderData.GetAllRecords();
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
- public async Task PdfExport()
- {
- PdfExportProperties ExportProperties = new PdfExportProperties();
- ExportProperties.DisableAutoFitWidth = true;
- ExportProperties.Columns = new List()
- {
- new GridColumn(){ Field="OrderID", HeaderText="Order ID", TextAlign=TextAlign.Left, Width="300"},
- new GridColumn(){ Field="CustomerID", HeaderText="Customer Name", TextAlign=TextAlign.Left, Width="100"},
- new GridColumn(){ Field="OrderDate", HeaderText=" Order Date", Type=ColumnType.Date, Format="d", TextAlign=TextAlign.Left, Width="80"}
- };
- await this.DefaultGrid.PdfExport(ExportProperties);
}
}
-```
-
-N> You can find the fully working sample [here](https://github.com/SyncfusionExamples/blazor-datagrid-customize-column-in-pdf-exported-document).
-
-### Grid cell customization in PDF export
-
-DataGrid has support to customize the column header and content styles, such as changing text orientation, the font color, the width of the header and content text, and so on in the exported PDF file. To achieve this requirement, define the `BeginCellLayout` event of the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) with an event handler to perform the required action.
-
-The [PdfHeaderQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfHeaderQueryCellInfoEvent) will be triggered when creating a column header for the pdf document to be exported. Collect the column header details in this event and handle the custom in the `BeginCellLayout` event handler.
-
-In the following demo, the [DrawString](https://help.syncfusion.com/cr/file-formats/Syncfusion.Pdf.Graphics.PdfGraphics.html#Syncfusion_Pdf_Graphics_PdfGraphics_DrawString_System_String_Syncfusion_Pdf_Graphics_PdfFont_Syncfusion_Pdf_Graphics_PdfBrush_System_Drawing_PointF_) method from the [Graphics](https://help.syncfusion.com/cr/file-formats/Syncfusion.Pdf.Graphics.PdfGraphics.html) is used to rotate the header text of the column header inside the `BeginCellLayout` event handler.
-
-```cshtml
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.Pdf.Graphics
-@using Syncfusion.PdfExport
-@using System.Drawing
-@using Syncfusion.Pdf
-
-
-
-
-
-
-
-
-
-
+{% endhighlight %}
+{% highlight c# tabtitle="OrderData.cs" %}
+public class OrderData
+{
+ public static List Orders = new List();
-@code{
- public SfGrid DefaultGrid;
- public List Orders { get; set; }
- List headerValues = new List();
+ public OrderData() { }
- public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
+ public OrderData(int OrderID, string CustomerID, string ShipName, double Freight, DateTime? OrderDate, DateTime? ShippedDate, bool? IsVerified, string ShipCity, string ShipCountry, int employeeID)
{
- if (args.Item.Id == "Grid_pdfexport") // Id is combination of Grid's ID and itemname.
- {
- PdfExportProperties ExportProperties = new PdfExportProperties();
- ExportProperties.BeginCellLayout = new PdfGridBeginCellLayoutEventHandler(BeginCellEvent);
- ExportProperties.FileName = "test.pdf";
- ExportProperties.IsRepeatHeader = true;
- await this.DefaultGrid.PdfExport(ExportProperties);
- }
+ this.OrderID = OrderID;
+ this.CustomerID = CustomerID;
+ this.ShipName = ShipName;
+ this.Freight = Freight;
+ this.OrderDate = OrderDate;
+ this.ShippedDate = ShippedDate;
+ this.IsVerified = IsVerified;
+ this.ShipCity = ShipCity;
+ this.ShipCountry = ShipCountry;
+ this.EmployeeID = employeeID;
}
- public void BeginCellEvent(object sender, PdfGridBeginCellLayoutEventArgs args)
+ public static List GetAllRecords()
{
- PdfGrid grid = (PdfGrid)sender;
- var brush = new Syncfusion.PdfExport.PdfSolidBrush(new Syncfusion.PdfExport.PdfColor(Color.DimGray));
- args.Graphics.Save();
- args.Graphics.TranslateTransform(args.Bounds.X + 50, args.Bounds.Height + 40);
- args.Graphics.RotateTransform(-60);
- // Draw the text at particular bounds.
- args.Graphics.DrawString(headerValues[args.CellIndex], new Syncfusion.PdfExport.PdfStandardFont(Syncfusion.PdfExport.PdfFontFamily.Helvetica, 10), brush, new PointF(0, 0));
- if (args.IsHeaderRow)
+ if (Orders.Count == 0)
{
- grid.Headers[0].Cells[args.CellIndex].Value = string.Empty;
+ Orders.Add(new OrderData(10248, "VINET", "Vins et alcools Chevalier", 32.38, new DateTime(1996, 7, 4), new DateTime(1996, 08, 07), true, "Reims", "France", 1));
+ Orders.Add(new OrderData(10249, "TOMSP", "Toms Spezialitäten", 11.61, new DateTime(1996, 7, 5), new DateTime(1996, 08, 07), false, "Münster", "Germany", 2));
+ Orders.Add(new OrderData(10250, "HANAR", "Hanari Carnes", 65.83, new DateTime(1996, 7, 6), new DateTime(1996, 08, 07), true, "Rio de Janeiro", "Brazil", 3));
+ Orders.Add(new OrderData(10251, "VINET", "Vins et alcools Chevalier", 41.34, new DateTime(1996, 7, 7), new DateTime(1996, 08, 07), false, "Lyon", "France", 1));
+ Orders.Add(new OrderData(10252, "SUPRD", "Suprêmes délices", 151.30, new DateTime(1996, 7, 8), new DateTime(1996, 08, 07), true, "Charleroi", "Belgium", 2));
+ Orders.Add(new OrderData(10253, "HANAR", "Hanari Carnes", 58.17, new DateTime(1996, 7, 9), new DateTime(1996, 08, 07), false, "Bern", "Switzerland", 3));
+ Orders.Add(new OrderData(10254, "CHOPS", "Chop-suey Chinese", 22.98, new DateTime(1996, 7, 10), new DateTime(1996, 08, 07), true, "Genève", "Switzerland", 2));
+ Orders.Add(new OrderData(10255, "VINET", "Vins et alcools Chevalier", 148.33, new DateTime(1996, 7, 11), new DateTime(1996, 08, 07), false, "Resende", "Brazil", 1));
+ Orders.Add(new OrderData(10256, "HANAR", "Hanari Carnes", 13.97, new DateTime(1996, 7, 12), new DateTime(1996, 08, 07), true, "Paris", "France", 3));
}
- args.Graphics.Restore();
- }
-
- public void PdfHeaderQueryCellInfoHandler(PdfHeaderQueryCellInfoEventArgs args)
- {
- headerValues.Add(args.Column.HeaderText);
- var longestString = headerValues.Where(s => s.Length == headerValues.Max(m => m.Length)).
- First();
- Syncfusion.PdfExport.PdfFont font = new Syncfusion.PdfExport.PdfStandardFont(Syncfusion.PdfExport.PdfFontFamily.Helvetica, 6);
- SizeF size = font.MeasureString(longestString);
- args.PdfGridColumn.Grid.Headers[0].Height = size.Width * 2;
- }
-
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
+ return Orders;
+ }
+
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public string ShipName { get; set; }
+ public double? Freight { get; set; }
+ public DateTime? OrderDate { get; set; }
+ public DateTime? ShippedDate { get; set; }
+ public bool? IsVerified { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipCountry { get; set; }
+ public int EmployeeID { get; set; }
}
-
-```
-
-
-
-
-
-## Custom data source
-
-PDF export provides an option to define the datasource dynamically before exporting. To export data dynamically, define it in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_DataSource) property of the [PdfExportProperties](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class
-
-The following sample code demonstrates dynamically modifying the data source before exporting it,
-
-```cshtml
@using Syncfusion.Blazor.Grids
-
-
+
@message
+
+
-
-
-
-
+
+
+
+
-
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
-
- public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
- {
- PdfExportProperties PdfProperties = new PdfExportProperties();
- PdfProperties.DataSource = Orders;
- await this.DefaultGrid.PdfExport(PdfProperties);
- }
- }
- protected override void OnInitialized()
- {
- Orders = Enumerable.Range(1, 75).Select(x => new Order()
- {
- OrderID = 1000 + x,
- CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
- Freight = 2.1 * x,
- OrderDate = DateTime.Now.AddDays(-x),
- }).ToList();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
+
+@code {
+ private SfGrid Grid;
+ public List Orders { get; set; }
+ private string message = "";
+ private Query queryClone;
- public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
- {
- MemoryStream streamDoc = await DefaultGrid.ExportToPdfAsync(asMemoryStream: true);
- await JSRuntime.InvokeVoidAsync("saveAsFile", new object[] {"PdfMemoryStream.pdf", Convert.ToBase64String(streamDoc.ToArray()), true });
- }
- }
- public List GetAllRecords()
- {
- List data = new List();
- int count = 1000;
- for (int i = 0; i < 15; i++)
- {
- data.Add(new Order() { OrderID = count + 1, CustomerID = "ALFKI", OrderDate = new DateTime(1995, 05, 15), Freight = 25.7 * 2 });
- data.Add(new Order() { OrderID = count + 2, CustomerID = "ANANTR", OrderDate = new DateTime(1994, 04, 04), Freight = 26.7 * 2 });
- data.Add(new Order() { OrderID = count + 3, CustomerID = "BLONP", OrderDate = new DateTime(1993, 03, 10), Freight = 27.7 * 2 });
- data.Add(new Order() { OrderID = count + 4, CustomerID = "ANTON", OrderDate = new DateTime(1992, 02, 14), Freight = 28.7 * 2 });
- data.Add(new Order() { OrderID = count + 5, CustomerID = "BOLID", OrderDate = new DateTime(1991, 01, 18), Freight = 29.7 * 2 });
- count += 5;
- }
- return data;
- }
protected override void OnInitialized()
{
- Orders = GetAllRecords();
+ Orders = OrderData.GetAllRecords();
}
- public class Order
+ public async Task ToolbarClickHandler(ClickEventArgs args)
{
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
-}
-```
-
-### Converting Memory Stream to File Stream for PDF Export
-
-This section explains the process of converting a memory stream obtained from the `ExportToPdfAsync` method into a file stream to export pdf document.
-
-To know about exporting Blazor DataGrid as a Stream to a PDF document in Blazor DataGrid Component, you can check this video.
-
-{% youtube "youtube:https://www.youtube.com/watch?v=H5rqB_hBpUM"%}
-
-The example provided demonstrates this process of exporting the pdf document from the file stream.
-
-```cshtml
-@using Syncfusion.Blazor.Grids
-@using System.IO;
-@using Syncfusion.Pdf
-@using Syncfusion.XlsIO
-@using Syncfusion.PdfExport;
-@using Syncfusion.ExcelExport;
-@inject IJSRuntime JSRuntime
-
-
-
-
-
-
-
-
-
-
-
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
-
- public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
+ if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname.
{
- //Memory stream to file stream exporting
- MemoryStream streamDoc1 = await DefaultGrid.ExportToPdfAsync(asMemoryStream: true);
-
- //Create a copy of streamDoc1
- MemoryStream copyOfStreamDoc1 = new MemoryStream(streamDoc1.ToArray());
- //For creating the exporting location with file name, for this need to specify the physical exact path of the file
- string filePaths = "C:Users/abc/Downloads/SampleTestPdf.pdf";
+ queryClone = this.Grid?.Query;
+ this.Grid!.Query = new Query().AddParams("recordcount", "15");
- // Create a FileStream to write the moryStream contents to a file
- using (FileStream fileStream = File.Create(filePaths))
+ if (this.Grid!.Query.Queries.Params?.Count > 0)
{
- // Copy the MemoryStream data to the FileStream
- copyOfStreamDoc1.CopyTo(fileStream);
+ var param = Grid.Query.Queries.Params.First();
+ message = $"Key: {param.Key} and Value: {param.Value?.ToString()} on {args.Item.Text}";
}
+ await Grid.ExportToPdfAsync();
}
}
- public List GetAllRecords()
+
+ public void ExportCompleteHandler(object args)
{
- List data = new List();
- int count = 1000;
- for (int i = 0; i < 15; i++)
+ if (queryClone != null)
{
- data.Add(new Order() { OrderID = count + 1, CustomerID = "ALFKI", OrderDate = new DateTime(1995, 05, 15), Freight = 25.7 * 2 });
- data.Add(new Order() { OrderID = count + 2, CustomerID = "ANANTR", OrderDate = new DateTime(1994, 04, 04), Freight = 26.7 * 2 });
- data.Add(new Order() { OrderID = count + 3, CustomerID = "BLONP", OrderDate = new DateTime(1993, 03, 10), Freight = 27.7 * 2 });
- data.Add(new Order() { OrderID = count + 4, CustomerID = "ANTON", OrderDate = new DateTime(1992, 02, 14), Freight = 28.7 * 2 });
- data.Add(new Order() { OrderID = count + 5, CustomerID = "BOLID", OrderDate = new DateTime(1991, 01, 18), Freight = 29.7 * 2 });
- count += 5;
+ this.Grid!.Query = queryClone;
}
- return data;
- }
- protected override void OnInitialized()
- {
- Orders = GetAllRecords();
- }
-
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
}
}
-```
-### Merging Two PDF Memory Streams
+{% endhighlight %}
-This section explains the process of combining two memory stream files and exporting the resulting merged file as a PDF document. To accomplish this, you can use the PDF documents [Merge](https://help.syncfusion.com/cr/file-formats/Syncfusion.Pdf.PdfDocumentBase.html#Syncfusion_Pdf_PdfDocumentBase_Merge_Syncfusion_Pdf_PdfDocumentBase_Syncfusion_Pdf_Parsing_PdfLoadedDocument_) method available in the [PdfDocumentBase](https://help.syncfusion.com/cr/file-formats/Syncfusion.Pdf.PdfDocumentBase.html) class, class. To achieve this functionality, you can utilize the [Syncfusion.Blazor.Pdf](https://www.nuget.org/packages/Syncfusion.Pdf.Net.Core/) package.
-
-The provided example demonstrates the merging of two memory streams and exporting the resulting merged memory stream for browser download.
-
-In this example, there are two memory streams: *streamDoc1* and *streamDoc2*. streamDoc1 represents the normal grid memory stream, while streamDoc2 contains the memory stream of a customized grid using the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class. The merging process combines these streams into a new PDF document, converting it into a memory stream. This merged memory stream is then utilized to initiate the browser download.
-
- ```cshtml
-@using Syncfusion.Blazor.Grids
-@using System.IO;
-@using Syncfusion.PdfExport;
-@using Syncfusion.Pdf
-@inject IJSRuntime JSRuntime
+{% highlight c# tabtitle="OrderData.cs" %}
-
-
-
-
-
-
-
-
-
-
-@code{
- private SfGrid DefaultGrid;
- public List Orders { get; set; }
-
- public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "Grid_pdfexport") //Id is combination of Grid's ID and itemname
- {
- //Merging two memory stream
- MemoryStream mergedStream = new MemoryStream();
-
- //Creates a PDF document.
- Syncfusion.Pdf.PdfDocument finalDoc = new Syncfusion.Pdf.PdfDocument();
- MemoryStream streamDoc1 = await DefaultGrid.ExportToPdfAsync(asMemoryStream: true);
- //Create a copy of streamDoc1 to access the memory stream
- MemoryStream copyOfStreamDoc1 = new MemoryStream(streamDoc1.ToArray());
-
- //Customized grid for memory stream export
- PdfExportProperties ExportProperties = new PdfExportProperties();
- PdfTheme Theme = new PdfTheme();
- PdfBorder HeaderBorder = new PdfBorder();
- HeaderBorder.Color = "#000000";
-
- PdfThemeStyle HeaderThemeStyle = new PdfThemeStyle()
- {
- FontColor = "#6A5ACD",
- FontName = "Comic Sans MS",
- FontSize = 17,
- Bold = true,
- Border = HeaderBorder
- };
- Theme.Header = HeaderThemeStyle;
-
- PdfThemeStyle RecordThemeStyle = new PdfThemeStyle()
- {
- FontColor = "#800080",
- FontName = "Comic Sans MS",
- FontSize = 14,
- Border = HeaderBorder
- };
- Theme.Record = RecordThemeStyle;
-
- ExportProperties.Theme = Theme;
- MemoryStream streamDoc2 = await DefaultGrid.ExportToPdfAsync(asMemoryStream: true, ExportProperties);
- //Create a copy of streamDoc2 to access the memory stream
- MemoryStream copyOfStreamDoc2 = new MemoryStream(streamDoc2.ToArray());
-
- //Creates a PDF stream for merging.
- Stream[] streams = { copyOfStreamDoc1, copyOfStreamDoc2 };
- Syncfusion.Pdf.PdfDocument.Merge(finalDoc, streams);
- finalDoc.Save(mergedStream);
- await JSRuntime.InvokeVoidAsync("saveAsFile", new object[] { "MemoryStreamMerge.pdf", Convert.ToBase64String(mergedStream.ToArray()), true });
- }
- }
- public List GetAllRecords()
- {
- List data = new List();
- int count = 1000;
- for (int i = 0; i < 15; i++)
- {
- data.Add(new Order() { OrderID = count + 1, CustomerID = "ALFKI", OrderDate = new DateTime(1995, 05, 15), Freight = 25.7 * 2 });
- data.Add(new Order() { OrderID = count + 2, CustomerID = "ANANTR", OrderDate = new DateTime(1994, 04, 04), Freight = 26.7 * 2 });
- data.Add(new Order() { OrderID = count + 3, CustomerID = "BLONP", OrderDate = new DateTime(1993, 03, 10), Freight = 27.7 * 2 });
- data.Add(new Order() { OrderID = count + 4, CustomerID = "ANTON", OrderDate = new DateTime(1992, 02, 14), Freight = 28.7 * 2 });
- data.Add(new Order() { OrderID = count + 5, CustomerID = "BOLID", OrderDate = new DateTime(1991, 01, 18), Freight = 29.7 * 2 });
- count += 5;
+public class OrderData
+{
+ public static List Orders = new List();
+ public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName)
+ {
+ this.OrderID = orderID;
+ this.CustomerID = customerID;
+ this.Freight = freight;
+ this.ShipCity = shipCity;
+ this.ShipName = shipName;
+ }
+ public static List GetAllRecords()
+ {
+ if (Orders.Count == 0)
+ {
+ Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier"));
+ Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten"));
+ Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock"));
+ Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices"));
+ Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes"));
+ Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese"));
+ Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt"));
+ Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export"));
+ Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos"));
+ Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel"));
+ Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial"));
+ Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen"));
+ Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia"));
+ Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery"));
}
- return data;
- }
- protected override void OnInitialized()
- {
- Orders = GetAllRecords();
+ return Orders;
}
- public class Order
- {
- public int? OrderID { get; set; }
- public string CustomerID { get; set; }
- public DateTime? OrderDate { get; set; }
- public double? Freight { get; set; }
- }
+ public int OrderID { get; set; }
+ public string CustomerID { get; set; }
+ public double Freight { get; set; }
+ public string ShipCity { get; set; }
+ public string ShipName { get; set; }
}
-```
-
-## See also
-
-* [Export Blazor Datagrid with Barcode to PDF](https://www.syncfusion.com/forums/175315/export-datagrid-with-barcode)
+{% endhighlight %}
+{% endtabs %}
-N> You can refer to our [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data.
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBIZTssVIvJCeji?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file