$(function(){
var priceCaption = "Price";
var ratingCaption = "Rating";
$("#tabPanel").dxTabPanel({
dataSource: [{
title: priceCaption,
template: function() {
return $("<div id='priceDataGrid'>").dxDataGrid({
width: "100%",
columns: [
{ dataField: "Product_ID", caption: "ID", width: 50 },
{ dataField: "Product_Name", caption: "Name" },
{ dataField: "Product_Sale_Price", caption: "Sale Price", dataType: "number", format: "currency" },
{ dataField: "Product_Retail_Price", caption: "Retail Price", dataType: "number", format: "currency" }
],
showBorders: true,
rowAlternationEnabled: true,
dataSource: {
store: {
type: "odata",
url: "https://js.devexpress.com/Demos/DevAV/odata/Products"
},
select: ["Product_ID", "Product_Name", "Product_Sale_Price", "Product_Retail_Price"],
filter: ["Product_ID", "<", 10]
}
});
}
}, {
title: ratingCaption,
template: function() {
return $("<div id='ratingDataGrid'>").dxDataGrid({
width: "100%",
columns: [
{ dataField: "Product_ID", caption: "ID", width: 50 },
{ dataField: "Product_Name", caption: "Name" },
{ dataField: "Product_Consumer_Rating", caption: "Rating" },
{ dataField: "Product_Category", caption: "Category" }
],
showBorders: true,
rowAlternationEnabled: true,
dataSource: {
store: {
type: "odata",
url: "https://js.devexpress.com/Demos/DevAV/odata/Products"
},
select: ["Product_ID", "Product_Name", "Product_Consumer_Rating", "Product_Category"],
filter: ["Product_ID", "<", 10]
}
});
}
}],
itemTitleTemplate: function(itemData, itemIndex, itemElement) {
itemElement.append("<span class='dx-tab-text'>" + itemData.title + "</span>");
},
deferRendering: false
});
$("#exportButton").dxButton({
text: "Export multiple grids",
icon: "xlsxfile",
onClick: function() {
var dataGrid1 = $("#priceDataGrid").dxDataGrid("instance");
var dataGrid2 = $("#ratingDataGrid").dxDataGrid("instance");
var workbook = new ExcelJS.Workbook();
var priceSheet = workbook.addWorksheet(priceCaption);
var ratingSheet = workbook.addWorksheet(ratingCaption);
priceSheet.getRow(2).getCell(2).value = "Price";
priceSheet.getRow(2).getCell(2).font = { bold: true, size: 16, underline: "double" };
ratingSheet.getRow(2).getCell(2).value = "Rating";
ratingSheet.getRow(2).getCell(2).font = { bold: true, size: 16, underline: "double" };
function setAlternatingRowsBackground(gridCell, excelCell) {
if(gridCell.rowType === "header" || gridCell.rowType === "data") {
if(excelCell.fullAddress.row % 2 === 0) {
excelCell.fill = { type: "pattern", pattern: "solid", fgColor: { argb: "D3D3D3" }, bgColor: { argb: "D3D3D3" }};
}
}
}
DevExpress.excelExporter.exportDataGrid({
worksheet: priceSheet,
component: dataGrid1,
topLeftCell: { row: 4, column: 2 },
customizeCell: function(options) {
setAlternatingRowsBackground(options.gridCell, options.excelCell)
}
}).then(function() {
return DevExpress.excelExporter.exportDataGrid({
worksheet: ratingSheet,
component: dataGrid2,
topLeftCell: { row: 4, column: 2 },
customizeCell: function(options) {
setAlternatingRowsBackground(options.gridCell, options.excelCell)
}
});
}).then(function() {
workbook.xlsx.writeBuffer().then(function(buffer) {
saveAs(new Blob([buffer], { type: "application/octet-stream" }), "MultipleGrids.xlsx");
});
});
}
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/3.3.1/exceljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.5/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/20.2.5/js/dx.all.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="exportContainer">
<div id="exportButton"></div>
</div>
<div id="tabPanel"></div>
</div>
</body>
</html>
#priceDataGrid, #ratingDataGrid {
padding: 10px;
}
#exportContainer {
text-align: right;
}
#tabPanel {
padding-top: 10px;
}