diff --git a/blazor/datagrid/excel-exporting.md b/blazor/datagrid/excel-exporting.md index 9141303ecb..076e9b7235 100644 --- a/blazor/datagrid/excel-exporting.md +++ b/blazor/datagrid/excel-exporting.md @@ -9,57 +9,375 @@ documentation: ug -# Excel Export in Blazor DataGrid Component +# Excel Export in Blazor DataGrid -The excel export allows exporting DataGrid data to Excel document. You need to use the - **ExcelExport** method for exporting. To enable Excel export in the datagrid, set the [AllowExcelExport](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowExcelExport) property as true. +The Excel or CSV exporting feature in the Blazor DataGrid allows exporting DataGrid data to an Excel or CSV document. This is useful when data needs to be shared or analyzed in a spreadsheet format. -```cshtml +To enable Excel export in the DataGrid, 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 enables the Excel or CSV export option in the DataGrid. + +To initiate the Excel export process, use the **ExcelExport** method provided by the DataGrid. This method exports the DataGrid data to an Excel document. + +To initiate the CSV export process, use the **CsvExport** method provided by the DataGrid. This method exports the DataGrid data to a CSV document. + +The following example demonstrates how to perform an Excel or CSV export action in the DataGrid: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - - + + - - - - + + + + +@code { + private SfGrid DefaultGrid; + public List OrderData { get; set; } + protected override void OnInitialized() + { + OrderData = OrderDetails.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. + { + await this.DefaultGrid.ExcelExport(); + } + else if (args.Item.Id == "Grid_csvexport") //Id is combination of Grid's ID and itemname. + { + await this.DefaultGrid.CsvExport(); + } + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List Order = new List(); + public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.ShipCountry = ShipCountry; + } + public static List GetAllRecords() + { + if (Order.Count == 0) + { + Order.Add(new OrderDetails(10248, "VINET", 32.38, "France")); + Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany")); + Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil")); + Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France")); + Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium")); + Order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil")); + Order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland")); + Order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland")); + Order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil")); + Order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela")); + Order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria")); + Order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico")); + Order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany")); + Order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil")); + Order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA")); + } + return Order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCountry { get; set; } +} +{% endhighlight %} +{% endtabs %} -@code{ - private SfGrid DefaultGrid; +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZroDghcrZRRryXw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - public List Orders { get; set; } +## Show spinner while exporting - public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args) +Showing a spinner while exporting in the DataGrid enhances the experience by displaying a spinner during the export process. This feature provides a visual indication of the export progress, improving the understanding of the exporting process. + +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` event. + +The `OnToolbarClick` event is triggered when a toolbar item in the DataGrid is clicked. Within the event handler, the code checks if the clicked item is related with Excel or CSV export, specifically the **Grid_excelexport** or **Grid_csvexport** item. If a match is found, the `ShowSpinnerAsync` method is used on the DataGrid instance to display the spinner. + +To hide the spinner after the export is completed, bind the `ExportComplete` event and use the `HideSpinnerAsync` method on the DataGrid instance. + +The following example demonstrates how to show and hide the spinner during Excel export in a Blazor DataGrid: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + +@code { + private SfGrid DefaultGrid; + public List OrderData { get; set; } + protected override void OnInitialized() { - if (args.Item.Id == "Grid_excelexport") //Id is combination of Grid's ID and itemname + OrderData = OrderDetails.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. { + await this.DefaultGrid.ShowSpinnerAsync(); await this.DefaultGrid.ExcelExport(); } + else if (args.Item.Id == "Grid_csvexport") //Id is combination of Grid's ID and itemname. + { + await this.DefaultGrid.ShowSpinnerAsync(); + await this.DefaultGrid.CsvExport(); + } + } + public void ExportCompleteHandler(object args) + { + this.DefaultGrid.HideSpinnerAsync(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List Order = new List(); + public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.ShipCountry = ShipCountry; + } + public static List GetAllRecords() + { + if (Order.Count == 0) + { + Order.Add(new OrderDetails(10248, "VINET", 32.38, "France")); + Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany")); + Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil")); + Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France")); + Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium")); + Order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil")); + Order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland")); + Order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland")); + Order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil")); + Order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela")); + Order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria")); + Order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico")); + Order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany")); + Order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil")); + Order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA")); + } + return Order; } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCountry { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhSZAVQrtEfpTSw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Binding custom data source while exporting + +The Blazor DataGrid allows exporting data to Excel or CSV format. The Excel or CSV export feature enables defining a custom data source during export, allowing the export of data that is not bound to the grid but retrieved or generated dynamically based on application logic. + +To export data using a custom data source, set 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 specifies the data source used during the export process. + +The following example demonstrates how to export the Blazor DataGrid using a dynamically defined custom data source. Calling the `ExcelExport` method and passing the `ExcelExportProperties` object ensures that the exported data is based on the specified data source. + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + +@code { + private SfGrid DefaultGrid; + public List OrderData { get; set; } protected override void OnInitialized() { - Orders = Enumerable.Range(1, 75).Select(x => new Order() + OrderData = OrderDetails.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. { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - }).ToList(); + ExcelExportProperties ExcelProperties = new ExcelExportProperties(); + ExcelProperties.DataSource = Orders; + await this.DefaultGrid.ExcelExport(ExcelProperties); + } + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List Order = new List(); + public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.ShipCountry = ShipCountry; + } + public static List GetAllRecords() + { + if (Order.Count == 0) + { + Order.Add(new OrderDetails(10248, "VINET", 32.38, "France")); + Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany")); + Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil")); + Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France")); + Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium")); + Order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil")); + Order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland")); + Order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland")); + Order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil")); + Order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela")); + Order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria")); + Order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico")); + Order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany")); + Order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil")); + Order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA")); + } + return Order; } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCountry { get; set; } +} +{% endhighlight %} +{% endtabs %} - public class Order +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtreDArcLiZPrhws?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Exporting with custom aggregate + +Exporting grid data with custom aggregates allows the inclusion of additional calculated values in the exported file based on specific requirements. This feature is useful for enhancing reports by incorporating custom aggregated values, such as conditional counts or sums, during export. + +In order to utilize custom aggregation, you need to specify the `Type` property as `Custom` and Within the **CustomAggregateFunction** function, it takes an input data that contains a result property. The function calculates the count of objects in this data where the **ShipCountry** field value is equal to **Brazil** and returns the count with a descriptive label. + +The following example shows how to export the grid with a custom aggregate that calculates the Brazil count of the ShipCountry column: + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + @{ +
+

