Merge pull request #8470 from IgniteUI/ibarakov/fix-8466-9.1.x

fix(excel-export): save value as a string unless value type is number

Author: DiyanDimitrov

projects/igniteui-angular/src/lib/services/excel/excel-exporter-grid.spec.ts

@@ -9,7 +9,10 @@ import { IgxExcelExporterService } from './excel-exporter';
 import { IgxExcelExporterOptions } from './excel-exporter-options';
 import { JSZipWrapper } from './jszip-verification-wrapper.spec';
 import { FileContentData } from './test-data.service.spec';
-import { ReorderedColumnsComponent, GridIDNameJobTitleComponent, ProductsComponent } from '../../test-utils/grid-samples.spec';
+import { ReorderedColumnsComponent,
+         GridIDNameJobTitleComponent,
+         ProductsComponent,
+         GridIDNameJobTitleHireDataPerformanceComponent } from '../../test-utils/grid-samples.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { first } from 'rxjs/operators';
 import { DefaultSortingStrategy } from '../../data-operations/sorting-strategy';
@@ -37,7 +40,8 @@ describe('Excel Exporter', () => {
                 GridIDNameJobTitleComponent,
                 IgxTreeGridPrimaryForeignKeyComponent,
                 ProductsComponent,
-                GridWithEmtpyColumnsComponent
+                GridWithEmtpyColumnsComponent,
+                GridIDNameJobTitleHireDataPerformanceComponent
             ],
             imports: [IgxGridModule, IgxTreeGridModule, NoopAnimationsModule]
         }).compileComponents();
@@ -500,6 +504,16 @@ describe('Excel Exporter', () => {
             // Export and verify
             await exportAndVerify(grid, options, actualData.gridWithAdvancedFilters);
         });
