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.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
import React, { useCallback, useRef } from 'react';
import Button from 'devextreme-react/button';
import TabPanel, { Item } from 'devextreme-react/tab-panel';
import DataGrid, { Column } from 'devextreme-react/data-grid';
import { exportDataGrid } from 'devextreme/pdf_exporter';
import { jsPDF } from 'jspdf';
import 'devextreme/data/odata/store';
const priceDataSource = {
store: {
type: 'odata' as const,
version: 2,
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],
};
const ratingDataSource = {
store: {
type: 'odata' as const,
version: 2,
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],
};
const setAlternatingRowsBackground = (dataGrid: DataGrid['instance'], gridCell, pdfCell) => {
if (gridCell.rowType === 'data') {
const rowIndex = dataGrid.getRowIndexByKey(gridCell.data.Product_ID);
if (rowIndex % 2 === 0) {
pdfCell.backgroundColor = '#D3D3D3';
}
}
};
const App = () => {
const priceGridRef = useRef(null);
const ratingGridRef = useRef(null);
const exportGrids = useCallback(() => {
// eslint-disable-next-line new-cap
const doc = new jsPDF();
exportDataGrid({
jsPDFDocument: doc,
component: priceGridRef.current.instance,
topLeft: { x: 7, y: 5 },
columnWidths: [20, 50, 50, 50],
customizeCell: ({ gridCell, pdfCell }) => {
setAlternatingRowsBackground(priceGridRef.current.instance, gridCell, pdfCell);
},
}).then(() => {
doc.addPage();
exportDataGrid({
jsPDFDocument: doc,
component: ratingGridRef.current.instance,
topLeft: { x: 7, y: 5 },
columnWidths: [20, 50, 50, 50],
customizeCell: ({ gridCell, pdfCell }) => {
setAlternatingRowsBackground(ratingGridRef.current.instance, gridCell, pdfCell);
},
}).then(() => {
doc.save('MultipleGrids.pdf');
});
});
}, []);
return (
<div>
<div id="exportContainer">
<Button
text="Export multiple grids"
icon="exportpdf"
onClick={exportGrids}
/>
</div>
<TabPanel id="tabPanel" deferRendering={false}>
<Item title="Price">
<DataGrid
id="priceDataGrid"
ref={priceGridRef}
dataSource={priceDataSource}
showBorders={true}
rowAlternationEnabled={true}
>
<Column dataField="Product_ID" caption="ID" width={50} />
<Column dataField="Product_Name" caption="Name" />
<Column dataField="Product_Sale_Price" caption="Sale Price" dataType="number" format="currency" />
<Column dataField="Product_Retail_Price" caption="Retail Price" dataType="number" format="currency" />
</DataGrid>
</Item>
<Item title="Rating">
<DataGrid
id="ratingDataGrid"
ref={ratingGridRef}
dataSource={ratingDataSource}
showBorders={true}
rowAlternationEnabled={true}
>
<Column dataField="Product_ID" caption="ID" width={50} />
<Column dataField="Product_Name" caption="Name" />
<Column dataField="Product_Consumer_Rating" caption="Rating" />
<Column dataField="Product_Category" caption="Category" />
</DataGrid>
</Item>
</TabPanel>
</div>
);
};
export default App;
import React, { useCallback, useRef } from 'react';
import Button from 'devextreme-react/button';
import TabPanel, { Item } from 'devextreme-react/tab-panel';
import DataGrid, { Column } from 'devextreme-react/data-grid';
import { exportDataGrid } from 'devextreme/pdf_exporter';
import { jsPDF } from 'jspdf';
import 'devextreme/data/odata/store';
const priceDataSource = {
store: {
type: 'odata',
version: 2,
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],
};
const ratingDataSource = {
store: {
type: 'odata',
version: 2,
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],
};
const setAlternatingRowsBackground = (dataGrid, gridCell, pdfCell) => {
if (gridCell.rowType === 'data') {
const rowIndex = dataGrid.getRowIndexByKey(gridCell.data.Product_ID);
if (rowIndex % 2 === 0) {
pdfCell.backgroundColor = '#D3D3D3';
}
}
};
const App = () => {
const priceGridRef = useRef(null);
const ratingGridRef = useRef(null);
const exportGrids = useCallback(() => {
// eslint-disable-next-line new-cap
const doc = new jsPDF();
exportDataGrid({
jsPDFDocument: doc,
component: priceGridRef.current.instance,
topLeft: { x: 7, y: 5 },
columnWidths: [20, 50, 50, 50],
customizeCell: ({ gridCell, pdfCell }) => {
setAlternatingRowsBackground(priceGridRef.current.instance, gridCell, pdfCell);
},
}).then(() => {
doc.addPage();
exportDataGrid({
jsPDFDocument: doc,
component: ratingGridRef.current.instance,
topLeft: { x: 7, y: 5 },
columnWidths: [20, 50, 50, 50],
customizeCell: ({ gridCell, pdfCell }) => {
setAlternatingRowsBackground(ratingGridRef.current.instance, gridCell, pdfCell);
},
}).then(() => {
doc.save('MultipleGrids.pdf');
});
});
}, []);
return (
<div>
<div id="exportContainer">
<Button
text="Export multiple grids"
icon="exportpdf"
onClick={exportGrids}
/>
</div>
<TabPanel
id="tabPanel"
deferRendering={false}
>
<Item title="Price">
<DataGrid
id="priceDataGrid"
ref={priceGridRef}
dataSource={priceDataSource}
showBorders={true}
rowAlternationEnabled={true}
>
<Column
dataField="Product_ID"
caption="ID"
width={50}
/>
<Column
dataField="Product_Name"
caption="Name"
/>
<Column
dataField="Product_Sale_Price"
caption="Sale Price"
dataType="number"
format="currency"
/>
<Column
dataField="Product_Retail_Price"
caption="Retail Price"
dataType="number"
format="currency"
/>
</DataGrid>
</Item>
<Item title="Rating">
<DataGrid
id="ratingDataGrid"
ref={ratingGridRef}
dataSource={ratingDataSource}
showBorders={true}
rowAlternationEnabled={true}
>
<Column
dataField="Product_ID"
caption="ID"
width={50}
/>
<Column
dataField="Product_Name"
caption="Name"
/>
<Column
dataField="Product_Consumer_Rating"
caption="Rating"
/>
<Column
dataField="Product_Category"
caption="Category"
/>
</DataGrid>
</Item>
</TabPanel>
</div>
);
};
export default App;
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.tsx';
ReactDOM.render(
<App />,
document.getElementById('app'),
);
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types@15.8.1/prop-types.js',
'fflate': 'npm:fflate@0.4.8/esm/browser.js',
'jspdf': 'npm:jspdf@2.5.1/dist/jspdf.umd.min.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@23.2.6/cjs',
'devextreme-react': 'npm:devextreme-react@23.2.6/cjs',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.6.4/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.5/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.54/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.4/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.4/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: '',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.12/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html>
<html>
<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" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.2.6/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript">
System.import("./index.tsx");
</script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
</body>
</html>
#priceDataGrid,
#ratingDataGrid {
padding: 10px;
}
#exportContainer {
text-align: right;
}
#tabPanel {
padding-top: 10px;
}