Your search did not match any results.
Data Grid

Export Multiple Grids

The exportDataGrid() method allows users to export multiple grids to one Excel document. Grids are exported consequently in a chain of Promises.

In this demo, this functionality is used to export two DataGrids into separate worksheets in the same workbook. Starting position of each exported grid is set using the topLeftCell option.

Use the customizeCell method to customize the exported worksheets.

Copy to CodeSandBox
Apply
Reset
<template> <div> <div id="exportContainer"> <DxButton text="Export multiple grids" icon="xlsxfile" @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/excel_exporter'; import ExcelJS from 'exceljs'; import saveAs from 'file-saver'; /* // Use this import for codeSandBox import FileSaver from 'file-saver'; */ 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' }, 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' }, select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'], filter: ['Product_ID', '<', 10] } }; }, computed: { priceGridInstance: function() { return this.$refs[priceGridRefKey].instance; }, ratingGridInstance: function() { return this.$refs[ratingGridRefKey].instance; } }, methods: { exportGrids() { const context = this; const workbook = new ExcelJS.Workbook(); const priceSheet = workbook.addWorksheet('Price'); const ratingSheet = workbook.addWorksheet('Rating'); priceSheet.getRow(2).getCell(2).value = 'Price'; priceSheet.getRow(2).getCell(2).font = { bold: true, size: 16, underline: 'double' }; ratingSheet.getRow(2).getCell(2).value = 'Rating'; ratingSheet.getRow(2).getCell(2).font = { bold: true, size: 16, underline: 'double' }; exportDataGrid({ worksheet: priceSheet, component: context.priceGridInstance, topLeftCell: { row: 4, column: 2 }, customizeCell: ({ gridCell, excelCell }) => { setAlternatingRowsBackground(gridCell, excelCell); } }).then(() => { return exportDataGrid({ worksheet: ratingSheet, component: context.ratingGridInstance, topLeftCell: { row: 4, column: 2 }, customizeCell: ({ gridCell, excelCell }) => { setAlternatingRowsBackground(gridCell, excelCell); } }); }).then(() => { workbook.xlsx.writeBuffer().then((buffer) => { saveAs(new Blob([buffer], { type: 'application/octet-stream' }), 'MultipleGrids.xlsx'); }); }); } } }; function setAlternatingRowsBackground(gridCell, excelCell) { if(gridCell.rowType === 'header' || gridCell.rowType === 'data') { if(excelCell.fullAddress.row % 2 === 0) { excelCell.fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'D3D3D3' }, bgColor: { argb: '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/20.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.3/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>
System.config({ transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader' }, }, 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', 'exceljs': 'npm:exceljs@1.7.0/dist/exceljs.js', 'file-saver': 'npm:file-saver@1.3.8/FileSaver.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.25.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.3', 'devextreme-vue': 'npm:devextreme-vue@20.2.3', 'jszip': 'npm:jszip@3.5.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.9.5/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.0/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.0/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.5/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.5/hooks/dist/hooks.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' }, 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' } }, babelOptions: { sourceMaps: false, stage0: true } });