Cell Customization

import { NgModule, Component, enableProdMode } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { DxDataGridModule } from 'devextreme-angular'; import { Service, Company } from './app.service'; import { exportDataGrid } from 'devextreme/excel_exporter'; import ExcelJS from 'exceljs'; import saveAs from 'file-saver'; /* // Use this import for codeSandBox import * as ExcelJS from "exceljs/dist/exceljs.min.js"; import * as FileSaver from "file-saver"; */ if(!/localhost/.test(document.location.host)) { enableProdMode(); } @Component({ selector: 'demo-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'], providers: [Service] }) export class AppComponent { companies: Company[]; constructor(private service: Service) { this.companies = service.getCompanies(); } onExporting(e) { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet('Companies'); // https://github.com/exceljs/exceljs#columns worksheet.columns = [ { width: 5 }, { width: 30 }, { width: 25 }, { width: 15 }, { width: 25 }, { width: 40 } ]; exportDataGrid({ component: e.component, worksheet: worksheet, keepColumnWidths: false, topLeftCell: { row: 2, column: 2 }, customizeCell: function(options) { const { gridCell, excelCell } = options; if(gridCell.rowType === "data") { if(gridCell.column.dataField === 'Phone') { excelCell.value = parseInt(gridCell.value); // https://github.com/exceljs/exceljs#number-formats excelCell.numFmt = '[<=9999999]###-####;(###) ###-####'; } if(gridCell.column.dataField === 'Website') { // https://github.com/exceljs/exceljs#hyperlink-value excelCell.value = { text: gridCell.value, hyperlink: gridCell.value }; // https://github.com/exceljs/exceljs#fonts excelCell.font = { color: { argb: 'FF0000FF' }, underline: true }; // https://github.com/exceljs/exceljs#alignment excelCell.alignment = { horizontal: 'left' }; } } if(gridCell.rowType === "group") { // https://github.com/exceljs/exceljs#fills excelCell.fill = { type: 'pattern', pattern:'solid', fgColor: { argb: "BEDFE6" } }; } if(gridCell.rowType === "totalFooter" && excelCell.value) { excelCell.font.italic = true; } } }).then(function() { workbook.xlsx.writeBuffer().then(function(buffer) { saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx"); }); }); e.cancel = true; } phoneNumberFormat(value) { const USNumber = value.match(/(\d{3})(\d{3})(\d{4})/); return `(${ USNumber[1] }) ${ USNumber[2] }-${ USNumber[3] }`; } } @NgModule({ imports: [ BrowserModule, DxDataGridModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } platformBrowserDynamic().bootstrapModule(AppModule);

#gridContainer { height: 436px; }

import { Injectable } from '@angular/core'; export class Company { ID: number; Name: string; Address: string; City: string; State: string; Zipcode: number; Phone: string; Fax: string; Website: string; } const companies: Company[] = [{ "ID": 1, "Name": "Super Mart of the West", "Address": "702 SW 8th Street", "City": "Bentonville", "State": "Arkansas", "Zipcode": 72716, "Phone": "8005552797", "Fax": "(800) 555-2171", "Website": "http://nowebsitesupermart.com" }, { "ID": 2, "Name": "Electronics Depot", "Address": "2455 Paces Ferry Road NW", "City": "Atlanta", "State": "Georgia", "Zipcode": 30339, "Phone": "8005953232", "Fax": "(800) 595-3231", "Website": "http://nowebsitedepot.com" }, { "ID": 3, "Name": "K&S Music", "Address": "1000 Nicllet Mall", "City": "Minneapolis", "State": "Minnesota", "Zipcode": 55403, "Phone": "6123046073", "Fax": "(612) 304-6074", "Website": "http://nowebsitemusic.com" }, { "ID": 4, "Name": "Tom's Club", "Address": "999 Lake Drive", "City": "Issaquah", "State": "Washington", "Zipcode": 98027, "Phone": "8009552292", "Fax": "(800) 955-2293", "Website": "http://nowebsitetomsclub.com" }, { "ID": 5, "Name": "E-Mart", "Address": "3333 Beverly Rd", "City": "Hoffman Estates", "State": "Illinois", "Zipcode": 60179, "Phone": "8472862500", "Fax": "(847) 286-2501", "Website": "http://nowebsiteemart.com" }, { "ID": 6, "Name": "Walters", "Address": "200 Wilmot Rd", "City": "Deerfield", "State": "Illinois", "Zipcode": 60015, "Phone": "8479402500", "Fax": "(847) 940-2501", "Website": "http://nowebsitewalters.com" }, { "ID": 7, "Name": "StereoShack", "Address": "400 Commerce S", "City": "Fort Worth", "State": "Texas", "Zipcode": 76102, "Phone": "8178200741", "Fax": "(817) 820-0742", "Website": "http://nowebsiteshack.com" }, { "ID": 8, "Name": "Circuit Town", "Address": "2200 Kensington Court", "City": "Oak Brook", "State": "Illinois", "Zipcode": 60523, "Phone": "8009552929", "Fax": "(800) 955-9392", "Website": "http://nowebsitecircuittown.com" }, { "ID": 9, "Name": "Premier Buy", "Address": "7601 Penn Avenue South", "City": "Richfield", "State": "Minnesota", "Zipcode": 55423, "Phone": "6122911000", "Fax": "(612) 291-2001", "Website": "http://nowebsitepremierbuy.com" }, { "ID": 10, "Name": "ElectrixMax", "Address": "263 Shuman Blvd", "City": "Naperville", "State": "Illinois", "Zipcode": 60563, "Phone": "6304387800", "Fax": "(630) 438-7801", "Website": "http://nowebsiteelectrixmax.com" }, { "ID": 11, "Name": "Video Emporium", "Address": "1201 Elm Street", "City": "Dallas", "State": "Texas", "Zipcode": 75270, "Phone": "2148543000", "Fax": "(214) 854-3001", "Website": "http://nowebsitevideoemporium.com" }, { "ID": 12, "Name": "Screen Shop", "Address": "1000 Lowes Blvd", "City": "Mooresville", "State": "North Carolina", "Zipcode": 28117, "Phone": "8004456937", "Fax": "(800) 445-6938", "Website": "http://nowebsitescreenshop.com" }]; @Injectable() export class Service { getCompanies() { return companies; } }

// In real applications, you should not transpile code in the browser. You can see how to create your own application with Angular and DevExtreme here: // https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/ System.config({ transpiler: 'ts', typescriptOptions: { module: "system", emitDecoratorMetadata: true, experimentalDecorators: true }, meta: { 'typescript': { "exports": "ts" }, }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js', 'typescript': 'npm:typescript@3.4.5/lib/typescript.js', '@angular': 'npm:@angular', 'tslib': 'npm:tslib/tslib.js', 'rxjs': 'npm:rxjs', 'exceljs': 'npm:exceljs@1.7.0/dist/exceljs.js', 'file-saver': 'npm:file-saver@1.3.8/FileSaver.js', 'devextreme': 'npm:devextreme@20.1', 'jszip': 'npm:jszip@3.1.3/dist/jszip.min.js', 'quill': 'npm:quill@1.3.7/dist/quill.js', 'devexpress-diagram': 'npm:devexpress-diagram@1.0.9', 'devexpress-gantt': 'npm:devexpress-gantt@1.0.7', 'devextreme-angular': 'npm:devextreme-angular@20.1' }, packages: { 'app': { main: './app.component.ts', defaultExtension: 'ts' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, }, packageConfigPaths: [ "npm:*/package.json", "npm:@angular/*/package.json", "npm:@angular/common/*/package.json", "npm:rxjs/operators/package.json", "npm:devextreme-angular@20.1/*/package.json", "npm:devextreme-angular@20.1/ui/*/package.json", ] });

<!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" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.1.6/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/zone.js@0.8.19/dist/zone.js"></script> <script src="https://unpkg.com/reflect-metadata@0.1.3/Reflect.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script src="config.js"></script> <script> System.import('app').catch(console.error.bind(console)); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <demo-app>Loading...</demo-app> </div> </body> </html>