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
saveAsExcelmethod to trigger the data export of each Grid. - Handle the
ExcelExportevent 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.
//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"))
)
)
<script src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script>
// Use Promises to sync the exports.
var promises = [
$.Deferred(),
$.Deferred()
];
function exportDataClick(e) { //"Export to Excel" button "click" event handler.
// Trigger export of the "products" Grid.
$("#products").data("kendoGrid").saveAsExcel();
// Trigger export of the "orders" Grid.
$("#orders").data("kendoGrid").saveAsExcel();
// Wait for both exports to finish.
$.when.apply(null, promises)
.then(function (productsWorkbook, ordersWorkbook) {
// Create a new workbook using the sheets of the "products" and "orders" workbooks.
var sheets = [
productsWorkbook.sheets[0],
ordersWorkbook.sheets[0]
];
sheets[0].title = "Products";
sheets[1].title = "Orders";
var workbook = new kendo.ooxml.Workbook({
sheets: sheets
});
// Save the new workbook.
workbook.toDataURLAsync().then(function(dataURL) {
kendo.saveAs({
dataURI: dataURL,
fileName: "ProductsAndOrders.xlsx"
});
});
promises = [
$.Deferred(),
$.Deferred()
];
});
}
function products_excelExport(e) { //"ExcelExport" event handler of "products" Grid.
e.preventDefault();
promises[0].resolve(e.workbook);
}
function orders_excelExport(e) { //"ExcelExport" event handler of "orders" Grid.
e.preventDefault();
promises[1].resolve(e.workbook);
}
</script>
For a runnable example based on the code above, refer to the REPL project on exporting multiple Grids to Excel.