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/23.1.5/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/23.1.5/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;
}