@section ExternalDependencies {
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.10.1/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/3.8.0/exceljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
}
<div id="exportContainer">
@(Html.DevExtreme().Button()
.Text("Export multiple grids")
.Icon("xlsxfile")
.OnClick("exportGrids"))
</div>
@(Html.DevExtreme().TabPanel()
.ID("tabPanel")
.DataSource(new[] {
new { text = "Price" },
new { text = "Rating" }
})
.ItemTemplate(new JS("tabPanelTemplate"))
.ItemTitleTemplate(@<text><span class="dx-tab-text"><%- text %></span></text>)
.DeferRendering(false))
<script>
var priceCaption = "Price";
var ratingCaption = "Rating";
function tabPanelTemplate(itemData, itemIndex, itemElement) {
if (itemData.text === priceCaption) {
var $gridContainer = $("<div id='priceDataGrid'>");
itemElement.append($gridContainer);
$gridContainer.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",
key: "Product_ID"
},
select: ["Product_ID", "Product_Name", "Product_Sale_Price", "Product_Retail_Price"],
filter: ["Product_ID", "<", 10]
}
});
}
if (itemData.text === "Rating") {
var $gridContainer = $("<div id='ratingDataGrid'>");
itemElement.append($gridContainer);
$gridContainer.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]
}
});
}
}
function exportGrids() {
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");
});
});
}
</script>
using DevExtreme.MVC.Demos.Models;
using DevExtreme.MVC.Demos.Models.DataGrid;
using DevExtreme.MVC.Demos.Models.SampleData;
using System;
using System.Linq;
using System.Web.Mvc;
namespace DevExtreme.MVC.Demos.Controllers {
public class DataGridController : Controller {
public ActionResult ExcelJSExportMultipleGrids() {
return View();
}
}
}
#priceDataGrid, #ratingDataGrid {
padding: 10px;
}
#exportContainer {
text-align: right;
}
#tabPanel {
padding-top: 10px;
}