diff --git a/blazor/datagrid/excel-export-options.md b/blazor/datagrid/excel-export-options.md new file mode 100644 index 0000000000..360f7b5ce8 --- /dev/null +++ b/blazor/datagrid/excel-export-options.md @@ -0,0 +1,1897 @@ +--- +layout: post +title: Excel Export in Blazor DataGrid Component | Syncfusion +description: Checkout and learn here all about Excel Export in Syncfusion Blazor DataGrid component and much more. +platform: Blazor +control: DataGrid +documentation: ug +--- + +# Excel export options in Blazor DataGrid + +The Syncfusion Blazor DataGrid allows you to customize the Excel or CSV export options functionality. This flexibility enables you to have greater control over the exported content and layout to meet your specific requirements. + +The Excel or CSV export action can be customized based on your requirements using the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) property. By using the `ExcelExportProperties` property, you can export specific columns, exclude or include hidden column, export with custom data source, enable filter in the exported Excel or CSV document, change the file name, add header and footer, multiple Grid exporting, customize the data based on query, define delimiter for CSV exporting and set the theme. + +## Export current page records + +Exporting the current page in Syncfusion Blazor DataGrid to a Excel or CSV document provides the ability to export the currently displayed page records. This feature allows for generating Excel or CSV documents that specifically include the content from the current page of the Grid. + +To export the current page of the Grid to an Excel or CSV document, you need to specify the [ExportType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_ExportType) property. This property allows you to define which records you want to export. You can choose between two options: + +1. **CurrentPage**: Exports only the records on the current Grid page. +2. **AllPages**: Exports all the records from the Grid. + +The following example demonstrates how to export current page to a Excel document when a toolbar item is clicked, using the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event and the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.DropDowns + +
+ + + + +
+ + + + + + + + + + + + +@code { + private SfGrid Grid; + public List Orders { get; set; } + private string SelectedExportType = "CurrentPage"; + List DropDownValue = new List + { + new DropDownOrder { Text = "CurrentPage", Value = "CurrentPage" }, + new DropDownOrder { Text = "AllPages", Value = "AllPages" }, + }; + + protected override void OnInitialized() + { + Orders = EmployeeData.GetAllRecords(); + } + + public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "Grid_excelexport") + { + var exportProperties = new ExcelExportProperties + { + ExportType = SelectedExportType == "AllPages" ? ExportType.AllPages : ExportType.CurrentPage + }; + await Grid.ExportToExcelAsync(exportProperties); + } + } + + public class DropDownOrder + { + public string Text { get; set; } + public string Value { get; set; } + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="EmployeeData.cs" %} + +public class EmployeeData +{ + public static List Employees = new List(); + + public EmployeeData(int employeeID, string firstName, string lastName, string city) + { + this.EmployeeID = employeeID; + this.FirstName = firstName; + this.LastName = lastName; + this.City = city; + } + + public static List GetAllRecords() + { + if (Employees.Count == 0) + { + Employees.Add(new EmployeeData(1001, "Nancy", "Davolio", "Seattle")); + Employees.Add(new EmployeeData(1002, "Andrew", "Fuller", "Tacoma")); + Employees.Add(new EmployeeData(1003, "Janet", "Leverling", "Kirkland")); + Employees.Add(new EmployeeData(1004, "Margaret", "Peacock", "Redmond")); + Employees.Add(new EmployeeData(1005, "Steven", "Buchanan", "London")); + Employees.Add(new EmployeeData(1006, "Michael", "Suyama", "London")); + Employees.Add(new EmployeeData(1007, "Robert", "King", "London")); + Employees.Add(new EmployeeData(1008, "Laura", "Callahan", "Seattle")); + Employees.Add(new EmployeeData(1009, "Anne", "Dodsworth", "London")); + } + + return Employees; + } + + public int EmployeeID { get; set; } + public string FirstName { get; set; } + public string LastName { get; set; } + public string City { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBejpMDzobgsSwy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Export the selected records + +Exporting only the selected records from the Grid allows generating Excel or CSV document that include only the desired data from the Grid. This feature provides the flexibility to export specific records that are relevant to the needs, enabling more focused and targeted Excel or CSV exports. + +To export the selected records from the Grid to a Excel or CSV document, you can follow these steps: + +1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event of the Grid and retrieve the selected records using the [GetSelectedRecordsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_GetSelectedRecordsAsync) method. + +2. Assign the selected data to the [ExportProperties.DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_DataSource) property. + +3. Trigger the export operation 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_) 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 how to export the selected records to a Excel document when a toolbar item is clicked. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + +@code { + private SfGrid Grid; + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } + + public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "Grid_excelexport") + { + var selectedRecords = await Grid.GetSelectedRecordsAsync(); + ExcelExportProperties exportProperties = new ExcelExportProperties + { + DataSource = selectedRecords + }; + 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) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.ShipCity = shipCity; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims")); + Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster")); + Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro")); + Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon")); + Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi")); + Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro")); + Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern")); + Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève")); + Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende")); + Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal")); + Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz")); + Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.")); + Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln")); + Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro")); + Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque")); + } + + return Orders; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVeNziNTHvZEmUU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Exporting grouped records + +The Syncfusion Blazor DataGrid provides an outline option for grouped records, allowing you to hide detailed data for better viewing in the exported document. This feature is particularly useful when you need to share data that is grouped based on specific columns and maintain the grouping structure in the exported file. + +To achieve this functionality, you need to enable grouping in the Grid 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, you need 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 you want to group the data. + +The following example demonstrates how to export grouped records to an Excel document when a toolbar item is clicked, using the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event and the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + +@code { + private SfGrid Grid; + public List Orders { get; set; } + public string[] Initial = (new string[] { "CustomerID", "ShipCity" }); + + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } + + public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "Grid_excelexport") + { + await Grid.ExportToExcelAsync(); + } + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + + public OrderData(int orderID, string customerID, double freight, string shipCity) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.ShipCity = shipCity; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims")); + Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster")); + Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro")); + Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon")); + Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi")); + Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro")); + Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern")); + Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève")); + Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende")); + Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal")); + Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz")); + Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.")); + Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln")); + Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro")); + Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque")); + } + + return Orders; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhSNTiDpmrJDsrV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Limitations + +Microsoft Excel permits up to seven nested levels in outlines. So that in the Grid we can able to provide only up to seven nested levels and if it exceeds more than seven levels then the document will be exported without outline option. Refer the [Microsoft Limitation](https://learn.microsoft.com/en-us/sql/reporting-services/report-builder/exporting-to-microsoft-excel-report-builder-and-ssrs?view=sql-server-2017#ExcelLimitations). + +## Export with hidden columns + +Exporting hidden columns in the Syncfusion Blazor DataGrid allows you to include hidden columns in the exported Excel or CSV document. This feature is useful when you have columns that are hidden in the UI but still need to be included in the exported document. + +To export hidden columns of the Grid to a Excel or CSV document, you need to set the [includeHiddenColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_IncludeHiddenColumn) property as **true** in the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) property. + +The following example demonstrates how to export hidden columns to a Excel document using the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event and the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method. In this example, the **ShipCity** column, which is not visible in the UI, is exported to the Excel document. You can also export the Grid by changing the `ExcelExportProperties.IncludeHiddenColumn` property based on the switch toggle using the `bind-Checked` property of the [Blazor Toggle Switch Button](https://blazor.syncfusion.com/documentation/toggle-switch-button/getting-started-webapp). + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Buttons + +
+ + +
+ + + + + + + + + + + + +@code { + private SfGrid Grid; + public List Orders { get; set; } + public bool IncludeHiddenColumns { get; set; } = false; + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } + + public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "Grid_excelexport") + { + ExcelExportProperties exportProperties = new ExcelExportProperties + { + IncludeHiddenColumn = IncludeHiddenColumns + }; + 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 shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.ShipCity = shipCity; + this.ShipCountry = shipCountry; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "France")); + Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Germany")); + Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Brazil")); + Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "France")); + Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Belgium")); + Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Brazil")); + Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Switzerland")); + Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Switzerland")); + Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Brazil")); + Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Venezuela")); + Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Austria")); + Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Mexico")); + Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Germany")); + Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Brazil")); + Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "USA")); + } + + return Orders; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public string ShipCountry { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtByNpMDplOKPhoQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Show or hide columns while exporting + +The Syncfusion Blazor DataGrid provides the functionality to show or hide columns dynamically during the export process. This feature allows you to selectively display or hide specific columns based on your requirements. + +To show or hide columns based on user interaction during the export process, you can follow these steps: + +1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event of the Grid and update the visibility of the desired columns by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Visible) property of the column to **true** or **false**. + +2. Export the Grid to Excel or CSV document. + +3. Handle the [ExportComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExportComplete) event to restore the column visibility to its original state. + +In the following example, the **CustomerID** is initially a hidden column in the Grid. However, during the export process, the **CustomerID** column is made visible, while the **ShipCity** column is hidden. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + +@code { + private SfGrid Grid; + public List Orders { get; set; } + public bool isCustomerIDVisible { get; set; } = false; + public bool isShipCityVisible { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } + + public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "Grid_excelexport") + { + isCustomerIDVisible = true; + isShipCityVisible=false; + await Grid.ExportToExcelAsync(); + } + } + + public void ExportCompleteHandler(object args) + { + isCustomerIDVisible = false; + isShipCityVisible=true; + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + + public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName, string shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.ShipCity = shipCity; + this.ShipName = shipName; + this.ShipCountry = shipCountry; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier", "France")); + Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten", "Germany")); + Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes", "Brazil")); + Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock", "France")); + Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices", "Belgium")); + Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes", "Brazil")); + Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese", "Switzerland")); + Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt", "Switzerland")); + Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export", "Brazil")); + Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos", "Venezuela")); + Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel", "Austria")); + Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial", "Mexico")); + Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen", "Germany")); + Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia", "Brazil")); + Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery", "USA")); + } + + return Orders; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } + public string ShipCountry { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLeDpWWTcPQCFoF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Define file name + +The Syncfusion Blazor DataGrid allows you to specify a custom file name for the exported Excel or CSV document. This feature enables you to provide a meaningful and descriptive name for the exported file, making it easier to identify and manage the exported data. + +To assign a custom file name for the exported document, you can set the [FileName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_FileName) property of the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) property in the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event and pass it to the [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 how to define 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" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Inputs + +
+ + +
+ + + + + + + + + + + +@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") + { + var fileNameToExport = !string.IsNullOrWhiteSpace(FileName) ? FileName + ".xlsx" : "ExportedData.xlsx"; + ExcelExportProperties exportProperties = new ExcelExportProperties + { + FileName = fileNameToExport, + }; + 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/rZBItJMWfSuvFmBn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Customizing columns on export + +The Syncfusion Blazor DataGrid allows you to customize the appearance of Grid columns in your exported Excel or CSV documents. This feature empowers you to tailor specific column attributes such as field, header text, and text alignment, ensuring that your exported Excels align perfectly with your design and reporting requirements. + +To customize the Grid columns, you can follow these steps: + +1. Handle the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event, and access the [ExcelExportProperties.Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Columns) property of the Grid. + +2. Define new list of GridColumn objects with the desired properties such as Field, HeaderText, TextAlign, Format, and Width for each column to be exported. + +3. Assign this list to the `Columns` property of the `ExcelExportProperties` object, then 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_) to apply the customizations during export. + +The following example demonstrates how to customize the Grid columns when exporting a document. In this scenario, the attributes for different columns have been customized: **OrderID** with `HeaderText` set to **Order Number**, **CustomerID** with headerText as **Customer Name**, and **Freight** with a center-aligned `TextAlign` property, which is not rendered in the Grid columns: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + +@code { + private SfGrid Grid; + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } + + public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "Grid_excelexport") //Id is combination of Grid's ID and itemname. + { + List ExportColumns = new List(); + ExportColumns.Add(new GridColumn() { Field = "OrderID", HeaderText = "Order Number", Width = "120" }); + ExportColumns.Add(new GridColumn() { Field = "CustomerID", HeaderText = "Customer Name", Width = "120" }); + ExportColumns.Add(new GridColumn() { Field = "Freight", HeaderText = "Freight", Width = "120", Format = "C2", TextAlign = TextAlign.Center }); + var exportProperties = new ExcelExportProperties + { + Columns = ExportColumns + }; + 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 shipCountry) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.ShipCity = shipCity; + this.ShipCountry = shipCountry; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "France")); + Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Germany")); + Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Brazil")); + Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "France")); + Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Belgium")); + Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Brazil")); + Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Switzerland")); + Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Switzerland")); + Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Brazil")); + Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Venezuela")); + Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Austria")); + Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Mexico")); + Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Germany")); + Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Brazil")); + Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "USA")); + } + + return Orders; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public string ShipCountry { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVyDpiXSTLiKArB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +> By default, material theme is applied to exported Excel document. + +## Font and color customization + +The Excel or CSV export feature in Grid provides an option to include themes for the exported Excel or CSV document. This feature is particularly useful when you want to maintain a consistent and visually appealing style for the exported data in Excel document. + +To apply a theme to the exported Excel or CSV document, you can define the [Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Theme) property within the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html). This property allows you to specify the `Theme` to be used in the exported Excel document, including styles for the caption, header, and record content. You can define this property in the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event and pass it to the [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. + +[Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelTheme.html#Syncfusion_Blazor_Grids_ExcelTheme_Caption): This property defines the theme style for the caption content in the exported Excel document. The caption is the title or description that appears at the top of the exported Excel or CSV sheet. + +[Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelTheme.html#Syncfusion_Blazor_Grids_ExcelTheme_Header): This property is used to defines the style for the header content in the exported Excel document. The header corresponds to the column headers in the Grid. + +[Record](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelTheme.html#Syncfusion_Blazor_Grids_ExcelTheme_Record): This property defines the theme style for the record content in the exported Excel or CSV document. The record represents the data rows in the Grid that are exported to Excel or CSV document. + +In the following example, apply font styling to the caption, header, and record in the Excel document using the `Theme` property: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + +@code { + private SfGrid Grid; + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } + + public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "Grid_excelexport") + { + ExcelExportProperties excelProperties = new ExcelExportProperties(); + ExcelTheme Theme = new ExcelTheme(); + ExcelStyle ThemeStyle = new ExcelStyle() + { + FontName = "Segoe UI", + FontColor = "#666666", + FontSize = 20 + }; + 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/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 you to customize the background color of the Grid content (header, record, and caption rows) when exporting it to an Excel or CSV document. This feature helps enhance the readability and visual appearance of the exported files. + +To apply a background color in the exported Excel or CSV document: + +1. Create an instance 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. + +2. Define an [ExcelTheme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelTheme.html) instance for customization. + +3. Set a custom [ExcelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelStyle.html#properties) 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 [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelTheme.html#Syncfusion_Blazor_Grids_ExcelTheme_Header), [Record](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelTheme.html#Syncfusion_Blazor_Grids_ExcelTheme_Record), and [Caption](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelTheme.html#Syncfusion_Blazor_Grids_ExcelTheme_Caption) properties of the theme. + +5. Assign the theme to the [Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Theme) property of `ExcelExportProperties`. + +6. Trigger the export operation 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_) 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 sample demonstrates how to apply a custom background color to the Grid's header, rows, and caption in the exported Excel document: + +{% 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 you to add additional worksheets to the Excel or CSV document during export. This is especially useful when you want to include supplementary information, summaries, or additional datasets alongside the Grid content in the exported document. + +To add additional worksheets during export, follow the steps below: + +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 specify the worksheet index where the Grid data should be placed. + +4. Trigger the export operation 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_) 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 the following example, two extra blank worksheets are added along with the worksheet containing the Grid data: + +{% 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 + +When exporting data from the Syncfusion Blazor DataGrid, you have an option to conditionally format the cells in the exported Excel document. This allows you to customize the appearance of specific cells based on their values or other criteria. + +To achieve this feature, you need to use the [ExcelQueryCellInfoEvent](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelQueryCellInfoEvent) event of the Grid. This event is triggered for each cell during the export process to Excel document. Within this event, you can access the [args.Style](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_ExcelHeaderQueryCellInfoEventArgs_Style) property and modify its properties, such as the background color, based on your desired conditions. + +> You can also access the cell object using the [args.Cell.CellStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelHeaderQueryCellInfoEventArgs.html#Syncfusion_Blazor_Grids_ExcelHeaderQueryCellInfoEventArgs_Cell) property and modify its properties, such as the background color, based on your desired conditions with the `ExcelQueryCellInfoEvent` event. + +The following example demonstrate how to customize the background color of the **Freight** column in the exported Excel document 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 customize the appearance of the Grid UI, and the Excel or CSV export is triggered 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. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + + +@code { + private SfGrid Grid; + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } + + public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "Grid_excelexport") + { + await Grid.ExportToExcelAsync(); + } + } + + public void QueryCellInfoHandler(Syncfusion.Blazor.Grids.QueryCellInfoEventArgs args) + { + if (args.Column.Field == "Freight") + { + if (args.Data.Freight < 30) + { + args.Cell.AddStyle(new[] { "background-color: #99ffcc" }); + } + else if (args.Data.Freight < 60) + { + args.Cell.AddStyle(new[] { "background-color: #ffffb3" }); + } + else + { + args.Cell.AddStyle(new[] { "background-color: #ff704d" }); + } + } + } + + public void ExcelQueryCellInfoHandler(ExcelQueryCellInfoEventArgs args) + { + if (args.Column.Field == "Freight") + { + if (args.Data.Freight < 30) + { + args.Style.BackColor = "#99ffcc"; + } + else if (args.Data.Freight < 60) + { + args.Style.BackColor = "#ffffb3"; + } + else + { + args.Style.BackColor = "#ff704d"; + } + } + } +} + +{% 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/rNLSZfiWAQxFziVz?appbar=true&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Adding header and footer in the exported Excel document + +The Excel or CSV Export feature in Syncfusion Blazor DataGrid allows you to include header and footer content in the exported Excel or CSV document. This feature is particularly useful when you want to add additional information or branding to the exported Excel or CSV document. + +To achieve this, you can use [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 allowing you to customize the header and footer content. + +The following example demonstrates how to add a header and footer to the exported Grid: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids + + + + + + + + + + + +@code { + private SfGrid Grid; + public List Orders { get; set; } + + protected override void OnInitialized() + { + Orders = OrderData.GetAllRecords(); + } + + public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "Grid_excelexport") + { + var exportProperties = new ExcelExportProperties(); + var header = new ExcelHeader { HeaderRows = 8 }; + + // Initialize the list of rows for the header. + header.Rows = new List + { + // Add a new row to the header with specific cells. + new ExcelRow + { + // Define the cells within this row. + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "Northwind Traders", + Style = new ExcelStyle + { + FontColor = "#C67878", + FontSize = 20, + HAlign = ExcelHorizontalAlign.Center, + Bold = true + } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "2501 Aerial Center Parkway", + Style = new ExcelStyle + { + FontColor = "#C67878", + FontSize = 15, + HAlign = ExcelHorizontalAlign.Center, + Bold = true + } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "Suite 200 Morrisville, NC 27560 USA", + Style = new ExcelStyle + { + FontColor = "#C67878", + FontSize = 15, + HAlign =ExcelHorizontalAlign.Center, + Bold = true + } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "Tel +1 888.936.8638 Fax +1 919.573.0306", + Style = new ExcelStyle + { + FontColor = "#C67878", + FontSize = 15, + HAlign = ExcelHorizontalAlign.Center, + Bold = true + } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Hyperlink = new Hyperlink { Target = "https://www.northwind.com/", DisplayText = "www.northwind.com" }, + Style = new ExcelStyle { HAlign = ExcelHorizontalAlign.Center } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Hyperlink = new Hyperlink { Target = "mailto:support@northwind.com" }, + Style = new ExcelStyle { HAlign = ExcelHorizontalAlign.Center } + } + } + }, + new ExcelRow { }, + new ExcelRow { } + }; + + + var footer = new ExcelFooter { FooterRows = 4 }; + + // Initialize the list of footer rows. + footer.Rows = new List + { + new ExcelRow { }, + new ExcelRow { }, + new ExcelRow + { + // Define the cells within this row. + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "Thank you for your business!", + Style = new ExcelStyle { HAlign = ExcelHorizontalAlign.Center, Bold = true } + } + } + }, + new ExcelRow + { + Cells = new List + { + new ExcelCell + { + ColSpan = 4, + Value = "!Visit Again!", + Style = new ExcelStyle { HAlign = ExcelHorizontalAlign.Center, Bold = true } + } + } + } + }; + exportProperties.Header = header; + exportProperties.Footer = footer; + 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/rtVItTsCruFliZJm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Exporting Grid Data as Stream + +The Syncfusion Blazor DataGrid allows exporting Grid data as a memory stream, enabling programmatic handling before saving or processing. The following sections cover how to export Grid data as a memory stream, merge multiple memory streams into one, and convert the memory stream to a file stream for saving the exported file. + +### Exporting Grid Data as Memory Stream + +The Export to Memory Stream feature allows you to export data from a Grid to a memory stream instead of saving it to a file directly on the server. This can be particularly useful when you want to generate and serve the file directly to the client without saving it on the server, ensuring a smooth and efficient download process. + +To achieve this functionality, you can utilize the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_System_Int32_System_Int32_System_Int32_) 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 along with the `asMemoryStream` parameter set to **true** within the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event. This method will export an Excel workbook as a memory stream, which can then be sent to the browser for download. + +The provided example showcases the process of exporting the file as a memory stream and sending the byte to initiate a browser download. + +**Step 1**: **Add JavaScript for File Download** + +Create a JavaScript file named **saveAsFile.js** under the **wwwroot/scripts** directory and include the following function to trigger browser download: + +{% tabs %} +{% highlight razor tabtitle="saveAsFile.js" %} + +function saveAsFile(filename, bytesBase64) { + var link = document.createElement('a'); + link.download = filename; + link.href = "data:application/octet-stream;base64," + bytesBase64; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); +} + +{% endhighlight %} +{% endtabs %} + +**Step 2**:**Register the JavaScript file** + +Include the script reference inside your **App.razor** (or **index.html** in Blazor WebAssembly): + +{% tabs %} +{% highlight razor tabtitle="App.razor" %} + + + + + + + + + + + + + + + + + + + + + + +{% endhighlight %} +{% endtabs %} + +**Step 3: Invoke the JavaScript function to perform the browser download using the memory stream** + +In the **Index.razor** file, the Grid is set up, the export operation is triggered, and the `saveAsFile` function is invoked to handle the browser download. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using System.IO; +@using Syncfusion.XlsIO +@using Syncfusion.ExcelExport; +@inject IJSRuntime JSRuntime + + + + + + + + + + + + +@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") //Id is combination of Grid's ID and itemname. + { + MemoryStream streamDoc = await Grid.ExportToExcelAsync(asMemoryStream: true); + await JSRuntime.InvokeVoidAsync("saveAsFile", new object[] { "ExcelStream.xlsx", Convert.ToBase64String(streamDoc.ToArray()), true }); + } + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + + public OrderData(int orderID, string customerID, double freight, string shipCity, string shipName) + { + this.OrderID = orderID; + this.CustomerID = customerID; + this.Freight = freight; + this.ShipCity = shipCity; + this.ShipName = shipName; + } + + public static List GetAllRecords() + { + if (Orders.Count == 0) + { + Orders.Add(new OrderData(10248, "VINET", 32.38, "Reims", "Vins et alcools Chevalier")); + Orders.Add(new OrderData(10249, "TOMSP", 11.61, "Münster", "Toms Spezialitäten")); + Orders.Add(new OrderData(10250, "HANAR", 65.83, "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10251, "VICTE", 41.34, "Lyon", "Victuailles en stock")); + Orders.Add(new OrderData(10252, "SUPRD", 51.3, "Charleroi", "Suprêmes délices")); + Orders.Add(new OrderData(10253, "HANAR", 58.17, "Rio de Janeiro", "Hanari Carnes")); + Orders.Add(new OrderData(10254, "CHOPS", 22.98, "Bern", "Chop-suey Chinese")); + Orders.Add(new OrderData(10255, "RICSU", 148.33, "Genève", "Richter Supermarkt")); + Orders.Add(new OrderData(10256, "WELLI", 13.97, "Resende", "Wellington Import Export")); + Orders.Add(new OrderData(10257, "HILAA", 81.91, "San Cristóbal", "Hila Alimentos")); + Orders.Add(new OrderData(10258, "ERNSH", 140.51, "Graz", "Ernst Handel")); + Orders.Add(new OrderData(10259, "CENTC", 3.25, "México D.F.", "Centro comercial")); + Orders.Add(new OrderData(10260, "OTTIK", 55.09, "Köln", "Ottilies Käseladen")); + Orders.Add(new OrderData(10261, "QUEDE", 3.05, "Rio de Janeiro", "Que delícia")); + Orders.Add(new OrderData(10262, "RATTC", 48.29, "Albuquerque", "Rattlesnake Canyon Grocery")); + } + + return Orders; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +### Converting Memory Stream to File Stream for Excel Export + +The Excel Export feature in Syncfusion Blazor DataGrid allows you to export the Grid data to an Excel workbook. In some cases, you may want to save the exported Excel document as a physical file on your system. This is useful for scenarios where you need to store or process the file outside of the browser context. + +To achieve this, you can use the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event in conjunction with the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_System_Int32_System_Int32_System_Int32_) 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 `ExportToExcelAsync` method generates the Excel document as a `MemoryStream`. You can then convert this memory stream into a `FileStream` and save the file to a specified location. + +The example below demonstrates how to achieve this by converting the memory stream into a file stream for saving the exported Excel document: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using System.IO; +@using Syncfusion.XlsIO +@using Syncfusion.ExcelExport; +@inject IJSRuntime JSRuntime + + + + + + + + + + + + +@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") //Id is combination of Grid's ID and itemname. + { + MemoryStream streamDoc = await Grid.ExportToExcelAsync(asMemoryStream: true); + + //Create a copy of streamDoc1 to read the memory stream. + MemoryStream copyOfStreamDoc1 = new MemoryStream(streamDoc.ToArray()); + + //For creating the exporting location with file name, for this need to specify the physical exact path of the file. + string filePaths = "C:Users/abc/Downloads/SampleTestExcel.xlsx"; + + // Create a FileStream to write the memoryStream contents to a file. + using (FileStream fileStream = File.Create(filePaths)) + { + // Copy the MemoryStream data to the FileStream. + copyOfStreamDoc1.CopyTo(fileStream); + } + } + } +} + +{% 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 %} + +### Merging Two Excel Memory Streams + +When merging two Excel memory streams and exporting the resulting file as an Excel workbook, you can leverage the capabilities of the [Syncfusion.Blazor.XlslO](https://www.nuget.org/packages/Syncfusion.XlsIO.Net.Core/) package to copy a worksheet between workbooks or within the same workbook. + +The example below demonstrates how to merge two memory streams and export that merged memory stream for browser download. + +In this example, there are two memory streams: *streamDoc1* and *streamDoc2*. streamDoc1 represents the normal Grid memory stream, while streamDoc2 contains the memory stream of a customized Grid using the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) class. The merging process combines the contents of streamDoc1 with streamDoc2, resulting in a combined workbook saved as a memory stream. This merged memory stream is then utilized to initiate the browser download. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using System.IO; +@using Syncfusion.XlsIO +@using Syncfusion.ExcelExport; +@inject IJSRuntime JSRuntime + + + + + + + + + + + + +@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") //Id is combination of Grid's ID and itemname. + { + //Merging two memory stream for excel export. + MemoryStream mergedStream = new MemoryStream(); + + MemoryStream streamDoc1 = await Grid.ExportToExcelAsync(asMemoryStream: true); + //Create a copy of streamDoc1 to access the memory stream. + MemoryStream copyOfStreamDoc1 = new MemoryStream(streamDoc1.ToArray()); + + //Cusotmized grid memory stream. + ExcelExportProperties ExcelProperties = new ExcelExportProperties(); + ExcelTheme Theme = new ExcelTheme(); + ExcelStyle ThemeStyle = new ExcelStyle() + { + BackColor = "#C67878" + }; + Theme.Header = ThemeStyle; + Theme.Record = ThemeStyle; + ExcelProperties.Theme = Theme; + MemoryStream streamDoc2 = await Grid.ExportToExcelAsync(asMemoryStream: true, ExcelProperties); + //Create a copy of streamDoc2 to access the memory stream. + MemoryStream copyOfStreamDoc2 = new MemoryStream(streamDoc2.ToArray()); + + using (ExcelEngine excelEngine = new ExcelEngine()) + { + IApplication application = excelEngine.Excel; + application.DefaultVersion = ExcelVersion.Xlsx; + IWorkbook workbook1 = application.Workbooks.Open(copyOfStreamDoc1); + IWorkbook workbook2 = application.Workbooks.Open(copyOfStreamDoc2); + + //Copy first worksheet from the workbook1 workbook to the workbook2 workbook + workbook2.Worksheets.AddCopy(workbook1.Worksheets[0]); + workbook2.ActiveSheetIndex = 1; + + //Saving merged workbook as memorystream. + workbook2.SaveAs(mergedStream); + } + + await JSRuntime.InvokeVoidAsync("saveAsFile", new object[] { "MemoryStreamMerge.xlsx", Convert.ToBase64String(mergedStream.ToArray()), true }); + } + } +} + +{% endhighlight %} + +{% highlight js tabtitle="wwwroot/scripts/saveAsFile.js" %} + +function saveAsFile(filename, bytesBase64) { + var link = document.createElement('a'); + link.download = filename; + link.href = "data:application/octet-stream;base64," + bytesBase64; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); +} + +{% endhighlight %} + +{% highlight c# tabtitle="OrderData.cs" %} + +public class OrderData +{ + public static List Orders = new List(); + + public OrderData(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 %} \ No newline at end of file