Export Multiple Grids
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Operating System | All |
| Browser | All |
| Browser Version | All |
Description
How can I export two Kendo UI Grids for jQuery in the same Excel document?
Solution
The following example demonstrates how to export two Grids in the same Excel document.
Each Grid is exported in a separate Excel sheet. For additional information about how Excel documents work, refer to the introductory help topic on Excel.
<button id="export" class="k-button"><span class="k-icon k-i-excel"></span>Export to Excel</button>
<div id="products"></div>
<div id="orders"></div>
<script>
// used to sync the exports
var promises = [
$.Deferred(),
$.Deferred()
];
$("#export").click(function(e){
// 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"
});
});
});
});
$("#products").kendoGrid({
dataSource: {
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Products",
dataType: "jsonp"
}
},
pageSize: 20
},
height: 550,
pageable: true,
excelExport: function(e) {
e.preventDefault();
promises[0].resolve(e.workbook);
}
});
$("#orders").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
pageSize: 20,
serverPaging: true
},
height: 550,
pageable: true,
columns: [
{ field:"OrderID" },
{ field: "ShipName", title: "Ship Name" },
{ field: "ShipCity", title: "Ship City" }
],
excelExport: function(e) {
e.preventDefault();
promises[1].resolve(e.workbook);
}
});
</script>