Excel exporting in Blazor DataGrid
10 Nov 202524 minutes to read
The Excel and CSV exporting feature in the Syncfusion® Blazor DataGrid enables exporting Grid data to spreadsheet formats for external analysis or sharing.
To enable Excel export, set the AllowExcelExport property to true. This property activates the export functionality in the Grid.
To initiate Excel export, use the ExportToExcelAsync method. This method exports the Grid data to an Excel document.
To initiate CSV export, use the ExportToCsvAsync method. This method exports the Grid data to a CSV document.
@using Syncfusion.Blazor.Grids
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowPaging="true" AllowExcelExport="true" Toolbar="@(new List<string>() { "ExcelExport" ,"CsvExport" })" Height="348">
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150" />
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> 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.
{
await Grid.ExportToExcelAsync();
}
else if (args.Item.Id == "Grid_csvexport")
{
await Grid.ExportToCsvAsync();
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
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<OrderData> 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; }
}Show spinner while exporting
Displaying a spinner during export operations in the Syncfusion® Blazor DataGrid provides a visual indication of progress and improves export feedback.
To show a spinner during export:
- Handle the OnToolbarClick event.
- Call ShowSpinnerAsync before invoking export to display the spinner.
- Use ExportToExcelAsync or ExportToCsvAsync to perform export.
- Handle the ExportComplete event to call HideSpinnerAsync to hide the spinner.
@using Syncfusion.Blazor.Grids
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowPaging="true" AllowExcelExport="true" Toolbar="@(new List<string>() { "ExcelExport" })" Height="348">
<GridEvents ExportComplete="ExportCompleteHandler" OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150" />
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Width="150" Format="C2" TextAlign="TextAlign.Right" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> 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.
{
// Show spinner while exporting.
await Grid.ShowSpinnerAsync();
await Grid.ExportToExcelAsync();
}
}
public void ExportCompleteHandler(object args)
{
// Hide spinner after export completes.
Grid.HideSpinnerAsync();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
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<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Random random = new Random();
var customerIDs = new[] { "VINET", "TOMSP", "HANAR", "VICTE", "SUPRD", "CHOPS", "RICSU", "WELLI", "HILAA", "ERNSH", "CENTC", "OTTIK", "QUEDE", "RATTC" };
var cities = new[] { "Reims", "Münster", "Rio de Janeiro", "Lyon", "Charleroi", "Bern", "Genève", "Resende", "San Cristóbal", "Graz", "México D.F.", "Köln", "Rio de Janeiro", "Albuquerque" };
for (int i = 1; i <= 20000; i++)
{
var orderID = i;
var customerID = customerIDs[random.Next(customerIDs.Length)];
var freight = Math.Round(random.NextDouble() * 100, 2); // Random freight amount between 0 and 100
var shipCity = cities[random.Next(cities.Length)];
Orders.Add(new OrderData(orderID, customerID, freight, shipCity));
}
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public double Freight { get; set; }
public string ShipCity { get; set; }
}Binding custom data source while exporting
The Syncfusion® Blazor DataGrid supports exporting data to Excel or CSV format using a custom data source. This capability allows exporting data that is not directly bound to the Grid, including data generated or retrieved dynamically.
To export using a custom data source:
- Create a custom data collection to be exported.
- Define the DataSource property within an ExcelExportProperties object.
- Handle the OnToolbarClick event.
- Pass the
ExcelExportPropertiesobject to the ExportToExcelAsync method.
@using Syncfusion.Blazor.Grids
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowPaging="true" AllowExcelExport="true" Toolbar="@(new List<string>() { "ExcelExport" })" Height="348">
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="150" />
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> 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.
{
var filteredData = Orders.Where(x => x.OrderID <= 10255).ToList();
ExcelExportProperties exportProperties = new ExcelExportProperties
{
DataSource = filteredData
};
await Grid.ExportToExcelAsync(exportProperties);
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, string shipCity, string shipName)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.ShipCity = shipCity;
this.ShipName = shipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Exporting with custom aggregate
Exporting Syncfusion® Blazor DataGrid data with custom aggregates enables inclusion of calculated values in the exported file based on specific conditions. This feature supports enhanced reporting and analysis by incorporating tailored aggregate information.
To export with a custom aggregate:
- Set the Type property of the aggregate column to Custom.
- Assign a function to the
CustomAggregateproperty to calculate the required value. - Display the calculated value in the Grid using a FooterTemplate.
- Handle the ExcelAggregateTemplateInfo event.
- Assign the calculated value to args.Cell.Value inside the event handler to include it in the exported Excel file.
- Trigger export using the ExportToExcelAsync method.
@using Syncfusion.Blazor.Grids
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowExcelExport="true" Toolbar="@(new List<string>() { "ExcelExport" })" Height="348">
<GridAggregates>
<GridAggregate>
<GridAggregateColumns>
<GridAggregateColumn Field=@nameof(OrderData.ShipCountry) Type="AggregateType.Custom">
<FooterTemplate>
@{
<div>
<p>Brazil Count: @CustomAggregateFunction()</p>
</div>
}
</FooterTemplate>
</GridAggregateColumn>
</GridAggregateColumns>
</GridAggregate>
</GridAggregates>
<GridEvents OnToolbarClick="ToolbarClickHandler" ExcelAggregateTemplateInfo="ExcelAggregateTemplateInfoHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrderData.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Visible="false" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> 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.
{
await Grid.ExportToExcelAsync();
}
}
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()}";
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, DateTime orderDate, double freight, string shipCountry)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.OrderDate = orderDate;
this.Freight = freight;
this.ShipCountry = shipCountry;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", new DateTime(2023, 1, 15), 32.38, "France"));
Orders.Add(new OrderData(10249, "TOMSP", new DateTime(2023, 2, 10), 11.61, "Germany"));
Orders.Add(new OrderData(10250, "HANAR", new DateTime(2023, 3, 5), 65.83, "Brazil"));
Orders.Add(new OrderData(10251, "VICTE", new DateTime(2023, 4, 20), 41.34, "Brazil"));
Orders.Add(new OrderData(10252, "SUPRD", new DateTime(2023, 5, 25), 51.30, "Belgium"));
Orders.Add(new OrderData(10253, "HANAR", new DateTime(2023, 6, 15), 58.17, "Brazil"));
Orders.Add(new OrderData(10254, "CHOPS", new DateTime(2023, 7, 10), 22.98, "Switzerland"));
Orders.Add(new OrderData(10255, "RICSU", new DateTime(2023, 8, 18), 148.33, "France"));
Orders.Add(new OrderData(10256, "WELLI", new DateTime(2023, 9, 7), 13.97, "Brazil"));
Orders.Add(new OrderData(10257, "HILAA", new DateTime(2023, 10, 3), 81.91, "Mexico"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime OrderDate { get; set; }
public double Freight { get; set; }
public string ShipCountry { get; set; }
}Exporting with custom date format
The exporting functionality in the Syncfusion® Blazor DataGrid enables exporting Grid data with customized date formats. This capability is useful for generating reports or documents that require specific date representations.
To export with a custom date format:
- Apply the desired format string to the Format property of the date column.
- Set the Type property of the column to ColumnType.Date.
- Handle the OnToolbarClick event.
- Call ExportToExcelAsync to export the Grid with the applied date format.
@using Syncfusion.Blazor.Grids
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowExcelExport="true" Toolbar="@(new List<string>() { "ExcelExport" })" Height="348">
<GridEvents OnToolbarClick="ToolbarClickHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrderData.OrderDate) HeaderText="Order Date" Format="ddd, MMM d, ''yy" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" Visible="false" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> 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.
{
await Grid.ExportToExcelAsync();
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, DateTime orderDate, double freight, string shipCountry)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.OrderDate = orderDate;
this.Freight = freight;
this.ShipCountry = shipCountry;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", new DateTime(2023, 1, 15), 32.38, "France"));
Orders.Add(new OrderData(10249, "TOMSP", new DateTime(2023, 2, 10), 11.61, "Germany"));
Orders.Add(new OrderData(10250, "HANAR", new DateTime(2023, 3, 5), 65.83, "Brazil"));
Orders.Add(new OrderData(10251, "VICTE", new DateTime(2023, 4, 20), 41.34, "Brazil"));
Orders.Add(new OrderData(10252, "SUPRD", new DateTime(2023, 5, 25), 51.30, "Belgium"));
Orders.Add(new OrderData(10253, "HANAR", new DateTime(2023, 6, 15), 58.17, "Brazil"));
Orders.Add(new OrderData(10254, "CHOPS", new DateTime(2023, 7, 10), 22.98, "Switzerland"));
Orders.Add(new OrderData(10255, "RICSU", new DateTime(2023, 8, 18), 148.33, "France"));
Orders.Add(new OrderData(10256, "WELLI", new DateTime(2023, 9, 7), 13.97, "Brazil"));
Orders.Add(new OrderData(10257, "HILAA", new DateTime(2023, 10, 3), 81.91, "Mexico"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime OrderDate { get; set; }
public double Freight { get; set; }
public string ShipCountry { get; set; }
}Passing additional parameters to the server when exporting
Passing additional parameters to the server during data export in the Syncfusion® Blazor DataGrid provides flexibility to include extra information or customize the export process based on specific requirements.
To pass additional parameters during export:
- Handle the OnToolbarClick event.
- Use the Query property of the Grid to define a new query.
- Call the AddParams method to append custom parameters to the query.
- Invoke ExportToExcelAsync to initiate export.
- Handle the ExportComplete event to restore the original query state after export.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Data
<p>@message</p>
<SfGrid ID="Grid" @ref="Grid" DataSource="@Orders" AllowExcelExport="true" Toolbar="@(new List<string>() { "ExcelExport" })" Height="348">
<GridEvents OnToolbarClick="ToolbarClickHandler" ExportComplete="ExportCompleteHandler" TValue="OrderData"></GridEvents>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120" IsPrimaryKey="true" />
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="150" />
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="150" />
</GridColumns>
</SfGrid>
<style>
p{
color: red;
text-align:center;
}
</style>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
private string message = "";
private Query queryClone;
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.
{
queryClone = this.Grid?.Query;
Grid!.Query = new Query().AddParams("recordcount", "15");
if (Grid!.Query.Queries.Params?.Count > 0)
{
var param = Grid.Query.Queries.Params.First();
message = $"Key: {param.Key} and Value: {param.Value?.ToString()} on {args.Item.Text}";
}
await Grid.ExportToExcelAsync();
}
}
public void ExportCompleteHandler(object args)
{
if (queryClone != null)
{
Grid!.Query = queryClone;
}
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData(int orderID, string customerID, string shipCity, string shipName)
{
this.OrderID = orderID;
this.CustomerID = customerID;
this.ShipCity = shipCity;
this.ShipName = shipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count == 0)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Chevalier"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Import Export"));
Orders.Add(new OrderData(10257, "HILAA", "San Cristóbal", "Hila Alimentos"));
Orders.Add(new OrderData(10258, "ERNSH", "Graz", "Ernst Handel"));
Orders.Add(new OrderData(10259, "CENTC", "México D.F.", "Centro comercial"));
Orders.Add(new OrderData(10260, "OTTIK", "Köln", "Ottilies Käseladen"));
Orders.Add(new OrderData(10261, "QUEDE", "Rio de Janeiro", "Que delícia"));
Orders.Add(new OrderData(10262, "RATTC", "Albuquerque", "Rattlesnake Canyon Grocery"));
}
return Orders;
}
public int OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}