Brazil Count: @CustomAggregateFunction()

+
+ } + + + + + + + + + + + + +@code { + private SfGrid DefaultGrid; + public List OrderData { get; set; } + protected override void OnInitialized() { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } + OrderData = OrderDetails.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. + { + await this.DefaultGrid.ExcelExport(); + } + } + private int CustomAggregateFunction() + { + return Orders.Count(x => x.ShipCountry.Contains("Brazil")); + } + public void ExcelAggregateTemplateInfoHandler(ExcelAggregateEventArgs args) + { + if ( args.Column.Field == "ShipCountry") + { + args.Cell.Value = $"Brazil Count: {CustomAggregateFunction()}"; + } } } -``` +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List Order = new List(); + public OrderDetails(int OrderID, string CustomerId, double Freight, string ShipCountry) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.ShipCountry = ShipCountry; + } + public static List GetAllRecords() + { + if (Order.Count == 0) + { + Order.Add(new OrderDetails(10248, "VINET", 32.38, "France")); + Order.Add(new OrderDetails(10249, "TOMSP", 11.61, "Germany")); + Order.Add(new OrderDetails(10250, "HANAR", 65.83, "Brazil")); + Order.Add(new OrderDetails(10251, "VICTE", 41.34, "France")); + Order.Add(new OrderDetails(10252, "SUPRD", 51.3, "Belgium")); + Order.Add(new OrderDetails(10253, "HANAR", 58.17, "Brazil")); + Order.Add(new OrderDetails(10254, "CHOPS", 22.98, "Switzerland")); + Order.Add(new OrderDetails(10255, "RICSU", 148.33, "Switzerland")); + Order.Add(new OrderDetails(10256, "WELLI", 13.97, "Brazil")); + Order.Add(new OrderDetails(10257, "HILAA", 81.91, "Venezuela")); + Order.Add(new OrderDetails(10258, "ERNSH", 140.51, "Austria")); + Order.Add(new OrderDetails(10259, "CENTC", 3.25, "Mexico")); + Order.Add(new OrderDetails(10260, "OTTIK", 55.09, "Germany")); + Order.Add(new OrderDetails(10261, "QUEDE", 3.05, "Brazil")); + Order.Add(new OrderDetails(10262, "RATTC", 48.29, "USA")); + } + return Order; + } + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public string ShipCountry { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrIXKVGVVFcNnlI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## To customize excel export @@ -1147,62 +1465,6 @@ This is demonstrated in the below sample code block, } ``` --> -## Custom data source - -Excel export provides an option to define the datasource dynamically before exporting. To export data dynamically, define it in the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_DataSource) property of the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) class. - -The following sample code demonstrates dynamically modifying the data source before exporting it, - -```cshtml -@using Syncfusion.Blazor.Grids - - - - - - - - - - - -@code{ - private SfGrid DefaultGrid; - - public List Orders { get; set; } - - public async Task OnToolbarClick(Syncfusion.Blazor.Navigations.ClickEventArgs args) - { - if (args.Item.Id == "Grid_excelexport") //Id is combination of Grid's ID and itemname - { - ExcelExportProperties ExcelProperties = new ExcelExportProperties(); - ExcelProperties.DataSource = Orders; - await this.DefaultGrid.ExcelExport(ExcelProperties); - } - } - protected override void OnInitialized() - { - Orders = Enumerable.Range(1, 15).Select(x => new Order() - { - OrderID = 1000 + x, - CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], - ShipCountry = (new string[] { "Germany", "UK", "USA", "Italy", "France" })[new Random().Next(5)], - Freight = 2.1 * x, - OrderDate = DateTime.Now.AddDays(-x), - }).ToList(); - } - - public class Order - { - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCountry { get; set; } - public DateTime? OrderDate { get; set; } - public double? Freight { get; set; } - } -} -``` - ## Customizing columns Excel export provides an option to define the columns dynamically before exporting. You can define the dynamic columns using [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html#Syncfusion_Blazor_Grids_ExcelExportProperties_Columns) property of the [ExcelExportProperties](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.ExcelExportProperties.html) class.