@section ExternalDependencies {
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
window.jsPDF = window.jspdf.jsPDF;
</script>
}
<div id="exportContainer">
@(Html.DevExtreme().Button()
.Text("Export multiple grids")
.Icon("exportpdf")
.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 === ratingCaption) {
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",
key: 'Product_ID',
},
select: ["Product_ID", "Product_Name", "Product_Consumer_Rating", "Product_Category"],
filter: ["Product_ID", "<", 10]
}
});
}
}
function setAlternatingRowsBackground(dataGrid, gridCell, pdfCell) {
if (gridCell.rowType === 'data') {
const rowIndex = dataGrid.getRowIndexByKey(gridCell.data.Product_ID);
if (rowIndex % 2 === 0) {
pdfCell.backgroundColor = '#D3D3D3';
}
}
}
function exportGrids() {
const doc = new jsPDF();
const priceDataGrid = $("#priceDataGrid").dxDataGrid("instance");
DevExpress.pdfExporter.exportDataGrid({
jsPDFDocument: doc,
component: priceDataGrid,
topLeft: { x: 7, y: 5 },
columnWidths: [20, 50, 50, 50],
customizeCell: ({ gridCell, pdfCell }) => {
setAlternatingRowsBackground(priceDataGrid, gridCell, pdfCell);
},
}).then(() => {
doc.addPage();
const ratingDataGrid = $("#ratingDataGrid").dxDataGrid("instance");
DevExpress.pdfExporter.exportDataGrid({
jsPDFDocument: doc,
component: ratingDataGrid,
topLeft: { x: 7, y: 5 },
columnWidths: [20, 50, 50, 50],
customizeCell: ({ gridCell, pdfCell }) => {
setAlternatingRowsBackground(ratingDataGrid, gridCell, pdfCell);
},
}).then(() => {
doc.save('MultipleGrids.pdf');
});
});
}
</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 PDFExportMultipleGrids() {
return View();
}
}
}
#priceDataGrid, #ratingDataGrid {
padding: 10px;
}
#exportContainer {
text-align: right;
}
#tabPanel {
padding-top: 10px;
}