New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Exporting Multiple Grids to Excel
Environment
Product Version | 2022.2.621 |
Product | Grid for ASP.NET Core |
Description
How can I export multiple Grids to the same Excel file?
Solution
The example below relies on the following key steps:
- Create an external button to export the data when it is clicked.
- Use the client-side
saveAsExcel
method to trigger the data export of each Grid. - Handle the
ExcelExport
event of the two Grids and prevent their default action. - Create a new Workbook by using the sheets of the Grids Workbooks and save it through the
kendo.saveAs()
method.
Index.cshtml
//Export to Excel Button
@(Html.Kendo().Button()
.Name("exportData")
.Content("Export to Excel")
.Icon("file-excel")
.Events(ev => ev.Click("exportDataClick"))
)
//First Grid
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
.Name("products")
.Columns(columns =>
{
columns.Bound(p => p.ProductName);
columns.Bound(p => p.UnitPrice);
columns.Bound(p => p.UnitsOnOrder);
columns.Bound(p => p.UnitsInStock);
})
.Events(e => e.ExcelExport("products_excelExport"))
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Excel_Export_Read", "Grid"))
)
)
//Second Grid
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("orders")
.Columns(columns => {
columns.Bound(p => p.OrderID).Filterable(false).Width(100);
columns.Bound(p => p.Freight).Width(100);
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
columns.Bound(p => p.ShipName);
columns.Bound(p => p.ShipCity).Width(150);
})
.Events(e => e.ExcelExport("orders_excelExport"))
.Pageable()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
For a runnable example based on the code above, refer to the REPL project on exporting multiple Grids to Excel.