Angular Data Grid - Multiple Grids Export

import { bootstrapApplication } from '@angular/platform-browser'; import { Component, ViewChild, enableProdMode, provideZoneChangeDetection } from '@angular/core'; import { DxButtonModule, DxTabPanelModule, DxDataGridModule, DxDataGridComponent, } from 'devextreme-angular'; import { ArrayStore, DataSourceOptions } from 'devextreme-angular/common/data'; import { Workbook } from 'devextreme-exceljs-fork'; import { saveAs } from 'file-saver-es'; // Our demo infrastructure requires us to use 'file-saver-es'. We recommend that you use the official 'file-saver' package in your applications. import { exportDataGrid } from 'devextreme-angular/common/export/excel'; import { Service } from './app.service'; if (!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], providers: [Service], imports: [ DxButtonModule, DxTabPanelModule, DxDataGridModule, ], }) export class AppComponent { @ViewChild('priceDataGrid', { static: false }) priceDataGrid: DxDataGridComponent; @ViewChild('ratingDataGrid', { static: false }) ratingDataGrid: DxDataGridComponent; priceDataSource: DataSourceOptions; ratingDataSource: DataSourceOptions; constructor(service: Service) { this.priceDataSource = { store: new ArrayStore({ data: service.getProducts(), key: 'Product_ID', }), select: ['Product_ID', 'Product_Name', 'Product_Sale_Price', 'Product_Retail_Price'], filter: ['Product_ID', '<', 10], }; this.ratingDataSource = { store: new ArrayStore({ data: service.getProducts(), key: 'Product_ID', }), select: ['Product_ID', 'Product_Name', 'Product_Consumer_Rating', 'Product_Category'], filter: ['Product_ID', '<', 10], }; } exportGrids() { const context = this; const workbook = new 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' }; 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' }, }; } } } exportDataGrid({ worksheet: priceSheet, component: context.priceDataGrid.instance, topLeftCell: { row: 4, column: 2 }, customizeCell: ({ gridCell, excelCell }) => { setAlternatingRowsBackground(gridCell, excelCell); }, }).then(() => exportDataGrid({ worksheet: ratingSheet, component: context.ratingDataGrid.instance, 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'); }); }); } } bootstrapApplication(AppComponent, { providers: [ provideZoneChangeDetection({ eventCoalescing: true, runCoalescing: true }), ], });

::ng-deep #exportContainer { text-align: right; } ::ng-deep #tabPanel { padding-top: 10px; } ::ng-deep .data-grid { padding: 10px; }

import { Injectable } from '@angular/core'; export interface Product { Product_ID: number; Product_Name: string; Product_Sale_Price: number; Product_Retail_Price: number; Product_Consumer_Rating: number; Product_Category: string; } const products: Product[] = [ { Product_ID: 1, Product_Name: "HD Video Player", Product_Sale_Price: 220.00, Product_Retail_Price: 330.00, Product_Consumer_Rating: 4, Product_Category: "Video Players", }, { Product_ID: 2, Product_Name: "SuperHD Video Player", Product_Sale_Price: 275.00, Product_Retail_Price: 400.00, Product_Consumer_Rating: 4, Product_Category: "Video Players", }, { Product_ID: 3, Product_Name: "SuperPlasma 50", Product_Sale_Price: 1800.00, Product_Retail_Price: 2400.00, Product_Consumer_Rating: 4.5, Product_Category: "Televisions", }, { Product_ID: 4, Product_Name: "SuperLED 50", Product_Sale_Price: 1100.00, Product_Retail_Price: 1600.00, Product_Consumer_Rating: 5, Product_Category: "Televisions", }, { Product_ID: 5, Product_Name: "SuperLED 42", Product_Sale_Price: 1050.00, Product_Retail_Price: 1450.00, Product_Consumer_Rating: 5, Product_Category: "Televisions", }, { Product_ID: 6, Product_Name: "SuperLCD 55", Product_Sale_Price: 1045.00, Product_Retail_Price: 1350.00, Product_Consumer_Rating: 4.5, Product_Category: "Televisions", }, { Product_ID: 7, Product_Name: "SuperLCD 42", Product_Sale_Price: 999.00, Product_Retail_Price: 1200.00, Product_Consumer_Rating: 4, Product_Category: "Televisions", }, { Product_ID: 8, Product_Name: "SuperPlasma 65", Product_Sale_Price: 2900.00, Product_Retail_Price: 3500.00, Product_Consumer_Rating: 3, Product_Category: "Televisions", }, { Product_ID: 9, Product_Name: "SuperLCD 70", Product_Sale_Price: 3200.00, Product_Retail_Price: 4000.00, Product_Consumer_Rating: 4, Product_Category: "Televisions", }, ]; @Injectable() export class Service { getProducts() { return products; } }

<!DOCTYPE html> <html lang="en"> <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=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> <script src="https://cdn.jsdelivr.net/npm/zone.js@0.16.2/bundles/zone.umd.js"></script> <script src="./bundle.js" type="module"></script> </body> </html>