+        });
+
+        it('Should export arrays as strings.', async () => {
+            const fix = TestBed.createComponent(GridIDNameJobTitleHireDataPerformanceComponent);
+            fix.detectChanges();
+            await wait();
+
+            const grid = fix.componentInstance.grid;
+
+            await exportAndVerify(grid, options, actualData.personJobHoursDataPerformance);
     });
 
     describe('', () => {

projects/igniteui-angular/src/lib/services/excel/test-data.service.spec.ts

@@ -122,6 +122,28 @@ export class ExportTestDataService {
         { ID: 9, Name: 'Leslie Hansen', JobTitle: 'Associate Software Developer', HireDate: '2013-10-10T11:23:17.714Z' },
         { ID: 10, Name: 'Eduardo Ramirez', JobTitle: 'Manager', HireDate: '2011-11-28T11:23:17.714Z' }
     ];
+
+    private _personJobHoursDataPerformance = [
+        { ID: 1, Name: 'Casey Houston', JobTitle: 'Vice President', WorkingHours: 4, HireDate: '2017-06-19T11:43:07.714Z', Performance: [
+            {Points: 3, Week: 1},
+            {Points: 6, Week: 2},
+            {Points: 1, Week: 3},
+            {Points: 12, Week: 4},
+        ] },
+        { ID: 2, Name: 'Gilberto Todd', JobTitle: 'Director', WorkingHours: 6, HireDate: '2015-12-18T11:23:17.714Z', Performance: [
+            {Points: 8, Week: 1},
+            {Points: 7, Week: 2},
+            {Points: 4, Week: 3},
+            {Points: 9, Week: 4},
+        ] },
+        { ID: 3, Name: 'Tanya Bennett', JobTitle: 'Director', WorkingHours: 8, HireDate: '2005-11-18T11:23:17.714Z', Performance: [
+            {Points: 1, Week: 1},
+            {Points: 3, Week: 2},
+            {Points: 14, Week: 3},
+            {Points: 29, Week: 4},
+        ] }
+    ];
+
     constructor() { }
 
     get differentTypesData() {
@@ -163,6 +185,10 @@ export class ExportTestDataService {
         return this._simpleGridDataFull;
     }
 
+    get personJobHoursDataPerformance() {
+        return this._personJobHoursDataPerformance;
+    }
+
     public getContactsFunkyData(delimiter) {
         return [{
             name: 'Terrance Mc\'Orta',
@@ -917,5 +943,21 @@ export class FileContentData {
 
         return this.createData();
     }
+
+    get personJobHoursDataPerformance() {
+        this._sharedStringsData =
+        `count="18" uniqueCount="15"><si><t>ID</t></si><si><t>Name</t></si><si><t>JobTitle</t></si><si><t>WorkingHours</t></si><si><t>HireDate</t></si><si><t>Performance</t></si><si><t>Casey Houston</t></si><si><t>Vice President</t></si><si><t>2017-06-19T11:43:07.714Z</t></si><si><t>[object Object],[object Object],[object Object],[object Object]</t></si><si><t>Gilberto Todd</t></si><si><t>Director</t></si><si><t>2015-12-18T11:23:17.714Z</t></si><si><t>Tanya Bennett</t></si><si><t>2005-11-18T11:23:17.714Z</t></si>`;
+
+        this._tableData = `ref="A1:F4" totalsRowShown="0">
+        <autoFilter ref="A1:F4"/><tableColumns count="6"><tableColumn id="1" name="ID"/><tableColumn id="2" name="Name"/><tableColumn id="3" name="JobTitle"/><tableColumn id="4" name="WorkingHours"/><tableColumn id="5" name="HireDate"/><tableColumn id="6" name="Performance"/></tableColumns>`;
+
+        this._worksheetData = `<dimension ref="A1:F4"/>
+        <sheetViews><sheetView tabSelected="1" workbookViewId="0"></sheetView></sheetViews>
+        <sheetFormatPr defaultRowHeight="15"  x14ac:dyDescent="0.25"/>
+        <cols><col min="1" max="1" width="50" customWidth="1"/><col min="2" max="2" width="50" customWidth="1"/><col min="3" max="3" width="50" customWidth="1"/><col min="4" max="4" width="50" customWidth="1"/><col min="5" max="5" width="50" customWidth="1"/><col min="6" max="6" width="50" customWidth="1"/></cols>
+        <sheetData><row r="1"><c r="A1" t="s"><v>0</v></c><c r="B1" t="s"><v>1</v></c><c r="C1" t="s"><v>2</v></c><c r="D1" t="s"><v>3</v></c><c r="E1" t="s"><v>4</v></c><c r="F1" t="s"><v>5</v></c></row><row r="2"><c r="A2" s="1"><v>1</v></c><c r="B2" t="s"><v>6</v></c><c r="C2" t="s"><v>7</v></c><c r="D2" s="1"><v>4</v></c><c r="E2" t="s"><v>8</v></c><c r="F2" t="s"><v>9</v></c></row><row r="3"><c r="A3" s="1"><v>2</v></c><c r="B3" t="s"><v>10</v></c><c r="C3" t="s"><v>11</v></c><c r="D3" s="1"><v>6</v></c><c r="E3" t="s"><v>12</v></c><c r="F3" t="s"><v>9</v></c></row><row r="4"><c r="A4" s="1"><v>3</v></c><c r="B4" t="s"><v>13</v></c><c r="C4" t="s"><v>11</v></c><c r="D4" s="1"><v>8</v></c><c r="E4" t="s"><v>14</v></c><c r="F4" t="s"><v>9</v></c></row></sheetData>`;
+
+        return this.createData();
+    }
     /* tslint:enable max-line-length */
 }

projects/igniteui-angular/src/lib/services/excel/worksheet-data-dictionary.ts

@@ -47,9 +47,7 @@ export class WorksheetDataDictionary {
 
     public saveValue(value: any, column: number, isHeader: boolean): number {
         if (this._columnTypeInfo[column] === undefined && isHeader === false) {
-            this._columnTypeInfo[column] = typeof value === 'string' ||
-                                            typeof value === 'boolean' ||
-                                            value instanceof Date;
+            this._columnTypeInfo[column] = typeof value !== 'number' && value !== Number(value) && !Number.isFinite(value);
         }
 
         let sanitizedValue = '';

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -725,6 +725,13 @@ export class GridIDNameJobTitleComponent extends PagingComponent {
     height = '100%';
 }
 
+@Component({
+    template: GridTemplateStrings.declareBasicGridWithColumns(ColumnDefinitions.idNameJobHoursHireDatePerformance)
+})
+export class GridIDNameJobTitleHireDataPerformanceComponent extends BasicGridComponent {
+    data = SampleTestData.personJobHoursDataPerformance();
+}
+
 @Component({
     template: `<div style="margin: 50px;">
             ${GridTemplateStrings.declareGrid(

projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts

@@ -173,6 +173,30 @@ export class SampleTestData {
         { ID: 10, Name: "Eduardo Ramirez", JobTitle: "Manager", HireDate: "2011-11-28T11:23:17.714Z" }
     ])
 
+     /* Data fields: ID: number, Name: string, JobTitle: string, WokingHours: number, HireDate: string, Performance: array;
+        3 items, sorted by ID. */
+     public static personJobHoursDataPerformance = () => ([
+        { ID: 1, Name: "Casey Houston", JobTitle: "Vice President", WorkingHours: 4, HireDate: "2017-06-19T11:43:07.714Z", Performance: [
+            {Points: 3, Week: 1},
+            {Points: 6, Week: 2},
+            {Points: 1, Week: 3},
+            {Points: 12, Week: 4},
+        ] },
+        { ID: 2, Name: "Gilberto Todd", JobTitle: "Director", WorkingHours: 6, HireDate: "2015-12-18T11:23:17.714Z", Performance: [
+            {Points: 8, Week: 1},
+            {Points: 7, Week: 2},
+            {Points: 4, Week: 3},
+            {Points: 9, Week: 4},
+        ] },
+        { ID: 3, Name: "Tanya Bennett", JobTitle: "Director", WorkingHours: 8, HireDate: "2005-11-18T11:23:17.714Z", Performance: [
+            {Points: 1, Week: 1},
+            {Points: 3, Week: 2},
+            {Points: 14, Week: 3},
+            {Points: 29, Week: 4},
+        ] },
+    ])
+
+
     /* Data fields: ID: number, Name: string, JobTitle: string; 10 items, sorted by ID. */
     public static personJobData = () => ([
         { ID: 1, Name: "Casey Houston", JobTitle: "Vice President" },

projects/igniteui-angular/src/lib/test-utils/template-strings.spec.ts

@@ -75,6 +75,15 @@ export class ColumnDefinitions {
         <igx-column field="HireDate" pinned="true"></igx-column>
     `;
 
+    public static idNameJobHoursHireDatePerformance = `
+        <igx-column field="ID"></igx-column>
+        <igx-column field="Name"></igx-column>
+        <igx-column field="JobTitle"></igx-column>
+        <igx-column field="WorkingHours"></igx-column>
+        <igx-column field="HireDate"></igx-column>
+        <igx-column field="Performance"></igx-column>
+    `;
+
     public static nameJobTitleId = `
         <igx-column field="Name"></igx-column>
         <igx-column field="JobTitle"></igx-column>