Export Multiple Grids
This demo shows two DataGrids in different tabs. Click the Export multiple grids button to export two grids and arrange them on different pages of the PDF document.
To implement this functionality, call the exportDataGrid(options) methods in a chain of Promises, one after another. Use the jsPDF.addPage() method to add a page in the PDF document.
You can use the customizeCell function to customize cell appearance in the PDF document. In this demo, the customizeCell function highlights alternate (even) rows.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
const DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', ($scope) => {
const priceCaption = 'Price';
const ratingCaption = 'Rating';
function setAlternatingRowsBackground(dataGrid, gridCell, pdfCell) {
if (gridCell.rowType === 'data') {
const rowIndex = dataGrid.getRowIndexByKey(gridCell.data.Product_ID);
if (rowIndex % 2 === 0) {
pdfCell.backgroundColor = '#D3D3D3';
}
}
}
$scope.buttonOptions = {
text: 'Export multiple grids',
icon: 'exportpdf',
onClick() {
// eslint-disable-next-line new-cap
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');
});
});
},
};
$scope.tabPanelOptions = {
dataSource: [{
title: priceCaption,
template() {
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',
key: 'Product_ID',
},
select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'],
filter: ['Product_ID', '<', 10],
},
});
},
}, {
title: ratingCaption,
template() {
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',
key: 'Product_ID',
},
select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'],
filter: ['Product_ID', '<', 10],
},
});
},
}],
itemTitleTemplate(itemData, itemIndex, itemElement) {
itemElement.append(`<span class='dx-tab-text'>${itemData.title}</span>`);
},
deferRendering: false,
};
});
<!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://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/22.2.3/css/dx.light.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdn3.devexpress.com/jslib/22.2.3/js/dx.all.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
window.jsPDF = window.jspdf.jsPDF;
</script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container" ng-app="DemoApp" ng-controller="DemoController">
<div id="exportContainer">
<div id="exportButton" dx-button="buttonOptions"></div>
</div>
<div id="tabPanel" dx-tab-panel="tabPanelOptions"></div>
</div>
</body>
</html>
#priceDataGrid,
#ratingDataGrid {
padding: 10px;
}
#exportContainer {
text-align: right;
}
#tabPanel {
padding-top: 10px;
}