Your search did not match any results.
Data Grid

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.

Backend API
Copy to CodeSandBox
Apply
Reset
<template> <div> <div id="exportContainer"> <DxButton text="Export multiple grids" icon="exportpdf" @click="exportGrids($event)" /> </div> <DxTabPanel id="tabPanel" :defer-rendering="false" > <DxItem title="Price"> <template #default> <DxDataGrid id="priceDataGrid" width="100%" :ref="priceGridRefKey" :data-source="priceDataSource" :show-borders="true" :row-alternation-enabled="true" > <DxColumn data-field="Product_ID" caption="ID" :width="50" /> <DxColumn data-field="Product_Name" caption="Name" /> <DxColumn data-field="Product_Sale_Price" caption="Sale Price" data-type="number" format="currency" /> <DxColumn data-field="Product_Retail_Price" caption="Retail Price" data-type="number" format="currency" /> </DxDataGrid> </template> </DxItem> <DxItem title="Rating"> <template #default> <DxDataGrid id="ratingDataGrid" width="100%" :ref="ratingGridRefKey" :data-source="ratingDataSource" :show-borders="true" :row-alternation-enabled="true" > <DxColumn data-field="Product_ID" caption="ID" :width="50" /> <DxColumn data-field="Product_Name" caption="Name" /> <DxColumn data-field="Product_Consumer_Rating" caption="Rating" /> <DxColumn data-field="Product_Category" caption="Category" /> </DxDataGrid> </template> </DxItem> </DxTabPanel> </div> </template> <script> import DxButton from 'devextreme-vue/button'; import DxTabPanel, { DxItem } from 'devextreme-vue/tab-panel'; import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid'; import { exportDataGrid } from 'devextreme/pdf_exporter'; import { jsPDF } from 'jspdf'; import 'devextreme/data/odata/store'; const priceGridRefKey = 'priceDataGrid'; const ratingGridRefKey = 'ratingDataGrid'; export default { components: { DxButton, DxTabPanel, DxItem, DxDataGrid, DxColumn, }, data() { return { priceGridRefKey, ratingGridRefKey, priceDataSource: { 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], }, ratingDataSource: { 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], }, }; }, computed: { priceGridInstance() { return this.$refs[priceGridRefKey].instance; }, ratingGridInstance() { return this.$refs[ratingGridRefKey].instance; }, }, methods: { exportGrids() { const context = this; // eslint-disable-next-line new-cap const doc = new jsPDF(); exportDataGrid({ jsPDFDocument: doc, component: context.priceGridInstance, topLeft: { x: 7, y: 5 }, columnWidths: [20, 50, 50, 50], customizeCell: ({ gridCell, pdfCell }) => { setAlternatingRowsBackground(context.priceGridInstance, gridCell, pdfCell); }, }).then(() => { doc.addPage(); exportDataGrid({ jsPDFDocument: doc, component: context.ratingGridInstance, topLeft: { x: 7, y: 5 }, columnWidths: [20, 50, 50, 50], customizeCell: ({ gridCell, pdfCell }) => { setAlternatingRowsBackground(context.ratingGridInstance, gridCell, pdfCell); }, }).then(() => { doc.save('MultipleGrids.pdf'); }); }); }, }, }; function setAlternatingRowsBackground(dataGrid, gridCell, pdfCell) { if (gridCell.rowType === 'data') { const rowIndex = dataGrid.getRowIndexByKey(gridCell.data.Product_ID); if (rowIndex % 2 === 0) { pdfCell.backgroundColor = '#D3D3D3'; } } } </script> <style scoped> #priceDataGrid, #ratingDataGrid { padding: 10px; } #exportContainer { text-align: right; } #tabPanel { padding-top: 10px; } </style>
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#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/22.1.5/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.5/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/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.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>
window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js', 'fflate': 'npm:fflate@0.4.8/esm/browser.js', 'jspdf': 'npm:jspdf@2.5.1/dist/jspdf.umd.min.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@22.1.5/cjs', 'devextreme-vue': 'npm:devextreme-vue@22.1.5', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.16/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.63/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.32/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.11', 'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.11/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@7.4.11/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js', '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.7.1/standalone.js', 'prettier/parser-html': 'npm:prettier@2.7.1/parser-html.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.11/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);