diff --git a/blazor/datagrid/adding-header-and-footer.md b/blazor/datagrid/adding-header-and-footer.md
index 5058dae5ed..04d56a97e9 100644
--- a/blazor/datagrid/adding-header-and-footer.md
+++ b/blazor/datagrid/adding-header-and-footer.md
@@ -9,7 +9,7 @@ documentation: ug
# Adding header and footer in Blazor DataGrid
-The Syncfusion® Blazor DataGrid supports customizing header and footer sections in PDF exports. These regions can include:
+The Syncfusion® Blazor DataGrid enables customized header and footer sections to be added in exported PDF documents. This feature supports custom text, page numbers, lines, page size configuration, and orientation changes for header and footer sections. These regions can include:
* **Text** – Titles, dates, or disclaimers.
* **Page Numbers** – For easy navigation.
@@ -19,15 +19,15 @@ The Syncfusion® Blazor DataGrid supports cu
## Adding text in header and footer
-The Syncfusion® Blazor DataGrid supports adding custom text to header and footer regions in PDF exports.
+The Syncfusion® Blazor DataGrid supports adding custom text to the `Header` or `Footer` sections of exported PDF documents.
-* The **header** appears at the top of each page and can include elements such as a document title, company logo, or date and metadata. This section is typically used for branding and document identification.
+* The **Header** section of a PDF document is positioned at the top of each page and provides a space for additional information or branding elements such as company logos, document titles, dates, or other information that repeats consistently across every page.
-* The **footer** appears at the bottom of each page and commonly contains page numbers, copyright text, or disclaimers. This section is useful for navigation and compliance information.
+* The **Footer** section is positioned at the bottom of each page and serves as an area for custom text content. Common footer content includes page numbers, copyright information, and disclaimers, with footer content repeated on every page similar to the header.
-To add text in the header and footer of the exported PDF:
+To add text to the `Header` or `Footer` of the exported PDF document, follow these steps:
-1. Access `[PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html).
+1. Access `[PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class.
2. Assign [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_Header) and [Footer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_Footer) using [PdfHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeader.html) and [PdfFooter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfFooter.html) objects.
3. Add one or more [PdfHeaderFooterContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderFooterContent.html) items to the `Contents` collection for each region.
4. Call [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) to export with the configured header and footer.
@@ -169,7 +169,7 @@ public class OrderData
## Draw a line in header and footer
-The Syncfusion® Blazor DataGrid supports drawing lines in header and footer regions when exporting to PDF. **Lines** are commonly used to visually separate these regions from the main content.
+Line elements can be added to the header and footer sections of exported PDF documents. This feature creates clear visual separation between the header/footer and the main content, enhancing document structure and readability. The Syncfusion® Blazor DataGrid supports drawing lines in header and footer regions when exporting to PDF. **Lines** are commonly used to visually separate these regions from the main content.
**Supported Line Styles**
@@ -181,9 +181,9 @@ The line style is controlled using the [PdfDashStyle](https://help.syncfusion.co
- DashDotDot
- Solid
-To draw a line in the header and footer:
+To draw a line in the `Header` and `Footer`:
-1. Access Header.Contents and Footer.Contents in [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html).
+1. Access `Header.Contents` and `Footer.Contents` in [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class.
2. Add [PdfHeaderFooterContent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfHeaderFooterContent.html) items and set the [ContentType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContentType.html#Syncfusion_Blazor_Grids_ContentType) to [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContentType.html#Syncfusion_Blazor_Grids_ContentType_Line).
3. Configure Style properties such as `DashStyle`, `PenColor`, and `PenSize`.
4. Define line coordinates using `Points`.
@@ -373,7 +373,7 @@ public class OrderData
## Add page number in header and footer
-The Syncfusion® Blazor DataGrid supports adding page numbers to header and footer regions when exporting to PDF. This feature improves document navigation and readability.
+The Syncfusion® Blazor DataGrid supports adding page numbers to header and footer regions when exporting to PDF. This feature provides page references for better document navigation and readability.
Page numbers are configured using [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html). Set the [ContentType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContentType.html#Syncfusion_Blazor_Grids_ContentType) to [PageNumber](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContentType.html#Syncfusion_Blazor_Grids_ContentType_PageNumber) when adding page numbers to the header or footer.
@@ -388,7 +388,7 @@ The display format is controlled by [PageNumberType](https://help.syncfusion.com
To add page numbers:
-1. Add content items to the header and/or footer and set the content type to `PageNumber`.
+1. Add content items to the `Header` and/or `Footer` and set the `Content Type` to `PageNumber`.
2. Specify the page number format using `PageNumberType`.
3. Define position and style properties as needed.
4. Call [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) to generate the PDF with page numbers.
@@ -540,12 +540,12 @@ public class OrderData
## Insert an image in header and footer
-The Syncfusion® Blazor DataGrid supports adding images, such as company logos, to header and footer regions when exporting to PDF. This feature is useful for branding and document personalization.
+The Syncfusion® Blazor DataGrid supports adding images, such as company logos to header and footer regions when exporting to PDF. This feature enables addition of custom logos, branding elements, or other relevant images to enhance document presentation.
To insert an image:
1. Convert the image to a **Base64 string** in **JPEG** format.
-2. Access [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) and add content items to the [header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_Header) and/or [footer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_Footer).
+2. Access [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) and add content items to the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_Header) and/or [Footer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_Footer).
3. Set the [ContentType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContentType.html#Syncfusion_Blazor_Grids_ContentType) to [Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ContentType.html#Syncfusion_Blazor_Grids_ContentType_Image) and assign the **Base64 string** to the `Src` property.
4. Define the image position and size using `Position` and `Size` properties.
5. Call [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) to generate the PDF with the configured image.
@@ -669,7 +669,7 @@ public class OrderData
## Repeat column header on every page
-The Syncfusion® Blazor DataGrid supports repeating column headers on every page of a PDF export. This ensures headers remain visible when the content spans multiple pages. By default, headers appear only on the first page.
+The Syncfusion® Blazor DataGrid supports repeating column headers on every page of a PDF export. This feature ensures that the column header remains visible and easily identifiable, even when data spans multiple pages in the exported PDF document.
To enable this feature:
diff --git a/blazor/datagrid/excel-export-options.md b/blazor/datagrid/excel-export-options.md
index b6f0719900..ba8d4a2674 100644
--- a/blazor/datagrid/excel-export-options.md
+++ b/blazor/datagrid/excel-export-options.md
@@ -7,10 +7,11 @@ control: DataGrid
documentation: ug
---
-# Excel export options in Blazor DataGrid
+# Excel Export Options in Blazor DataGrid
-The Syncfusion® Blazor DataGrid allows customization of Excel and CSV export functionality. This flexibility enables precise control over the exported content and layout to meet specific requirements.
+The Syncfusion® Blazor DataGrid provides powerful Excel and CSV export customization options. This flexibility enables precise control over exported content and layout, ensuring the output meets specific business requirements and presentation standards.
+The Excel or CSV export action can be tailored using the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) property. This property allows exporting specific columns, including or excluding hidden columns, exporting with custom data sources, enabling filters in exported files, changing file names, adding headers and footers, exporting multiple grids, customizing data based on queries, defining CSV delimiters, and setting themes.
The export behavior can be customized using the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) property. This property supports various options, including:
* Exporting specific columns.
@@ -25,12 +26,16 @@ The export behavior can be customized using the [ExcelExportProperties](https://
## Export current page records
-Exporting the current page records from the Syncfusion® Blazor DataGrid enables generating Excel or CSV documents that reflect only the data currently visible in the Grid. This approach is suitable when the intent is to capture a snapshot of the paginated view rather than the entire dataset.
+The Syncfusion® Blazor DataGrid provides the option to generate Excel or CSV documents that include only the currently displayed page records. This feature improves export performance and file size management by limiting the exported content to the visible page.
-To configure this behavior, handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event and invoke the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method with the [ExportType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_ExportType) property set in the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) object. The available options include:
+To export the current page of the DataGrid to an Excel or CSV document, specify the [ExportType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_ExportType) property. This property defines which records to export with two available options:
-* **CurrentPage**: Includes only the records shown on the active Grid page.
-* **AllPages**: Includes all records across all pages.
+| **Export Type** | **Description** |
+|----------------|----------------|
+| `CurrentPage` | Exports only the records on the current DataGrid page. |
+| `AllPages` | Exports all records from the DataGrid. |
+
+The following example demonstrates exporting either the current page or all pages to an Excel document based on the selected item in the `SfDropDownList` when a toolbar item is clicked.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -138,15 +143,17 @@ public class EmployeeData
## Export the selected records
-Exporting selected records from the Syncfusion® Blazor DataGrid enables generating Excel or CSV documents that include only specific data. This approach supports focused exports based on selection.
+Selected records export functionality enables generating Excel or CSV documents that include only specific data. This feature provides flexibility to export relevant records, enabling more focused and targeted Excel or CSV exports based on selection criteria.
-To export selected records:
+To export the selected records from the DataGrid to an Excel or CSV file, 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.
-2. Retrieve the selected records using [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRecordsAsync) .
-3. Assign the selected data to [ExportProperties.DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_DataSource) property.
+2. Retrieve the selected records using [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRecordsAsync).
+3. Assign the selected data to [ExportProperties.DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_DataSource) property.
4. Invoke the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method.
+The following example demonstrates exporting the selected records to an Excel document when a toolbar item is clicked.
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -239,13 +246,11 @@ public class OrderData
## Exporting grouped records
-The Syncfusion® Blazor DataGrid supports exporting grouped records with outline formatting, allowing detailed rows to be collapsed for improved readability in the exported Excel document. This approach preserves the grouping structure and is suitable for sharing grouped data.
+Grouped records export support provides an outline option for grouped records, enabling the ability to hide detailed data for better viewing in the exported document. This feature is particularly useful when sharing data that is grouped based on specific columns while maintaining the grouping structure in the exported file.
-To enable grouped record export:
+To achieve this functionality, enable grouping by setting the [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) property to **true**. Additionally, define the [GroupSettings.Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_Columns) property to specify the columns by which to group the data.
-1. Set [AllowGrouping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowGrouping) to **true**.
-2. Specify grouping columns using [GroupSettings.Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridGroupSettings.html#Syncfusion_Blazor_Grids_GridGroupSettings_Columns).
-3. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event and invoke the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method.
+The following example demonstrates exporting grouped records to an Excel document when a toolbar item is clicked:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -342,15 +347,11 @@ Refer to the [Microsoft Excel](https://learn.microsoft.com/en-us/sql/reporting-s
## Export with hidden columns
-The Syncfusion® Blazor DataGrid supports exporting columns that are hidden in the UI but required in the exported Excel or CSV document. This approach helps include important data in the exported file without showing it in the Grid.
+Hidden column export functionality in the Syncfusion® Blazor DataGrid enables including hidden columns in the exported Excel document. This feature is useful when columns are hidden in the UI but still need to be included in the exported document for comprehensive data reporting.
-To include hidden columns in the export:
+To export hidden columns of the DataGrid to an Excel or CSV document, set the [IncludeHiddenColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_IncludeHiddenColumn) property to **true** in the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) property.
-1. Set [ExcelExportProperties.includeHiddenColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_IncludeHiddenColumn) to **true**.
-2. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
-3. Invoke the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method.
-
-In this configuration, the **ShipCity** column is hidden in the Grid and included in the exported Excel file when `ExcelExportProperties.IncludeHiddenColumn` is enabled.
+The following example demonstrates how to export hidden columns to an Excel document. In this example, the "Ship City" column, which is not visible in the UI, is exported to the Excel document. The DataGrid can also be exported by changing the `ExcelExportProperties.IncludeHiddenColumn` property based on the switch toggle using the [Checked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html#Syncfusion_Blazor_Buttons_SfSwitch_1_Checked) property of the [Toggle Switch Button](https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started-webapp).
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -453,13 +454,13 @@ public class OrderData
## Show or hide columns while exporting
-The Syncfusion® Blazor DataGrid allows showing or hiding specific columns during export. This helps include only the required data in the Excel or CSV file.
+Dynamic column visibility control during the export process enables selectively displaying or hiding specific columns based on requirements. This feature differs from the static [Export with hidden columns](#export-with-hidden-columns) feature by allowing runtime column visibility changes specifically for the export operation.
-To configure column visibility during export:
+To show or hide columns based on interaction during the export process, 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 update the column visibility using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible) property.
-2. Export the Grid using the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method.
-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 original visibility.
+2. Export the DataGrid using the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method.
+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 this configuration, the **CustomerID** column is shown only during export, and the **ShipCity** column is hidden.
@@ -565,9 +566,12 @@ public class OrderData
## Define file name
-The Syncfusion® Blazor DataGrid supports assigning a custom file name when exporting data to Excel or CSV formats. This capability helps generate descriptive file names, improving the organization and identification of exported documents.
+Custom file name configuration enables specifying a meaningful and descriptive name for the exported Excel or CSV document. This feature makes it easier to identify and manage the exported data.
+
+To assign a custom file name for the exported document, set the [FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_FileName) property of the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) property to the desired file name. Use this configuration as a parameter in the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method to initiate the export process with the specified file name.
-To configure a custom file name, set the [FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_FileName) property of the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) class within the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event. Use this configuration as a parameter in the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method to initiate the export process with the specified file name.
+
+The following example demonstrates defining a file name using `ExcelExportProperties.FileName` property when exporting to Excel document, based on the entered value as the file name.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -670,15 +674,17 @@ public class OrderData
## Customizing columns on export
-The Syncfusion® Blazor DataGrid allows customizing which columns appear in the exported Excel or CSV file. This helps adjust column headers, alignment, and formatting based on export requirements.
+Column customization on export enables tailoring specific column attributes such as field, header text, and text alignment in exported Excel or CSV documents. This feature ensures that exported Excels align perfectly with design and reporting requirements.
-To customize columns during export:
+To customize the DataGrid columns, 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.
-2. Create a list of **GridColumn** objects with the required **Field**, **HeaderText**, **TextAlign**, **Format**, and **Width** values.
-3. Assign the list to the [ExcelExportProperties.Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Columns) property and pass it to the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method to apply the column customizations during export.
+1. Access the [ExcelExportProperties.Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Columns) of the DataGrid.
+
+2. Set the `GridColumn` objects with attributes such as `Field`, `HeaderText`, and `TextAlign`, `Format` and `Width` values to define the desired format.
+
+3. Trigger the Excel or CSV export operation to apply the customized column settings.
-In this configuration, the **OrderID** column is exported with the header text **Order Number**, the **CustomerID** column with **Customer Name**, and the **Freight** column is center-aligned. These customizations are applied only during export and do not affect the Grid display.
+In this configuration, the **OrderID** column is exported with the header text **Order Number**, the **CustomerID** column with **Customer Name**, and the **Freight** column is center-aligned. These customizations are applied only during export and do not affect the DataGrid display.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -778,7 +784,7 @@ public class OrderData
## Font and color customization
-The Syncfusion® Blazor DataGrid supports applying font and color styles to the exported Excel or CSV document. This helps maintain a consistent and readable appearance for exported data.
+The Syncfusion® Blazor DataGrid supports applying font and color styles to the exported Excel or CSV document. This helps maintain a consistent and readable appearance for exported data. Theme customization support for Excel export enables maintaining a consistent and visually appealing style for the exported data in Excel documents. This feature allows defining custom styles for captions, headers, and record content.
To apply styling:
@@ -790,13 +796,13 @@ To apply styling:
* **Caption**
-Applies styling to the caption section in the exported document. The caption is typically a title or description shown at the top of the Excel or CSV sheet.
+Applies styling to the caption section in the exported Excel document. The caption is typically a title or description shown at the top of the Excel or CSV sheet.
* **Header**
-Applies styling to the column headers in the exported document. These headers match the column titles shown in the Grid.
+Applies styling to the column headers in the exported Excel document. These headers match the column titles shown in the DataGrid.
* **Record**
-Applies styling to the data rows in the exported document. These rows contain the actual values from the Grid.
+Applies styling to the data rows in the exported Excel document. These rows contain the actual values from the DataGrid.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -897,239 +903,6 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVyDpiXSTLiKArB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Customizing the background color for a Grid in an exported Excel or CSV document
-
-The Syncfusion® Blazor DataGrid allows customizing the background color of Grid content—such as header, record, and caption rows—when exporting to Excel or CSV formats. This improves readability and enhances the visual appearance of exported files.
-
-To apply background color:
-
-1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
-
-2. Create an instance of [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html).
-
-3. Define an [ExcelTheme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelTheme.html) and set a custom [ExcelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelStyle.html) with the [BackColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelStyle.html#Syncfusion_Blazor_Grids_ExcelStyle_BackColor) property.
-
-4. Assign the style to the following properties of the theme:
-
-* [Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelTheme.html#Syncfusion_Blazor_Grids_ExcelTheme_Caption): Applies background color to the caption section at the top of the exported document.
-* [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelTheme.html#Syncfusion_Blazor_Grids_ExcelTheme_Header): Applies background color to the column headers.
-* [Record](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelTheme.html#Syncfusion_Blazor_Grids_ExcelTheme_Record): Applies background color to the data rows.
-
-5. Set the theme to the Theme property of `ExcelExportProperties`.
-
-6. Invoke the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) to export the Grid with the applied background color.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Grids
-
-
-
-
-
-
-
-
-
-
-
-
-@code {
- private SfGrid Grid;
- public List Orders { get; set; }
- public string FileName { get; set; } = string.Empty;
-
- protected override void OnInitialized()
- {
- Orders = OrderData.GetAllRecords();
- }
-
- public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "Grid_excelexport")
- {
- ExcelExportProperties ExcelProperties = new ExcelExportProperties();
- ExcelTheme Theme = new ExcelTheme();
- ExcelStyle ThemeStyle = new ExcelStyle()
- {
- BackColor = "#C67878"
- };
- Theme.Header = ThemeStyle;
- Theme.Record = ThemeStyle;
- Theme.Caption = ThemeStyle;
- ExcelProperties.Theme = Theme;
- await Grid.ExportToExcelAsync(ExcelProperties);
- }
- }
-}
-
-{% 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 %}
-
-{% previewsample "https://blazorplayground.syncfusion.com/embed/htrSZTCifvHcgdTG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-## Add additional worksheets to Excel document while exporting
-
-The Syncfusion® Blazor DataGrid allows adding additional worksheets to the exported Excel or CSV document. This is useful for including supplementary information, summaries, or additional datasets alongside the Grid content.
-
-To add additional worksheets during export:
-
-1. Create a new instance of the **Workbook** class and assign it to the [Workbook](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Workbook) property of [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html).
-
-2. Use the **Worksheets.Add** method to append new worksheets to the workbook.
-
-3. Set the [GridSheetIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_GridSheetIndex) property to **0** to specify the worksheet index where the Grid data should be placed.
-
-4. Invoke the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) to export the Grid with the additional worksheets.
-
-Two extra blank worksheets are added along with the worksheet containing the Grid data in this configuration.
-
-{% tabs %}
-{% highlight razor tabtitle="Index.razor" %}
-
-@using Syncfusion.Blazor.Grids
-@using Syncfusion.ExcelExport
-
-
-
-
-
-
-
-
-
-
-
-
-@code {
- private SfGrid Grid;
- public List Orders { get; set; }
-
- protected override void OnInitialized()
- {
- Orders = OrderData.GetAllRecords();
- }
-
- public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
- {
- if (args.Item.Id == "Grid_excelexport")
- {
-
- ExcelExportProperties ExportProperties = new ExcelExportProperties();
- // Add a new workbook to the Excel document that contains only 1 worksheet.
- ExportProperties.Workbook = new Workbook();
- // Add additional worksheets.
- ExportProperties.Workbook.Worksheets.Add();
- ExportProperties.Workbook.Worksheets.Add();
- // Define the Gridsheet index where Grid data must be exported.
- ExportProperties.GridSheetIndex = 0;
- await Grid.ExportToExcelAsync(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)
- {
- 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/BtVytTCWguoXpvbV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
## Conditional cell formatting
The Syncfusion® Blazor DataGrid supports conditional formatting of cells in the exported Excel document. This feature enables customizing the appearance of specific cells based on values or defined criteria.
@@ -1142,7 +915,7 @@ To apply conditional formatting during export:
> The cell object can also be accessed using the [args.Cell.CellStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_ExcelHeaderQueryCellInfoEventArgs_Cell) property to apply styles conditionally.
-In this configuration, the **Freight** column is conditionally formatted in the exported Excel document based on its value using the `ExcelQueryCellInfoEvent` event. The [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_QueryCellInfo) event is used to apply similar styling to the Grid UI.
+In this configuration, the **Freight** column is conditionally formatted in the exported Excel document based on its value using the `ExcelQueryCellInfoEvent` event. The [QueryCellInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_QueryCellInfo) event is used to apply similar styling to the DataGrid UI.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1269,21 +1042,20 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLSZfiWAQxFziVz?appbar=true&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Adding header and footer in the exported Excel document
+## Adding header and footer in the exported Excel file
-The Excel or CSV export feature in Syncfusion® Blazor DataGrid supports including header and footer content in the exported Excel or CSV document. This feature is useful for adding additional information such as branding, contact details, or summary notes.
+Header and footer content support in Excel or CSV export enables including additional information or branding in the exported Excel or CSV document. This feature is particularly useful for adding titles, page numbers, or company information.
-To include header and footer content:
-
-1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
+1. To achieve this, use the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event along with defining the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Header) and [Footer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Footer) properties in the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) object, enabling customization of the header and footer content.
-2. Define the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Header) and [Footer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Footer) properties in the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) object.
* **Header:** Defines the header content for the exported document.
* **Footer:** Defines the footer content for the exported document.
-3. Assign the header and footer content using a collection of [ExcelRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelRow.html) and [ExcelCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelCell.html) objects.
+2. Assign the header and footer content using a collection of [ExcelRow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelRow.html) and [ExcelCell](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelCell.html) objects.
-4. Invoke [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) to export the Grid with the configured header and footer.
+3. Invoke [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) to export the DataGrid with the configured header and footer.
+
+The following example demonstrates adding a header and footer to the exported DataGrid:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1515,13 +1287,247 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVItTsCruFliZJm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Exporting Grid Data as Stream
+## Customizing the background color for a DataGrid in an exported Excel or CSV document
+
+The Syncfusion® Blazor DataGrid allows customizing the background color of DataGrid content such as header, record, and caption rows when exporting to Excel or CSV formats. This improves readability and enhances the visual appearance of exported files.
+
+To apply background color:
+
+1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
+
+2. Create an instance of [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html).
+
+3. Define an [ExcelTheme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelTheme.html) and set a custom [ExcelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelStyle.html) with the [BackColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelStyle.html#Syncfusion_Blazor_Grids_ExcelStyle_BackColor) property.
+
+4. Assign the style to the following properties of the theme:
+
+ * [Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelTheme.html#Syncfusion_Blazor_Grids_ExcelTheme_Caption): Applies background color to the caption section at the top of the exported document.
+ * [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelTheme.html#Syncfusion_Blazor_Grids_ExcelTheme_Header): Applies background color to the column headers.
+ * [Record](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelTheme.html#Syncfusion_Blazor_Grids_ExcelTheme_Record): Applies background color to the data rows.
+
+5. Set the theme to the Theme property of `ExcelExportProperties`.
+
+6. Invoke the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) to export the DataGrid with the applied background color.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfGrid Grid;
+ public List Orders { get; set; }
+ public string FileName { get; set; } = string.Empty;
+
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+
+ public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_excelexport")
+ {
+ ExcelExportProperties ExcelProperties = new ExcelExportProperties();
+ ExcelTheme Theme = new ExcelTheme();
+ ExcelStyle ThemeStyle = new ExcelStyle()
+ {
+ BackColor = "#C67878"
+ };
+ Theme.Header = ThemeStyle;
+ Theme.Record = ThemeStyle;
+ Theme.Caption = ThemeStyle;
+ ExcelProperties.Theme = Theme;
+ await Grid.ExportToExcelAsync(ExcelProperties);
+ }
+ }
+}
+
+{% 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 %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htrSZTCifvHcgdTG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+## Add additional worksheets to Excel document while exporting
+
+The Syncfusion® Blazor DataGrid allows adding additional worksheets to the exported Excel or CSV document. This is useful for including supplementary information, summaries, or additional datasets alongside the DataGrid content.
+
+To add additional worksheets during export:
+
+1. Create a new instance of the **Workbook** class and assign it to the [Workbook](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Workbook) property of [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html).
+
+2. Use the **Worksheets.Add** method to append new worksheets to the workbook.
+
+3. Set the [GridSheetIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_GridSheetIndex) property to **0** to specify the worksheet index where the DataGrid data should be placed.
+
+4. Invoke the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) to export the DataGrid with the additional worksheets.
+
+Two extra blank worksheets are added along with the worksheet containing the DataGrid data in this configuration.
+
+{% tabs %}
+{% highlight razor tabtitle="Index.razor" %}
+
+@using Syncfusion.Blazor.Grids
+@using Syncfusion.ExcelExport
+
+
+
+
+
+
+
+
+
+
+
+
+@code {
+ private SfGrid Grid;
+ public List Orders { get; set; }
+
+ protected override void OnInitialized()
+ {
+ Orders = OrderData.GetAllRecords();
+ }
+
+ public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
+ {
+ if (args.Item.Id == "Grid_excelexport")
+ {
+
+ ExcelExportProperties ExportProperties = new ExcelExportProperties();
+ // Add a new workbook to the Excel document that contains only 1 worksheet.
+ ExportProperties.Workbook = new Workbook();
+ // Add additional worksheets.
+ ExportProperties.Workbook.Worksheets.Add();
+ ExportProperties.Workbook.Worksheets.Add();
+ // Define the Gridsheet index where Grid data must be exported.
+ ExportProperties.GridSheetIndex = 0;
+ await Grid.ExportToExcelAsync(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)
+ {
+ 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/BtVytTCWguoXpvbV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+
+## Exporting DataGrid Data as Stream
-The Syncfusion® Blazor DataGrid supports exporting Grid data as a memory stream, enabling programmatic handling before saving or processing. This includes exporting Grid data as a memory stream, merging multiple memory streams, and converting the memory stream to a file stream for download.
+The Syncfusion® Blazor DataGrid supports exporting DataGrid data as a memory stream, enabling programmatic handling before saving or processing. This includes exporting DataGrid data as a memory stream, merging multiple memory streams, and converting the memory stream to a file stream for download.
-### Exporting Grid Data as Memory Stream
+### Exporting DataGrid Data as Memory Stream
-The export-to-memory-stream feature enables exporting Grid data to a memory stream instead of saving it directly to a file. This approach is useful for generating and serving the file directly to the client without storing it on the server.
+The export-to-memory-stream feature enables exporting DataGrid data to a memory stream instead of saving it directly to a file. This approach is useful for generating and serving the file directly to the client without storing it on the server.
To export as a memory stream:
@@ -1591,8 +1597,8 @@ Include the script reference in the application:
{% endhighlight %}
{% endtabs %}
-**Step 3: Export Grid data as memory stream and invoke the JavaScript function**
-In the **Index.razor** file, configure the Grid and handle the export operation in the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event. Use the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_System_Boolean_Syncfusion_Blazor_Grids_ExcelExportProperties_) method with the `asMemoryStream` parameter set to **true**, and invoke the `saveAsFile` JavaScript function to download the exported Excel file.
+**Step 3: Export DataGrid data as memory stream and invoke the JavaScript function**
+In the **Index.razor** file, configure the Grid and handle the export operation in the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event. Use the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_System_Boolean_Syncfusion_Blazor_Grids_ExcelExportProperties_) method with the `asMemoryStream` parameter set to **true**, and invoke the `saveAsFile` JavaScript function to download the exported Excel document.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1784,7 +1790,7 @@ function saveAsFile(filename, bytesBase64) {
### Converting Memory Stream to File Stream for Excel Export
-The Excel Export feature in Syncfusion® Blazor DataGrid allows exporting Grid data to an Excel workbook. In scenarios where the exported document needs to be saved as a physical file on the system, the memory stream can be converted into a file stream. This is useful when storing or processing the file outside the browser context.
+The Excel Export feature in Syncfusion® Blazor DataGrid allows exporting DataGrid data to an Excel workbook. In scenarios where the exported document needs to be saved as a physical file on the system, the memory stream can be converted into a file stream. This is useful when storing or processing the file outside the browser context.
To save the exported Excel file locally:
@@ -1904,8 +1910,8 @@ To merge two Excel memory streams and export the combined file as a single Excel
In this configuration, two memory streams are used:
-- **streamDoc1:** Represents the default Grid export.
-- **streamDoc2:** Represents a customized Grid export using [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html).
+- **streamDoc1:** Represents the default DataGrid export.
+- **streamDoc2:** Represents a customized DataGrid export using [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html).
The merging process combines the contents of both streams into a single workbook, which is then exported as a memory stream and downloaded via JavaScript interop.
{% tabs %}
diff --git a/blazor/datagrid/excel-exporting.md b/blazor/datagrid/excel-exporting.md
index f5b98dec0a..01be56bb73 100644
--- a/blazor/datagrid/excel-exporting.md
+++ b/blazor/datagrid/excel-exporting.md
@@ -7,15 +7,19 @@ control: DataGrid
documentation: ug
---
-# Excel exporting in Blazor DataGrid
+# Excel Export in Blazor DataGrid
-The Excel and CSV exporting feature in the Syncfusion® Blazor DataGrid enables exporting Grid data to spreadsheet formats for external analysis or sharing.
+The Excel export feature in the Blazor DataGrid enables exporting DataGrid data to Excel or CSV documents. This capability is helpful when sharing or analyzing data in spreadsheet format is required.
-To enable Excel export, set the [AllowExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowExcelExport) property to **true**. This property activates the export functionality in the Grid.
+## Enable Excel export
-To initiate Excel export, use the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method. This method exports the Grid data to an Excel document.
+Excel export configuration in the DataGrid requires the following setup:
-To initiate CSV export, use the [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_System_Boolean_Syncfusion_Blazor_Grids_ExcelExportProperties_) method. This method exports the Grid data to a CSV document.
+**Enable export**: Set the [AllowExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowExcelExport) property to `true`. This property activates the Excel and CSV export options in the DataGrid.
+
+**Trigger export**: Use the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method to export DataGrid data to an Excel document. For CSV export, use the [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_System_Boolean_Syncfusion_Blazor_Grids_ExcelExportProperties_) method instead.
+
+The following example demonstrates performing the Excel export action in the DataGrid by adding the `ExcelExport` item to the DataGrid [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) and invoking the `ExportToExcelAsync` method inside the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -107,9 +111,9 @@ public class OrderData
## Show spinner while exporting
-Displaying a spinner during export operations in the Syncfusion® Blazor DataGrid provides a visual indication of progress and improves export feedback.
+Showing a spinner during the export operation enhances usability by giving a clear visual indicator of progress, helping to understand that the export is actively processing.
-To show a spinner during export:
+To show and hide spinner during export:
1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
2. Call [ShowSpinnerAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowSpinnerAsync) before invoking export to display the spinner.
@@ -206,16 +210,13 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLetTiMCmRvgSSs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Binding custom data source while exporting
+## Bind custom data source while exporting
-The Syncfusion® Blazor DataGrid supports exporting data to Excel or CSV format using a custom data source. This capability allows exporting data that is not directly bound to the Grid, including data generated or retrieved dynamically.
+The DataGrid provides a convenient way to export data to Excel or CSV format. With the Excel or CSV export feature, a custom data source can be defined while exporting. This allows exporting data that is not necessarily bound to the DataGrid, which can be generated or retrieved based on application logic.
-To export using a custom data source:
+To export data, define the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_DataSource) property within the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) object. This property represents the data source that will be used for the Excel or CSV export.
-1. Create a custom data collection to be exported.
-2. Define the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_DataSource) property within an [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) object.
-3. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
-4. Pass the `ExcelExportProperties` object to the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method.
+The following example demonstrates rendering custom dataSource during Excel export. By calling the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method and passing the `ExcelExportProperties` object through the DataGrid instance, the DataGrid data will be exported to Excel using the dynamically defined data source:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -306,17 +307,15 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhotfhJUHIXUNlC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Exporting with custom aggregate
+## Export with custom aggregate
+
+Exporting Syncfusion® Blazor DataGrid data with custom aggregates allows including additional calculated values in the exported file based on specific requirements. This feature is helpful for providing a comprehensive view of the data in the exported file, incorporating specific aggregated information for analysis or reporting purposes.
-Exporting Syncfusion® Blazor DataGrid data with custom aggregates enables inclusion of calculated values in the exported file based on specific conditions. This feature supports enhanced reporting and analysis by incorporating tailored aggregate information.
-To export with a custom aggregate:
+In order to utilize custom aggregation, specify the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) property as `Custom` and provide the custom aggregate function in the [CustomAggregate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_CustomAggregate) property.
-1. Set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) property of the aggregate column to **Custom**.
-2. Assign a function to the `CustomAggregate` property to calculate the required value.
-3. Display the calculated value in the Grid using a [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_FooterTemplate).
-4. Handle the [ExcelAggregateTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelAggregateTemplateInfo) event.
-5. Assign the calculated value to **args.Cell.Value** inside the event handler to include it in the exported Excel file.
-6. Trigger export using the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method.
+Within the `CustomAggregate` function, the argument contains the data that has a result property. The function calculates the count of objects in this data where the "Ship Country" field value is equal to "Brazil" and returns the count with a descriptive label.
+
+The following example shows exporting the DataGrid with a custom aggregate that shows the calculation of the "Brazil" count of the "Ship Country" column:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -429,16 +428,13 @@ public class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/BtretpMNVVBLBlTI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Exporting with custom date format
+## Export with custom date format
-The exporting functionality in the Syncfusion® Blazor DataGrid enables exporting Grid data with customized date formats. This capability is useful for generating reports or documents that require specific date representations.
+The exporting functionality in the Syncfusion® Blazor DataGrid allows exporting grid data, including custom date format. This feature is useful when exporting grid data with customized date values is needed.
-To export with a custom date format:
+To apply a custom date format to grid columns during the export, utilize the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property. This property allows defining a custom format using format options.
-1. Apply the desired format string to the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Format) property of the date column.
-2. Set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Type) property of the column to [ColumnType.Date](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ColumnType.html#Syncfusion_Blazor_Grids_ColumnType_Date).
-3. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
-4. Call [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) to export the Grid with the applied date format.
+The following example demonstrates exporting the grid with custom date format. In the example, the "formatOptions" object is set to the `Format` property for the "Order Date" 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, May 8, '23):
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -525,15 +521,11 @@ public class OrderData
## Passing additional parameters to the server when exporting
-Passing additional parameters to the server during data export in the Syncfusion® Blazor DataGrid provides flexibility to include extra information or customize the export process based on specific requirements.
+Passing additional parameters to the server when exporting data in the Syncfusion® Blazor DataGrid involves providing flexibility to include extra information or customize the export process based on specific requirements.
-To pass additional parameters during export:
+This can be achieved by utilizing the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property and the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event. Within the `Query` property, the `AddParams` method can be invoked to add parameters to the request.
-1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
-2. Use the [Query](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html) property of the Grid to define a new query.
-3. Call the [AddParams](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_AddParams_System_String_System_Object_) method to append custom parameters to the query.
-4. Invoke [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) to initiate export.
-5. 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 original query state after export.
+The following example demonstrates how to pass additional parameters to the server when Excel exporting within the `OnToolbarClick` event. Within the event, the additional parameters, specifically "recordcount" as 15, are passed using the `AddParams` method and displayed as a message:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
diff --git a/blazor/datagrid/pdf-export-options.md b/blazor/datagrid/pdf-export-options.md
index fd956d75fc..e857f6f237 100644
--- a/blazor/datagrid/pdf-export-options.md
+++ b/blazor/datagrid/pdf-export-options.md
@@ -9,7 +9,9 @@ documentation: ug
# PDF export options in Blazor DataGrid
-The Syncfusion® Blazor DataGrid supports extensive PDF export customization to control content and layout for reporting requirements. The export behavior is configured using the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class. This configuration enables:
+The Syncfusion® Blazor DataGrid provides the ability to customize PDF export options. This flexibility enables greater control over the exported content and layout to meet specific requirements.
+
+The PDF export action can be customized using the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class. The `PdfExportProperties` class enables exporting current page records, selected records, or filtered records. Additionally, page alignments can be customized using the `PdfExportProperties` class. This configuration enables:
* Exporting current, selected, or filtered rows.
* Including or excluding hidden columns.
@@ -19,13 +21,14 @@ The Syncfusion® Blazor DataGrid supports ex
## Export current page records
-Exporting the current page records from the Syncfusion® Blazor DataGrid generates a PDF document that includes only the rows currently visible in the grid. This approach is useful for capturing a snapshot of the paginated view rather than exporting the entire dataset.
+Exporting the current page records from the Syncfusion® Blazor DataGrid to a PDF document provides the ability to export the currently displayed page records. This feature allows generating a PDF document that specifically includes the content from the current page of the DataGrid.
To configure this behavior:
1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
2. Invoke 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.
-3. Set the [ExportType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_ExportType) property in the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) object.
+3. Set the [ExportType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_ExportType) property in the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) to `CurrentPage`.
+.
The available options include:
@@ -132,15 +135,16 @@ public class EmployeeData
## Export selected records
-Exporting selected records from the Syncfusion® Blazor DataGrid enables generating a PDF document that includes only specific rows. This approach supports focused exports based on selection.
+Exporting selected records from the Syncfusion® Blazor DataGrid enables generating a PDF document that includes only the desired rows. This feature provides the flexibility to export a specific subset of data based on selection.
-To export selected records:
+To export the selected records from the DataGrid to a PDF document, 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.
-2. Retrieve the selected records using [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRecordsAsync).
+2. Retrieve the selected records using [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRecordsAsync) method.
3. Assign the selected data to [PdfExportProperties.DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_DataSource).
4. Invoke 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
@@ -228,7 +232,9 @@ public class OrderData
## Export filtered records
-Exporting filtered records from the Syncfusion® Blazor DataGrid generates a PDF document that includes only rows matching the active filter criteria. This approach is useful for exporting refined data views.
+Exporting filtered records from the Syncfusion® Blazor DataGrid enables generating a PDF document that includes only the rows matching the applied filters. This feature is useful for exporting a subset of data that adheres to the selected criteria.
+
+This can be achieved by defining the filtered data in the [ExportProperties.DataSource](https://ej2.syncfusion.com/react/documentation/api/grid/excelExportProperties#datasource) property before initiating the export.
To export filtered records:
@@ -323,15 +329,15 @@ public class OrderData
## Export with hidden columns
-Exporting hidden columns from the Syncfusion® Blazor DataGrid allows including columns that are not visible in the UI but are required in the exported PDF document. This approach ensures complete data representation even when certain columns are hidden for display purposes.
+Exporting hidden columns in the Syncfusion® Blazor DataGrid enables including hidden columns in the exported PDF document. This feature is useful when columns are hidden in the UI but still need to be included in the exported document.
To include hidden columns during export:
1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
-2. Set the [IncludeHiddenColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_IncludeHiddenColumn) property to **true** in the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) object.
+2. Set the [IncludeHiddenColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_IncludeHiddenColumn) property to **true** in the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class.
3. Invoke 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 configuration, the **ShipCity** column is hidden in the Grid and included in the exported PDF file when` PdfExportProperties.IncludeHiddenColumn` is enabled.
+The following example demonstrates exporting hidden columns to a PDF document. In this example, the "Ship City" column, which is not visible in the UI, is exported to the PDF document. The DataGrid can be exported by changing the `pdfExportProperties.IncludeHiddenColumn` property based on the switch toggle using the `checked` property of the [Toggle Switch Button](https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started-webapp).
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -432,7 +438,7 @@ public class OrderData
## Show or hide columns while exporting
-The Syncfusion® Blazor DataGrid allows dynamically **showing** or **hiding** columns during PDF export based on specific requirements. This approach is useful when certain columns should appear only in the exported document.
+The Syncfusion® Blazor DataGrid provides the functionality to show or hide columns dynamically during the export process. This feature enables selective display or hiding of specific columns based on requirements.
To show or hide columns during export:
@@ -540,19 +546,21 @@ public class OrderData
## Change page orientation
-The Syncfusion® Blazor DataGrid supports changing the PDF [page orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PageOrientation.html) to fit different layouts. This feature is useful for exporting wide datasets that require more horizontal space.
+The Syncfusion® Blazor DataGrid provides the ability 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 according to specific needs.
**Supported options for PageOrientation**:
-* **Portrait** – Sets the PDF page orientation to portrait. This is the default layout and is suitable for grids with fewer columns.
-* **Landscape** – Sets the PDF page orientation to landscape. This option is ideal for wide grids with multiple columns.
+* **Portrait** – Sets the PDF page orientation to portrait. This is the default layout and is suitable for DataGrids with fewer columns.
+* **Landscape** – Sets the PDF page orientation to landscape. This option is ideal for wide DataGrids with many columns.
To change the page orientation:
1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
-2. Set the [PageOrientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_PageOrientation) property in the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) object to `PageOrientation.Landscape` or `PageOrientation.Portrait`.
+2. Set the [PageOrientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_PageOrientation) property in the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class to `PageOrientation.Landscape` or `PageOrientation.Portrait`.
3. Invoke 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 exporting the DataGrid into PDF document by setting the `PdfExportProperties.PageOrientation` property using the `value` property of the `SfDropDownList`.
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
@@ -665,7 +673,7 @@ public class OrderData
## Change page size
-The Syncfusion® Blazor DataGrid allows customizing the page size of the exported PDF document to fit different paper formats or printing requirements.
+The Syncfusion® Blazor DataGrid provides the ability to customize the page size of the exported PDF document according to requirements. This feature provides the flexibility to adjust the layout and dimensions of the exported PDF to fit different paper sizes or printing needs.
**Supported options for PdfPageSize**:
@@ -701,7 +709,7 @@ The Syncfusion® Blazor DataGrid allows cust
To configure page size:
1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
-2. Set the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_PageSize) property in the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) object to a value from the [PdfPageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfPageSize.html#fields) enumeration.
+2. Set the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_PageSize) property in the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class to a value from the [PdfPageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfPageSize.html#fields) enumeration.
3. Invoke 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 %}
@@ -832,13 +840,11 @@ public class OrderData
## Define file name
-The Syncfusion® Blazor DataGrid allows specifying a custom file name for the exported PDF document. This feature is useful for generating reports with meaningful names.
+The Syncfusion® Blazor DataGrid provides the ability to specify a custom file name for the exported PDF document. This feature enables providing a meaningful and descriptive name for the exported file, making it easier to identify and manage the exported data.
-To configure a custom file name:
+To assign a custom file name for the exported document, set the [FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_FileName) property of the [PdfExportProperties](https://ej2.syncfusion.com/react/documentation/api/grid/pdfExportProperties) class to the desired file name.(e.g., **Report.pdf**).
-1. Handle the OnToolbarClick event.
-2. Set the [FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportPropertiesBase.html#Syncfusion_Blazor_Grids_PdfExportPropertiesBase_FileName) property in the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) object to the desired name (e.g., **Report.pdf**).
-3. Invoke 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 defining 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" %}
@@ -921,13 +927,11 @@ public class OrderDetails
## Enabling horizontal overflow
-The Syncfusion® Blazor DataGrid supports enabling horizontal overflow during PDF export to display all columns on a single page, even when the number of columns exceeds the default width. This feature is useful for exporting wide grids without column wrapping.
+The Syncfusion® Blazor DataGrid provides the ability to display all defined DataGrid 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 the exported PDF maintains its readability and comprehensiveness.
-To configure horizontal overflow:
+This can be achieved by utilizing the [PdfExportProperties.AllowHorizontalOverflow](https://ej2.syncfusion.com/react/documentation/api/grid/pdfExportProperties#allowhorizontaloverflow) property of the DataGrid.
-1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
-2. Set the [AllowHorizontalOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_AllowHorizontalOverflow) property in the [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) object to true.
-3. Invoke 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 the following example, the [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" %}
@@ -1032,14 +1036,16 @@ public class OrderData
## Customizing columns on export
-The Syncfusion® Blazor DataGrid allows customizing which columns appear in the exported PDF file. This helps adjust column headers, alignment, and formatting based on export requirements.
+The Syncfusion® Blazor DataGrid provides the ability to customize the appearance of DataGrid columns in exported PDF documents. This feature enables tailoring specific column attributes such as field, header text, and text alignment, ensuring that exported PDFs align perfectly with design and reporting requirements.
-To customize columns during PDF export:
+To customize the DataGrid columns, 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.
2. Create a list of [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#) objects with the required [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field), [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_HeaderText), and [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_TextAlign) values.
3. Assign the list to the [PdfExportProperties.Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Columns) property 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 to apply the column customizations during export.
+The following example demonstrates customizing the DataGrid columns when exporting a document. In this scenario, the attributes for different columns have been customized: "Order ID" with `textAlign` set to `Left`, "Customer ID" with `headerText` as "Customer Name", and "Freight" with `textAlign` set to `Center`.
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1133,7 +1139,7 @@ public class OrderData
### Customize column width in exported PDF document
-The Syncfusion® Blazor DataGrid provides an option to define custom column widths during PDF export. This is achieved by setting the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property for each column in the [PdfExportProperties.Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Columns) collection and enabling [DisableAutoFitWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_DisableAutoFitWidth).
+The Syncfusion® Blazor DataGrid provides an option to define custom column widths during PDF export. This can be done by setting the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Width) property for each column in the [PdfExportProperties.Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Columns) collection and enabling [DisableAutoFitWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_DisableAutoFitWidth).
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1218,11 +1224,11 @@ public class OrderData
## Font and color customization
-The Syncfusion® Blazor DataGrid supports applying font and color styles to the exported PDF document. This helps maintain a consistent and readable appearance for exported data.
+The Syncfusion® Blazor DataGrid provides the ability to customize the font in the exported PDF document. This feature enables controlling the appearance and styling of the text in the exported file, ensuring consistency with the application's design.
To apply styling:
-1. Define the [Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Theme) property in [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html).
+1. Define the [Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Theme) property in [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) class.
2. Set font styles for the [Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfTheme.html#Syncfusion_Blazor_Grids_PdfTheme_Caption), [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfTheme.html#Syncfusion_Blazor_Grids_PdfTheme_Header), and [Record](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfTheme.html#Syncfusion_Blazor_Grids_PdfTheme_Record) sections using the [PdfThemeStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfThemeStyle.html) class.
3. Pass the theme configuration 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 in the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
@@ -1230,15 +1236,15 @@ To apply styling:
* **Caption**
-Applies styling to the caption section in the exported PDF document. The caption is typically a title or description shown at the top of the PDF.
+Applies styling to the caption section in the exported PDF document. The caption is typically a title or description shown at the top of the PDF document.
* **Header**
-Applies styling to the column headers in the exported PDF document. These headers match the column titles shown in the Grid.
+Applies styling to the column headers in the exported PDF document. These headers match the column titles shown in the DataGrid.
* **Record**
-Applies styling to the data rows in the exported PDF document. These rows contain the actual values from the Grid.
+Applies styling to the data rows in the exported PDF document. These rows contain the actual values from the DataGrid.
N> By default, **Material** theme is applied to the exported PDF document.
@@ -1376,14 +1382,16 @@ public class OrderData
### Add custom font
-The Syncfusion® Blazor DataGrid supports embedding a custom font in the exported PDF document for **captions**, **headers**, and **record** content. This is useful for branding or applying unique typography.
+In addition to changing the default font, the Syncfusion® Blazor DataGrid provides the ability to use a custom font for the DataGrid header, content, and caption cells in the exported PDF document. This can be achieved by utilizing the [PdfExportProperties.Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Theme) property.
+
+When using a custom font, it is 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.
**Steps to configure**
1. Encode the font file as a **Base64 string**.
2. Assign the **Base64 string** to [PdfGridFont.FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfGridFont.html).
3. Define **font** **size**, **color**, and **style** using [PdfThemeStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfThemeStyle.html).
-4. Pass the [theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Theme) configuration to [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_).
+4. Pass the [Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_Theme) configuration to [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_).
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1667,15 +1675,15 @@ public class OrderData
## Exporting Blazor DataGrid data as stream
-The Syncfusion® Blazor DataGrid supports exporting Grid data as a memory stream for PDF export, enabling programmatic handling before saving or processing. This includes:
+The Syncfusion® Blazor DataGrid supports exporting DataGrid data as a memory stream for PDF export, enabling programmatic handling before saving or processing. This includes:
-* Exporting Grid data as a memory stream.
+* Exporting DataGrid data as a memory stream.
* Converting the memory stream to a file stream for saving.
* Merging multiple memory streams into a single PDF document.
### Exporting Blazor DataGrid data as memory stream
-The export-to-memory-stream feature allows exporting Grid data to a memory stream instead of saving it directly to a file. This approach is useful for generating and serving the file directly to the client without storing it on the server.
+The export-to-memory-stream feature allows exporting DataGrid data to a memory stream instead of saving it directly to a file. This approach is useful for generating and serving the file directly to the client without storing it on the server.
**Steps to configure**:
@@ -1742,7 +1750,7 @@ Include the script reference in the application:
**Step 3: Invoke the JavaScript function to perform the browser download using the memory stream**
-In the **Index.razor** file, configure the Grid, trigger the export operation, and call the **saveAsFile** function:
+In the **Index.razor** file, configure the DataGrid, trigger the export operation, and call the **saveAsFile** function:
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -1839,7 +1847,7 @@ public class OrderData
The Syncfusion® Blazor DataGrid supports converting a memory stream obtained from PDF export into a file stream for saving the document to a specified location. This approach is suitable for server-side scenarios that require persisting the exported file.
-To save the exported PDF file locally:
+To save the exported PDF document locally:
1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
2. Invoke [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_System_Boolean_Syncfusion_Blazor_Grids_PdfExportProperties_) method with the `asMemoryStream` parameter set to **true**.
@@ -1946,12 +1954,12 @@ To save the exported PDF file locally:
### Merging two PDF memory streams
-The Syncfusion® Blazor DataGrid supports merging multiple PDF memory streams into a single document by using the [Merge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.PdfDocumentBase.html#Syncfusion_Pdf_PdfDocumentBase_Merge_Syncfusion_Pdf_PdfDocumentBase_Syncfusion_Pdf_Parsing_PdfLoadedDocument_) from [PdfDocumentBase](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.PdfDocumentBase.html) class. This functionality enables combining content from different exports into one consolidated PDF file, use the [Syncfusion.Pdf](https://www.nuget.org/packages/Syncfusion.Pdf.Net.Core) library to merge streams into a single document.
+The Syncfusion® Blazor DataGrid supports merging multiple PDF memory streams into a single document by using the [Merge](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.PdfDocumentBase.html#Syncfusion_Pdf_PdfDocumentBase_Merge_Syncfusion_Pdf_PdfDocumentBase_Syncfusion_Pdf_Parsing_PdfLoadedDocument_) from [PdfDocumentBase](https://help.syncfusion.com/cr/document-processing/Syncfusion.Pdf.PdfDocumentBase.html) class. This functionality enables combining content from different exports into one consolidated PDF document, use the [Syncfusion.Pdf](https://www.nuget.org/packages/Syncfusion.Pdf.Net.Core) library to merge streams into a single document.
In this configuration, two memory streams are used:
-* **streamDoc1**: Represents the default Grid export.
-* **streamDoc2**: Represents a customized Grid export using [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html).
+* **streamDoc1**: Represents the default DataGrid export.
+* **streamDoc2**: Represents a customized DataGrid export using [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html).
The merging process combines the contents of both streams into a single PDF document, which is then exported as a memory stream and downloaded via JavaScript interop.
diff --git a/blazor/datagrid/pdf-export.md b/blazor/datagrid/pdf-export.md
index 06cf81d662..3a88d74793 100644
--- a/blazor/datagrid/pdf-export.md
+++ b/blazor/datagrid/pdf-export.md
@@ -9,11 +9,9 @@ documentation: ug
# PDF export in Blazor DataGrid
-The Syncfusion® Blazor DataGrid provides a built-in feature to export grid data to a **PDF document**. This functionality is useful for generating printable reports or sharing data in a standardized format.
-To enable PDF export:
+The PDF export feature in the Syncfusion® Blazor DataGrid exporting grid data to a PDF document, providing the ability to generate printable reports or share data in a standardized format.
-* Set the [AllowPdfExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowPdfExport) property to **true**.
-* Call 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 to perform the export.
+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) 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.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -94,13 +92,13 @@ public class OrderDetails
## Show spinner while exporting
-The Syncfusion® Blazor DataGrid supports displaying a spinner during PDF export to indicate that the operation is in progress. This improves the experience by providing visual feedback while the export is being processed.
+Displaying a spinner while exporting in the Syncfusion® Blazor DataGrid enhances the experience by providing visual indication during the export process. This indicates the export progress and prevents confusion about operation status.
-To show and hide the spinner:
+To show or hide a spinner while exporting the DataGrid, use the [ShowSpinnerAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowSpinnerAsync) and [HideSpinnerAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideSpinnerAsync) methods within the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
-1. Call [ShowSpinnerAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ShowSpinnerAsync) before starting the export.
-2. Call [HideSpinnerAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_HideSpinnerAsync) after the export completes.
-3. Use the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event to trigger the export and the [ExportComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExportComplete) event to hide the spinner.
+The `OnToolbarClick` event triggers when a toolbar item in the DataGrid is clicked. Within the event handler, verify if the clicked "item" relates to PDF export by checking for the `Grid_pdfexport` identifier. When matched, call the `ShowSpinnerAsync` method on the DataGrid instance.
+
+To hide the spinner after export completes, bind the [ExportComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExportComplete) event and call the `HideSpinnerAsync` method on the DataGrid instance.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -188,13 +186,11 @@ public class OrderDetails
## Binding custom data source while exporting
-The Syncfusion® Blazor DataGrid supports exporting to PDF using a custom data source. This feature allows exporting data that is not currently bound to the grid and can be generated dynamically based on application logic.
+The PDF export feature provides an option to define a custom data source during export. This enables exporting data not bound to the DataGrid, which can be generated or retrieved based on application logic.
-To use a custom data source during export:
+To export data, 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 specifies the data source for PDF export.
-1. Create a [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) instance.
-2. Assign the custom collection to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_DataSource) property.
-3. Call [ExportToPdfAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToPdfAsync_Syncfusion_Blazor_Grids_PdfExportProperties_) with the configured `PdfExportProperties`.
+The following example demonstrates rendering a 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 with the `PdfExportProperties` object through the DataGrid instance, the data exports to PDF using the dynamically defined data source.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -330,15 +326,17 @@ public class ChangeData
{% previewsample "https://blazorplayground.syncfusion.com/embed/VXryXfDOqaghyKye?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+> Make sure to utilize the [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Field) property that is declared in the DataGrid columns when modifying the data source for exporting.
+
## Exporting with custom aggregate
-The Syncfusion® Blazor DataGrid supports exporting grid data with custom aggregates. This feature enables including calculated values in the exported PDF, providing a comprehensive view for reporting or analysis.
+Custom aggregates in the Syncfusion® Blazor DataGrid export DataGrid data with additional calculated values based on specific requirements. This feature displays a comprehensive data view in the exported file by incorporating aggregated information needed for analysis or reporting purposes.
-To apply a custom aggregate during export:
+To utilize custom aggregation, specify the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) property as `Custom` and provide the `customAggregate` function in the [CustomAggregate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_CustomAggregate) property. Use the [PdfAggregateTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfAggregateTemplateInfo) event to inject the calculated result into the exported PDF.
-1. Set the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridAggregateColumn.html#Syncfusion_Blazor_Grids_GridAggregateColumn_Type) property to Custom in the aggregate column.
-2. Implement a custom function to calculate the required value.
-3. Use the [PdfAggregateTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfAggregateTemplateInfo) event to inject the calculated result into the exported PDF.
+Within the `CustomAggregateFunction` function, receive input data containing a `result` property. The function calculates the count of objects where the **"Ship Country"** field equals **"Brazil"** and returns the count with a descriptive label.
+
+The following example shows exporting the DataGrid with a custom aggregate that calculates the "Brazil" count in the "Ship Country" column.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -459,6 +457,8 @@ To apply a custom date format:
2. Specify a valid .NET date format string to define the desired output.
3. Invoke 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 within 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 a PDF document.
+The following example demonstrates exporting Grid data with a custom date format. In this example, the formatOptions object is used as the `Format` property for the **"Order Date"** 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., Thu, Jul 4, '96).
+
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -558,7 +558,7 @@ The Syncfusion® Blazor DataGrid allows pass
To pass additional parameters:
-1. Use the `Query` property of the grid.
+1. Use the `Query` property of the DataGrid.
2. Call [AddParams](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_AddParams_System_String_System_Object_) to append custom parameters.
3. Invoke 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 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 a PDF document.
4. Use the [ExportComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExportComplete) event to reset the query after export.
diff --git a/blazor/datagrid/print.md b/blazor/datagrid/print.md
index 53b90536d2..3527930d45 100644
--- a/blazor/datagrid/print.md
+++ b/blazor/datagrid/print.md
@@ -11,9 +11,9 @@ documentation: ug
# Print in Blazor DataGrid
-The **Print** feature in the Syncfusion® Blazor DataGrid generates a print-ready view of DataGrid content for offline access and documentation. Initiate printing through the built-in toolbar option or programmatically using the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method. The output reflects the DataGrid’s current state, including visible columns, sorting, and filtering, and opens the browser’s print dialog.
+The **Print** feature in Syncfusion® Blazor DataGrid generates a printable representation of the DataGrid for offline access or documentation. Enable printing via the DataGrid’s toolbar option or by calling the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method.
-To enable printing from the toolbar, add the **"Print"** item to the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property.
+Enable printing in the DataGrid by configuring the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property and adding `Print` to the list of toolbar items. This displays a `Print` button on the toolbar, and clicking it triggers the DataGrid’s printing functionality.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@@ -80,16 +80,16 @@ internal sealed class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLoiXMfUGltKtYZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Page Setup for Printing
+## Page setup
-Print layout options such as **paper size**, **margins**, **headers** and **footers**, and **scaling** are controlled by the browser’s print dialog. These settings cannot be configured through **application code**. Refer to browser-specific setup guides:
+Some print options (layout, paper size, margins) cannot be set via application code; use the browser’s print or page setup dialog instead. Below are links to page setup and printing guides for the most common browsers.
* [Chrome](https://support.google.com/chrome/answer/1069693?hl=en)
* [Firefox](https://support.mozilla.org/en-US/kb/how-print-web-pages-firefox)
* [Safari](https://www.mintprintables.com/print-tips/adjust-margins-osx/)
* [Internet Explorer](https://www.helpteaching.com/blog/) (legacy)
-## Print via programmatically
+## Print by external button
Printing can be triggered from external UI elements by calling the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method programmatically. This opens the browser’s print dialog and reflects the current state of the DataGrid, including visible columns, sorting, and filtering.
@@ -168,7 +168,7 @@ internal sealed class OrderData
{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVyCZsJTDndUnwJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-## Print only the visible page
+## Print visible page
The Syncfusion® Blazor DataGrid prints all pages in the dataset by default. To print only the currently visible page, set the [PrintMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PrintMode.html) property to **CurrentPage**.This configuration applies when printing is triggered using the built-in toolbar or programmatically through the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method.
@@ -354,15 +354,14 @@ This is demonstrated in the below sample code,
The following image represents Hierarchial Grid with print toolbar item,
 -->
-## Printing large number of Columns
+## Print large number of columns
-When printing a Syncfusion® Blazor DataGrid that contains a large number of columns, the default page size used by the browser (such as A4) may not have enough space to display all columns. As a result, some columns may be hidden in the print preview or printed output.
-To include more columns in the printable area:
+When printing a DataGrid with a large number of columns, the browser's default page size (usually A4) might not be sufficient to display all the columns properly. As a result, the browser's print preview may automatically hide the overflowed content, leading to a cut-off appearance.
- Switch to **landscape orientation** in the browser’s print dialog.
- Adjust the **scale setting** to reduce content size, fitting more columns on the page.
-These adjustments ensure visibility of all columns for wide grids.
+These adjustments ensure visibility of all columns for wide DataGrids.
@@ -432,7 +431,7 @@ In the below example, we have **CustomerID** as a hidden column in the datagrid.
}
``` -->
-## Limitations of printing large data
+## Optimized Approaches for Printing Full Data Sets
Printing a large volume of data in a single page may cause performance issues in the browser. Rendering many rows and columns at once can slow down the page or make it unresponsive.
diff --git a/blazor/datagrid/template-pdf-export.md b/blazor/datagrid/template-pdf-export.md
index 61ce4eef5c..4108ba24a8 100644
--- a/blazor/datagrid/template-pdf-export.md
+++ b/blazor/datagrid/template-pdf-export.md
@@ -7,38 +7,44 @@ control: DataGrid
documentation: ug
---
-# Exporting Blazor DataGrid with templates
+# Exporting with Templates
-The Syncfusion® Blazor DataGrid supports exporting template content to a PDF document, enabling rich formatting in exported files. The following template types are supported:
+The Syncfusion® Blazor DataGrid offers powerful export capabilities that preserve column, detail, and caption templates in Excel documents. Templates enable rich content rendering including images, hyperlinks, and customized text. Column templates customize individual cell content, detail templates display nested hierarchical data, and caption templates customize group headers for enhanced presentation.
+
+The following template types are supported:
* [Column Template](https://blazor.syncfusion.com/documentation/datagrid/column-template): Custom cell content such as formatted text, images, or hyperlinks.
* [Caption Template](https://blazor.syncfusion.com/documentation/datagrid/caption-template): Group caption rows with customized display elements.
* [Detail Template](https://blazor.syncfusion.com/documentation/datagrid/detail-template): Expanded row content that can include nested data or custom layouts.
-These templates are preserved during PDF export, allowing the resulting document to reflect the visual and structural formatting defined in the DataGrid.
-
-{% youtube "youtube:https://www.youtube.com/watch?v=-cjoxysUWcg"%}
+These templates are preserved during export, allowing the resulting Excel file to reflect the visual and structural formatting defined in the DataGrid.
## Exporting with column template
-The Syncfusion® Blazor DataGrid supports exporting columns that use templates to a PDF document. Template columns can include **images**, **hyperlinks**, and **custom text**.
+Column template export enables DataGrid columns with complex content including images, hyperlinks, and custom text to be seamlessly exported to Excel documents. This feature is ideal when visual elements or interactive content need to be preserved in exported files.
+
+In the following sample, the hyperlinks and images are exported to Excel using the `ExcelQueryCellInfo` event with hyperlink and image properties.
+
+> Excel Export supports base64 string to export the images.
+
+To export template columns to an Excel document:
-To export template columns to a PDF document:
+1. Set the [IncludeTemplateColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_IncludeTemplateColumn) property of [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) to **true**.
+2. Pass the configured `ExcelExportProperties` to the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method inside the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
+3. Handle the [ExcelQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelQueryCellInfoEvent) event to customize the exported content of template columns.
-1. Set the [IncludeTemplateColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html#Syncfusion_Blazor_Grids_PdfExportProperties_IncludeTemplateColumn) property of [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) to **true**.
-2. Pass the configured `PdfExportProperties` 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 inside the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event.
-3. Handle the [PdfQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfQueryCellInfoEvent) event to customize the exported content of template columns.
+> * To customize the exported content of template columns, use the `ExcelQueryCellInfo` event.
+> * Excel export supports base64 strings for exporting images.
-> * To customize template column content during PDF export, use the `PdfQueryCellInfoEvent` event.
-> * PDF export supports **Base64 strings** for exporting images.
+The **FirstName** and **EmailID** columns are rendered using templates and exported with customized values.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-
-
+
+
@@ -73,24 +79,25 @@ To export template columns to a PDF document:
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
- if (args.Item.Id == "Grid_pdfexport") // Id is the combination of Grid's ID and item name.
+ if (args.Item.Id == "Grid_excelexport") // Id is the combination of Grid's ID and item name.
{
- PdfExportProperties ExportProperties = new PdfExportProperties();
- ExportProperties.IncludeTemplateColumn = true; // Ensures template columns are included in the export.
- await this.DefaultGrid.ExportToPdfAsync(ExportProperties);
+ ExcelExportProperties ExportProperties = new ExcelExportProperties();
+ ExportProperties.IncludeTemplateColumn = true;
+ await this.DefaultGrid.ExportToExcelAsync(ExportProperties);
}
}
- public void PdfQueryCellInfoHandler(PdfQueryCellInfoEventArgs args)
+ public void ExcelQueryCellInfoHandler(ExcelQueryCellInfoEventArgs args)
{
if (args.Column.Field == "FirstName")
{
args.Cell.Value = "Mr." + args.Data.FirstName;
}
else if (args.Column.Field == "EmailID")
- {
- args.Cell.Value = $"{args.Data.EmailID}";
- }
+ {
+ var email = args.Data.EmailID;
+ args.Cell.Value = $"{email}";
+ }
}
}
@@ -125,7 +132,6 @@ public class EmployeeData
Employees.Add(new EmployeeData(8, "Callahan", "allison@domain.com", "Inside Sales Coordinator", "Seattle"));
Employees.Add(new EmployeeData(9, "Dodsworth", "nancy@domain.com", "Sales Representative", "London"));
}
-
return Employees;
}
@@ -139,31 +145,30 @@ public class EmployeeData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVItzhpzpJHfBYo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVeZpinSuMCxdjJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+
-## Exporting with group caption template
+## Exporting with caption template
-The Syncfusion® Blazor DataGrid supports exporting grouped data along with a custom caption template to a PDF document. This feature is useful for adding meaningful group captions such as record counts or group keys to the exported file.
+Caption template export provides customization of group headers in Excel documents. The DataGrid exports customized caption templates to Excel, enabling enhanced header presentation for grouped data that improves document readability.
-To customize group caption text in the exported PDF document:
+To customize group caption text in the exported Excel document:
1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event to trigger the export.
-2. 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 to export the DataGrid.
-3. Handle the [PdfGroupCaptionTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfGroupCaptionTemplateInfo) event to customize the group caption text.
-4. Use the **args.Cell.Value** property to define the caption using values such as **group key**, **record count**, and **header text**.
+2. Use the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method to export the DataGrid.
+3. Handle the [ExcelGroupCaptionTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelGroupCaptionTemplateInfo) event to customize the group caption text.
+4. Use the **args.Cell.Value** property to define the caption using values like group key, record count, and header text.
-> To customize group caption text during PDF export, use the `PdfGroupCaptionTemplateInfo` event.
+> * To customize group caption text during Excel export, use the `ExcelGroupCaptionTemplateInfo` event.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Navigations
-
-
+
+
@@ -186,21 +191,24 @@ To customize group caption text in the exported PDF document:
protected override void OnInitialized()
{
- GridData = OrderData.GetAllRecords();
+ GridData = OrderData.GetAllRecords(); // Replace with your actual data logic.
}
+
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
- if (args.Item.Id == "Grid_pdfexport")
- {
- await Grid.ExportToPdfAsync();
- }
+ if (args.Item.Id == "Grid_excelexport") // Id is the combination of Grid's ID and item name.
+ {
+ if (args.Item.Id == "Grid_excelexport")
+ {
+ await Grid.ExportToExcelAsync();
+ }
+ }
}
- // Customize the group caption in the exported PDF document.
- public void PdfGroupCaptionInfoHandler(PdfCaptionTemplateArgs args)
+ public void ExcelGroupCaptionInfoHandler(ExcelCaptionTemplateArgs args)
{
- args.Cell.Value = args.Key + "-" + args.Count + " Records: " + args.HeaderText;
+ args.Cell.Value = args.Key + "-" + args.Count + " Records: " + args.HeaderText;
}
}
@@ -221,28 +229,28 @@ public class OrderData
public static List GetAllRecords()
{
return new List
- {
- new OrderData(10248, "VINET", 32.38, "Reims"),
- new OrderData(10249, "TOMSP", 11.61, "Münster"),
- new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro"),
- new OrderData(10251, "VICTE", 41.34, "Lyon"),
- new OrderData(10252, "SUPRD", 51.30, "Charleroi"),
- new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro"),
- new OrderData(10254, "CHOPS", 22.98, "Bern"),
- new OrderData(10255, "RICSU", 148.33, "Genève"),
- new OrderData(10256, "WELLI", 13.97, "Resende"),
- new OrderData(10257, "HILAA", 81.91, "San Cristóbal"),
- new OrderData(10258, "ERNSH", 140.51, "Graz"),
- new OrderData(10259, "CENTC", 3.25, "México D.F."),
- new OrderData(10260, "OTTIK", 55.09, "Köln"),
- new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro"),
- new OrderData(10262, "RATTC", 48.29, "Albuquerque"),
- new OrderData(10263, "ERNSH", 76.56, "Graz"),
- new OrderData(10264, "FOLKO", 67.10, "Bräcke"),
- new OrderData(10265, "BLONP", 36.65, "Strasbourg"),
- new OrderData(10266, "WARTH", 27.19, "Stavanger"),
- new OrderData(10267, "FRANK", 65.83, "München")
- };
+ {
+ new OrderData(10248, "VINET", 32.38, "Reims"),
+ new OrderData(10249, "TOMSP", 11.61, "Münster"),
+ new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro"),
+ new OrderData(10251, "VICTE", 41.34, "Lyon"),
+ new OrderData(10252, "SUPRD", 51.30, "Charleroi"),
+ new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro"),
+ new OrderData(10254, "CHOPS", 22.98, "Bern"),
+ new OrderData(10255, "RICSU", 148.33, "Genève"),
+ new OrderData(10256, "WELLI", 13.97, "Resende"),
+ new OrderData(10257, "HILAA", 81.91, "San Cristóbal"),
+ new OrderData(10258, "ERNSH", 140.51, "Graz"),
+ new OrderData(10259, "CENTC", 3.25, "México D.F."),
+ new OrderData(10260, "OTTIK", 55.09, "Köln"),
+ new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro"),
+ new OrderData(10262, "RATTC", 48.29, "Albuquerque"),
+ new OrderData(10263, "ERNSH", 76.56, "Graz"),
+ new OrderData(10264, "FOLKO", 67.10, "Bräcke"),
+ new OrderData(10265, "BLONP", 36.65, "Strasbourg"),
+ new OrderData(10266, "WARTH", 27.19, "Stavanger"),
+ new OrderData(10267, "FRANK", 65.83, "München")
+ };
}
public int OrderID { get; set; }
@@ -254,40 +262,37 @@ public class OrderData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVyjfMHqkQMUKqH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVejJMmrqlNTnoQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
+
## Exporting with detail template
-The Syncfusion® Blazor DataGrid supports exporting both parent and child (detail) records, including nested data, to a PDF document.
+Detail template export configuration allows control over hierarchical DataGrid rendering in Excel documents. The DataGrid can export parent rows with expanded detail rows, collapsed detail rows, or only parent rows depending on the selected mode.
-By default, the DataGrid exports only the parent rows along with expanded detail rows. To customize this behavior, configure the [PdfDetailRowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailRowMode.html) property of [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) inside 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.
+By default, the DataGrid exports parent rows with expanded detail rows. To customize this behavior, configure the [ExcelDetailRowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_ExcelDetailRowMode) property of [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) inside 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 [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method.
**Available Modes**
| Mode | Behavior |
|-------|----------|
| Expand | Exports parent rows with expanded detail rows.
+| Collapse | Exports parent rows with collapsed detail rows.
| None | Exports only the parent rows.
-To format and customize the detail rows in the exported PDF document:
+To format and customize the detail rows in the exported Excel document:
-1. Handle the [PdfDetailTemplateExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfDetailTemplateExporting) event to format and customize detail rows in the exported PDF.
-2. Use the [Headers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_PdfDetailTemplateRowSettings_Headers) and [Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_PdfDetailTemplateRowSettings_Rows) properties of [PdfDetailTemplateRowSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailTemplateRowSettings.html) to define the structure of detail rows.
-3. Apply styles to specific cells using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailTemplateCell.html#Syncfusion_Blazor_Grids_PdfDetailTemplateCell_Style) property.
+1. Handle the [ExcelDetailTemplateExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelDetailTemplateExporting) event and use the [Headers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateRowSettings_Headers) and [Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateRowSettings_Rows) properties of `ExcelDetailTemplateRowSettings` to define the structure of detail rows.
+3. Apply styles to specific cells using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateCell.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateCell_Style) property.
-> To customize detail rows during PDF export, use the `PdfDetailTemplateExporting` event.
+> * To customize detail rows during Excel export, use the `ExcelDetailTemplateExporting` event.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
+
@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Buttons
-@using Syncfusion.Blazor.Data
-@using Syncfusion.Blazor.Navigations
-@using Syncfusion.Blazor
-
+
@{
@@ -325,7 +330,7 @@ To format and customize the detail rows in the exported PDF document:
- @employee.Status
+ @employee.Status
@employee.ReturnPolicy
@@ -350,17 +355,17 @@ To format and customize the detail rows in the exported PDF document:
-
}
-
+
+
@code {
-
- private SfGrid DefaultGrid;
+ private SfGrid Grid;
public List Employees { get; set; }
+
+ protected override void OnInitialized()
+ {
+ Employees = ProductData.GetAllRecords();
+ }
+
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
- if (args.Item.Id == "Grid_pdfexport") // Id is the combination of Grid's ID and item name.
+ if (args.Item.Id == "Grid_excelexport") // Id is the combination of Grid's ID and item name.
{
- PdfExportProperties PdfExportProperties = new PdfExportProperties();
- PdfExportProperties.PdfDetailRowMode = PdfDetailRowMode.Expand;
- await this.DefaultGrid.ExportToPdfAsync(PdfExportProperties);
+ ExcelExportProperties ExportProperties = new ExcelExportProperties();
+ ExportProperties.ExcelDetailRowMode = ExcelDetailRowMode.Expand;
+ await Grid.ExportToExcelAsync(ExportProperties);
}
}
- public void PdfDetailTemplateHandler(PdfDetailTemplateEventArgs args)
+ public void ExcelDetailTemplateHandler(ExcelDetailTemplateEventArgs args)
{
- var pdfRows = new List();
- var data = args.ParentRow.Data;
+ // Initialize a list to hold detail template rows for the Excel export.
+ var excelRows = new List();
- // Define number of columns in detail section.
- args.RowInfo.ColumnCount = 2;
+ // Get the parent row's data.
+ var data = args.ParentRow.Data;
- // Set the header row for detail section.
- args.RowInfo.Headers = new List()
- {
- new PdfDetailTemplateRow()
- {
- Cells=new List()
- {
- new PdfDetailTemplateCell()
- {
- Index = 0,
- CellValue = "Product Details",
+ // Set the header row for the detail template.
+ args.RowInfo.Headers = new List() {
+ new ExcelDetailTemplateRow() {
+ Cells = new List() {
+ new ExcelDetailTemplateCell() {
+ Index = 0,
+ CellValue = "Product Details",
ColumnSpan = 2,
- Style = new PdfThemeStyle()
- {
- Bold = true,
- FontColor = "#0A76FF",
- FontSize = 13
- }
- }
- }
- }
+ Style = new ExcelStyle() {
+ Bold = true, BackColor = "#ADD8E6"
+ }
+ }
+ }
+ }
};
- // Add each row of product details.
- pdfRows.Add(new PdfDetailTemplateRow()
+ // Add the first row with product description and contact as a hyperlink.
+ excelRows.Add(new ExcelDetailTemplateRow()
{
- Cells = new List()
+ Cells = new List()
{
- new PdfDetailTemplateCell()
+ new ExcelDetailTemplateCell()
{
- CellValue = data.ProductDesc,
- Index = 0
+ CellValue = data.ProductDesc, Index = 0
},
- new PdfDetailTemplateCell()
+ new ExcelDetailTemplateCell()
{
- Index = 1,
- Hyperlink = new Hyperlink()
- {
- DisplayText = data.Contact,
- Target = data.Contact
- }
+ Index = 1, Hyperlink = new Hyperlink() { DisplayText = data.Contact, Target = data.Contact }
}
}
});
-
- pdfRows.Add(new PdfDetailTemplateRow()
+ excelRows.Add( new ExcelDetailTemplateRow()
{
- Cells = new List()
+ Cells = new List()
{
- new PdfDetailTemplateCell()
+ new ExcelDetailTemplateCell()
{
- CellValue = data.Cost,
- Index = 0
+ CellValue = data.Cost, Index = 0
},
- new PdfDetailTemplateCell()
+ new ExcelDetailTemplateCell()
{
- Index = 1,
- CellValue = "Available :" + data.Available
- }
+ Index = 1, CellValue = "Available :" + data.Available
+ }
}
});
- pdfRows.Add(new PdfDetailTemplateRow()
+ // Add the second row with product cost and availability status.
+ excelRows.Add(new ExcelDetailTemplateRow()
{
- Cells = new List()
+ Cells = new List()
{
- new PdfDetailTemplateCell()
+ new ExcelDetailTemplateCell()
{
- CellValue = data.Status,
- Index = 0
+ CellValue = data.Status, Index = 0,
+ Style = new ExcelStyle()
+ {
+ FontColor = data.Status == "Available" ? "#00FF00" : "#FF0000"
+ }
},
- new PdfDetailTemplateCell()
+ new ExcelDetailTemplateCell()
{
- Index = 1,
- CellValue = data.ReturnPolicy
+ Index = 1, CellValue = data.ReturnPolicy
}
}
});
- pdfRows.Add(new PdfDetailTemplateRow()
+ // Add the third row with product status and return policy.
+ excelRows.Add(new ExcelDetailTemplateRow()
{
- Cells = new List()
+ Cells = new List()
{
- new PdfDetailTemplateCell()
+ new ExcelDetailTemplateCell()
{
- CellValue = "Offers :" + data.Offers,
- Index = 0,
- Style = new PdfThemeStyle()
+ CellValue = "Offers :" + data.Offers, Index = 0, Style = new ExcelStyle()
{
- FontColor = "#0A76FF",
- FontSize = 12
+ FontColor = "#0A76FF", FontSize = 12
}
},
-
- new PdfDetailTemplateCell()
+ new ExcelDetailTemplateCell()
{
- Index = 1,
- CellValue = data.Cancellation
+ Index = 1, CellValue = data.Cancellation
}
}
});
- pdfRows.Add(new PdfDetailTemplateRow()
+ // Add the fifth row with product ratings and delivery information.
+ excelRows.Add(new ExcelDetailTemplateRow()
{
- Cells = new List()
+ Cells = new List()
{
- new PdfDetailTemplateCell()
+ new ExcelDetailTemplateCell()
{
- CellValue = "Ratings: " + data.Ratings,
- Index = 0,
- Style = new PdfThemeStyle()
+ CellValue = "Ratings: " + data.Ratings, Index = 0, Style = new ExcelStyle()
{
- FontColor = "#0A76FF",
- FontSize = 12
+ FontColor = "#0A76FF", FontSize = 12
}
},
- new PdfDetailTemplateCell()
+ new ExcelDetailTemplateCell()
{
- Index = 1,
- CellValue = data.Delivery,
- Style=new PdfThemeStyle()
+ Index = 1, CellValue = data.Delivery, Style = new ExcelStyle()
{
- FontColor = "#0A76FF",
- FontSize = 12
+ FontColor = "#0A76FF", FontSize = 12
}
}
}
});
- // Assign the list of rows to the RowInfo.
- args.RowInfo.Rows = pdfRows;
- }
-
- protected override void OnInitialized()
- {
- Employees = ProductData.GetAllRecords();
+ // Assign the customized detail rows to the RowInfo.
+ args.RowInfo.Rows = excelRows;
}
}
@@ -543,7 +533,9 @@ public class ProductData
{
public static List Products = new List();
- public ProductData(string category, string offers, string cost, string available, string itemID, string productID,string contact, string status, string productDesc, string returnPolicy, string delivery, string cancellation, string ratings)
+ public ProductData(string category, string offers, string cost, string available, string itemID, string productID,
+ string contact, string status, string productDesc, string returnPolicy,
+ string delivery, string cancellation, string ratings)
{
Category = category;
Offers = offers;
@@ -588,6 +580,7 @@ public class ProductData
Products.Add(new ProductData("Shirts/Denim", "6%", "49.99$", "25", "Shirt-003", "EJ-SH-03", "laura@domain.com", "Available", "Denim Shirt", "Return within 10 days", "** FREE Delivery **", "Cancellation upto 24 hrs", "4.1"));
Products.Add(new ProductData("Jackets/Leather", "18%", "199.99$", "5", "Jacket-001", "EJ-JA-01", "anne@domain.com", "Available", "Leather Jacket", "No Returns Applicable", "** FREE Delivery **", "Cancellation upto 6 hrs", "4.9"));
Products.Add(new ProductData("Jackets/Bomber", "20%", "129.99$", "12", "Jacket-002", "EJ-JA-02", "paul@domain.com", "Available", "Bomber Jacket", "Return within 7 days", "** FREE Delivery **", "Cancellation upto 12 hrs", "4.6"));
+
Products.Add(new ProductData("T-Shirts/Graphic", "10%", "19.99$", "80", "TShirt-001", "EJ-TS-01", "nancy@domain.com", "Available", "Graphic Tee", "Return within 15 days", "** FREE Delivery **", "Cancellation upto 24 hrs", "4.5"));
Products.Add(new ProductData("T-Shirts/Plain", "5%", "14.99$", "90", "TShirt-002", "EJ-TS-02", "andrew@domain.com", "Available", "Plain T-Shirt", "Return within 10 days", "** FREE Delivery **", "Cancellation upto 24 hrs", "4.2"));
Products.Add(new ProductData("T-Shirts/Sports", "12%", "24.99$", "70", "TShirt-003", "EJ-TS-03", "janet@domain.com", "Available", "Sports Tee", "Return within 7 days", "** FREE Delivery **", "Cancellation upto 12 hrs", "4.7"));
@@ -606,32 +599,31 @@ public class ProductData
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLIDYhxTrzASqVV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
-
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBSNfWcLSCKHChU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-> If [ColumnCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_PdfDetailTemplateRowSettings_ColumnCount) is not specified or is less than the number of cells in the first row of `Headers` or `Rows`, the columns in the detail section of the exported PDF will be generated based on the cell count in the first row of `Headers` or `Rows`.
+
-## Exporting hierarchical Blazor DataGrid using detail template
+## Exporting hierarchical DataGrid using detail template
-The Syncfusion® Blazor DataGrid supports exporting hierarchical data to a PDF document using the detail template feature. This is useful when parent rows contain nested child records, such as employee details with related orders.
+The Syncfusion® Blazor DataGrid supports exporting hierarchical data to Excel using the detail template feature. This is useful when parent rows contain nested child records, such as employee details with related orders.
-To export hierarchical DataGrid data to a PDF document:
+To export hierarchical Grid data to an Excel document:
1. Define a [DetailTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_DetailTemplate) in the DataGrid to render child content under each parent row.
-2. In the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event, create an instance of [PdfExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfExportProperties.html) and set the [PdfDetailRowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailRowMode.html) property to `Expand`.
-3. Handle the [PdfDetailTemplateExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_PdfDetailTemplateExporting) event to format the detail rows using the [Headers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_PdfDetailTemplateRowSettings_Headers) and [Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_PdfDetailTemplateRowSettings_Rows) properties.
-4. If nested child levels are present, use the [ChildRowInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PdfDetailTemplateRow.html#Syncfusion_Blazor_Grids_PdfDetailTemplateRow_ChildRowInfo) property.
-5. Call 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 pass the configured `PdfExportProperties`.
+2. In the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event, create an instance of [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) and set the [ExcelExportProperties.ExcelDetailRowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailRowMode.html) property to **Expand**.
+3. Handle the [ExcelDetailTemplateExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelDetailTemplateExporting) event to format the detail rows using the [Headers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateRowSettings_Headers) and [Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateRowSettings_Rows)properties.
+4. If nested child levels are present, use the [ChildRowInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateRow.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateRow_ChildRowInfo) property.
+5. Call the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method and pass the configured `ExcelExportProperties`.
+
+> * To format detail rows during export, use the [ExcelDetailTemplateExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelDetailTemplateExporting) event.
{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids
-@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.Data
-
+
@{
@@ -662,7 +654,7 @@ To export hierarchical DataGrid data to a PDF document:
-
+
@@ -684,80 +676,101 @@ To export hierarchical DataGrid data to a PDF document:
OrderInfo = OrderDetails.GetAllRecords();
}
- // Handles toolbar click event (for PDF export).
+ // Handles toolbar click event (for Excel export).
public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)
{
- if (args.Item.Id == "Grid_pdfexport") // Id is the combination of Grid's ID and item name.
+ // Id is the combination of Grid's ID and item name.
+ if (args.Item.Id == "Grid_excelexport")
{
- PdfExportProperties PdfExportProperties = new PdfExportProperties();
+ ExcelExportProperties ExportProperties = new ExcelExportProperties();
// Specify that detailed rows should be expanded.
- PdfExportProperties.PdfDetailRowMode = PdfDetailRowMode.Expand;
+ ExportProperties.ExcelDetailRowMode = ExcelDetailRowMode.Expand;
- // Export the data to PDF document.
- await this.Grid.ExportToPdfAsync(PdfExportProperties);
+ // Export the data to Excel document.
+ await Grid.ExportToExcelAsync(ExportProperties);
}
}
- // Customizes the PDF detail export for each employee.
- public void PdfDetailTemplateHandler(PdfDetailTemplateEventArgs args)
+ // Customizes the Excel detail export for each employee.
+ public void ExcelDetailTemplateHandler(ExcelDetailTemplateEventArgs args)
{
- var pdfRows = new List();
+ var excelRows = new List();
// Fetch all orders for the current employee.
var data = Orders.ToList().Where(_ => _.EmployeeID == args.ParentRow.Data.EmployeeID).ToList();
+
for (var i = 0; i < data.Count(); i++)
{
var row = data[i];
// Fetch all order details for the current order.
var childData = OrderInfo.ToList().Where(_ => _.OrderID == row.OrderID).ToList();
- var pdfchildRows = new List();
- var pdfRow = ProcessPdfRow(new List() { row.OrderID.ToString(), row.CustomerID.ToString(), row.Freight.ToString(), row.ShipCity });
- // For each order detail (child row), create an PDF row with the following details.
+ var excelchildRows = new List();
+
+ // For each order (parent row), create a new Excel row with specific columns.
+ var excelRow = ProcessExcelRow(new List() {
+ row.OrderID.ToString(),
+ row.CustomerID.ToString(),
+ row.Freight.ToString(),
+ row.ShipCity
+ });
+
+ // For each order detail (child row), create an Excel row with the following details.
for (var j = 0; j < childData.Count; j++)
{
var childRow = childData[j];
- pdfchildRows.Add(ProcessPdfRow(new List() { childRow.CustomerID.ToString(), childRow.Title.ToString(), childRow.Address.ToString(), childRow.Country }));
+ excelchildRows.Add(ProcessExcelRow(new List() {
+ childRow.CustomerID.ToString(),
+ childRow.Title.ToString(),
+ childRow.Address.ToString(),
+ childRow.Country
+ }));
}
// Add the child rows under the parent row.
- pdfRow.ChildRowInfo = new PdfDetailTemplateRowSettings()
+ excelRow.ChildRowInfo = new ExcelDetailTemplateRowSettings()
{
- // Set headers for child rows (order details).
- Headers = new List()
- {
- ProcessPdfRow(new List() { "Customer Name", "Title", "Address", "Country" })
- },
-
- // Set the child rows (the actual order details).
- Rows = pdfchildRows };
+ // Set headers for child rows (order details).
+ Headers = new List()
+ {
+ ProcessExcelRow(new List() { "Customer Name", "Title", "Address", "Country" })
+ },
+ // Set the child rows (the actual order details).
+ Rows = excelchildRows
+ };
// Add the row to the list of rows for this employee's orders.
- pdfRows.Add(pdfRow);
+ excelRows.Add(excelRow);
}
// Set the parent row headers (order-related information).
- args.RowInfo.Headers = new List() { ProcessPdfRow(new List() { "Order ID", "Customer ID", "Freight", "Ship City" }) };
+ args.RowInfo.Headers = new List()
+ {
+ ProcessExcelRow(new List() { "Order ID", "Customer ID", "Freight", "Ship City" })
+ };
- // Set the final row data (parent and child rows) for the PDF export.
- args.RowInfo.Rows = pdfRows;
+ // Set the final row data (parent and child rows) for the Excel export.
+ args.RowInfo.Rows = excelRows;
}
- // Converts a list of cell values into an PDF row.
- PdfDetailTemplateRow ProcessPdfRow(List value)
+ // Converts a list of cell values into an Excel row.
+ ExcelDetailTemplateRow ProcessExcelRow(List value)
{
- var cells = new List();
-
+ var cells = new List();
+
// Populate each cell with the corresponding value.
for (var j = 0; j < value.Count(); j++)
{
- cells.Add(new PdfDetailTemplateCell { CellValue = $"{value[j]}", Index = j });
+ cells.Add(new ExcelDetailTemplateCell {
+ CellValue = $"{value[j]}",
+ Index = j // Set the index of each cell.
+ });
}
-
- // Return the PDF row with its cells.
- return new PdfDetailTemplateRow { Cells = cells };
+
+ // Return the Excel row with its cells.
+ return new ExcelDetailTemplateRow { Cells = cells };
}
}
@@ -817,20 +830,20 @@ public class Order
public static List GetAllRecords()
{
return new List
- {
- new Order(1, 1001, "Nancy", "Texas", 2.1 * 1),
- new Order(2, 1002, "Andrew", "London", 2.1 * 2),
- new Order(3, 1003, "Janet", "London", 2.1 * 3),
- new Order(4, 1004, "Margaret", "London", 2.1 * 4),
- new Order(5, 1005, "Steven", "Vegas", 2.1 * 5),
- new Order(6, 1006, "Smith", "Dubai", 2.1 * 6),
- new Order(7, 1007, "Steven", "Paris", 2.1 * 7),
- new Order(8, 1008, "Smith", "Mumbai", 2.1 * 8),
- new Order(9, 1009, "Smith", "Chennai", 2.1 * 9),
- new Order(2, 1010, "Smith", "Chennai", 2.1 * 9),
- new Order(3, 1011, "Smith", "Chennai", 2.1 * 9),
- new Order(3, 1012, "Smith", "Chennai", 2.1 * 9)
- };
+ {
+ new Order(1, 1001, "Nancy", "Texas", 2.1 * 1),
+ new Order(2, 1002, "Andrew", "London", 2.1 * 2),
+ new Order(3, 1003, "Janet", "London", 2.1 * 3),
+ new Order(4, 1004, "Margaret", "London", 2.1 * 4),
+ new Order(5, 1005, "Steven", "Vegas", 2.1 * 5),
+ new Order(6, 1006, "Smith", "Dubai", 2.1 * 6),
+ new Order(7, 1007, "Steven", "Paris", 2.1 * 7),
+ new Order(8, 1008, "Smith", "Mumbai", 2.1 * 8),
+ new Order(9, 1009, "Smith", "Chennai", 2.1 * 9),
+ new Order(2, 1010, "Smith", "Chennai", 2.1 * 9),
+ new Order(3, 1011, "Smith", "Chennai", 2.1 * 9),
+ new Order(3, 1012, "Smith", "Chennai", 2.1 * 9)
+ };
}
public int EmployeeID { get; set; }
@@ -884,6 +897,6 @@ public class OrderDetails
{% endhighlight %}
{% endtabs %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VtByZTscrNDihvvB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBytpWQhgOCVmqd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/blazor/datagrid/templates-excel-export.md b/blazor/datagrid/templates-excel-export.md
index ac5eb40d30..bd05dc1021 100644
--- a/blazor/datagrid/templates-excel-export.md
+++ b/blazor/datagrid/templates-excel-export.md
@@ -7,19 +7,25 @@ control: DataGrid
documentation: ug
---
-# Exporting grid with templates in Syncfusion Blazor DataGrid
+# Exporting with Templates
-The Syncfusion® Blazor DataGrid supports exporting template content to Excel, enabling rich formatting in exported documents. The following template types are supported:
+The Syncfusion® Blazor DataGrid offers powerful export capabilities that preserve column, detail, and caption templates in Excel documents. Templates enable rich content rendering including images, hyperlinks, and customized text. Column templates customize individual cell content, detail templates display nested hierarchical data, and caption templates customize group headers for enhanced presentation.
+
+The following template types are supported:
* [Column Template](https://blazor.syncfusion.com/documentation/datagrid/column-template): Custom cell content such as formatted text, images, or hyperlinks.
* [Caption Template](https://blazor.syncfusion.com/documentation/datagrid/caption-template): Group caption rows with customized display elements.
* [Detail Template](https://blazor.syncfusion.com/documentation/datagrid/detail-template): Expanded row content that can include nested data or custom layouts.
-These templates are preserved during export, allowing the resulting Excel file to reflect the visual and structural formatting defined in the Grid.
+These templates are preserved during export, allowing the resulting Excel file to reflect the visual and structural formatting defined in the DataGrid.
## Exporting with column template
-The Excel export functionality in Syncfusion® Blazor DataGrid supports exporting columns that use templates containing images, hyperlinks, and custom text.
+Column template export enables DataGrid columns with complex content including images, hyperlinks, and custom text to be seamlessly exported to Excel documents. This feature is ideal when visual elements or interactive content need to be preserved in exported files.
+
+In the following sample, the hyperlinks and images are exported to Excel using the `ExcelQueryCellInfo` event with hyperlink and image properties.
+
+> Excel Export supports base64 string to export the images.
To export template columns to an Excel document:
@@ -143,14 +149,14 @@ public class EmployeeData
-## Exporting with group caption template
+## Exporting with caption template
-The Syncfusion® Blazor DataGrid supports exporting grouped data along with a custom caption template to an Excel document. This feature is useful for adding meaningful group captions such as record counts or group keys to the exported file.
+Caption template export provides customization of group headers in Excel documents. The DataGrid exports customized caption templates to Excel, enabling enhanced header presentation for grouped data that improves document readability.
To customize group caption text in the exported Excel document:
1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event to trigger the export.
-2. Use the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method to export the Grid.
+2. Use the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method to export the DataGrid.
3. Handle the [ExcelGroupCaptionTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelGroupCaptionTemplateInfo) event to customize the group caption text.
4. Use the **args.Cell.Value** property to define the caption using values like group key, record count, and header text.
@@ -262,9 +268,9 @@ public class OrderData
## Exporting with detail template
-The Syncfusion® Blazor DataGrid supports exporting both parent and child (detail) records including nested data to an Excel document.
+Detail template export configuration allows control over hierarchical DataGrid rendering in Excel documents. The DataGrid can export parent rows with expanded detail rows, collapsed detail rows, or only parent rows depending on the selected mode.
-By default, the Grid exports only the parent rows along with expanded detail rows. To customize this behavior, configure the [ExcelDetailRowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_ExcelDetailRowMode) property of [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) inside 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 [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method.
+By default, the DataGrid exports parent rows with expanded detail rows. To customize this behavior, configure the [ExcelDetailRowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_ExcelDetailRowMode) property of [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) inside 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 [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) or [ExportToCsvAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToCsvAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method.
**Available Modes**
@@ -276,8 +282,7 @@ By default, the Grid exports only the parent rows along with expanded detail row
To format and customize the detail rows in the exported Excel document:
-1. Handle the [ExcelDetailTemplateExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelDetailTemplateExporting) event.
-2. Use the [Headers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateRowSettings_Headers) and [Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateRowSettings_Rows) properties of `ExcelDetailTemplateRowSettings` to define the structure of detail rows.
+1. Handle the [ExcelDetailTemplateExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelDetailTemplateExporting) event and use the [Headers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateRowSettings_Headers) and [Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateRowSettings_Rows) properties of `ExcelDetailTemplateRowSettings` to define the structure of detail rows.
3. Apply styles to specific cells using the [Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateCell.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateCell_Style) property.
> * To customize detail rows during Excel export, use the `ExcelDetailTemplateExporting` event.
@@ -598,13 +603,13 @@ public class ProductData
-## Exporting hierarchical Grid using detail template
+## Exporting hierarchical DataGrid using detail template
The Syncfusion® Blazor DataGrid supports exporting hierarchical data to Excel using the detail template feature. This is useful when parent rows contain nested child records, such as employee details with related orders.
To export hierarchical Grid data to an Excel document:
-1. Define a [DetailTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_DetailTemplate) in the Grid to render child content under each parent row.
+1. Define a [DetailTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridTemplates.html#Syncfusion_Blazor_Grids_GridTemplates_DetailTemplate) in the DataGrid to render child content under each parent row.
2. In the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event, create an instance of [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) and set the [ExcelExportProperties.ExcelDetailRowMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailRowMode.html) property to **Expand**.
3. Handle the [ExcelDetailTemplateExporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelDetailTemplateExporting) event to format the detail rows using the [Headers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateRowSettings_Headers) and [Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateRowSettings.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateRowSettings_Rows)properties.
4. If nested child levels are present, use the [ChildRowInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelDetailTemplateRow.html#Syncfusion_Blazor_Grids_ExcelDetailTemplateRow_ChildRowInfo) property.