fix(Exporter): Fixed field-header mapping #9872

projects/igniteui-angular/src/lib/services/csv/char-separated-value-data.ts

@@ -1,5 +1,6 @@
 import { ExportUtilities } from '../exporter-common/export-utilities';
 import { yieldingLoop } from '../../core/utils';
+import { IColumnInfo } from '../exporter-common/base-export-service';
 
 /**
  * @hidden
@@ -13,7 +14,7 @@ export class CharSeparatedValueData {
     private _delimiterLength = 1;
     private _isSpecialData = false;
 
-    constructor(private _data: any[], valueDelimiter: string)  {
+    constructor(private _data: any[], valueDelimiter: string, private columns: IColumnInfo[] = [])  {
         this.setDelimiter(valueDelimiter);
     }
 
@@ -46,7 +47,10 @@ export class CharSeparatedValueData {
             done('');
         }
 
-        const keys = ExportUtilities.getKeysFromData(this._data);
+        const columns = this.columns?.filter(c => !c.skip)
+                        .sort((a, b) => a.startIndex - b.startIndex)
+                        .sort((a, b) => a.pinnedIndex - b.pinnedIndex);
+        const keys = columns && columns.length ? columns.map(c => c.field) : ExportUtilities.getKeysFromData(this._data);
 
         if (keys.length === 0) {
             done('');
@@ -55,7 +59,11 @@ export class CharSeparatedValueData {
         this._isSpecialData = ExportUtilities.isSpecialData(this._data[0]);
         this._escapeCharacters.push(this._delimiter);
 
-        this._headerRecord = this.processHeaderRecord(keys);
+        const headers = columns && columns.length ?
+                        columns.map(c => c.header ?? c.field) :
+                        keys;
+
+        this._headerRecord = this.processHeaderRecord(headers);
         this.processDataRecordsAsync(this._data, keys, (dr) => {
             done(this._headerRecord + dr);
         });

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

@@ -10,7 +10,10 @@ import { CsvFileTypes, IgxCsvExporterOptions } from './csv-exporter-options';
 import { CSVWrapper } from './csv-verification-wrapper.spec';
 import { IgxTreeGridPrimaryForeignKeyComponent } from '../../test-utils/tree-grid-components.spec';
 import { IgxTreeGridModule, IgxTreeGridComponent } from '../../grids/tree-grid/public_api';
-import { ReorderedColumnsComponent, GridIDNameJobTitleComponent, ProductsComponent } from '../../test-utils/grid-samples.spec';
+import { ReorderedColumnsComponent,
+        GridIDNameJobTitleComponent,
+        ProductsComponent,
+        ColumnsAddedOnInitComponent } 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';
@@ -33,7 +36,8 @@ describe('CSV Grid Exporter', () => {
                 ReorderedColumnsComponent,
                 GridIDNameJobTitleComponent,
                 IgxTreeGridPrimaryForeignKeyComponent,
-                ProductsComponent
+                ProductsComponent,
+                ColumnsAddedOnInitComponent
             ],
             imports: [IgxGridModule, IgxTreeGridModule, NoopAnimationsModule]
         })
@@ -365,6 +369,16 @@ describe('CSV Grid Exporter', () => {
         wrapper.verifyData(wrapper.gridWithAdvancedFilters, 'Should export only filtered data.');
     });
 
+    it('should map dynamically added data & columns properly (#9872).', async () => {
+        const fix = TestBed.createComponent(ColumnsAddedOnInitComponent);
+        fix.detectChanges();
+        await wait();
+
+        const grid = fix.componentInstance.grid;
+        const wrapper = await getExportedData(grid, options);
+        wrapper.verifyData(wrapper.gridColumnsAddedOnInit, 'Columns should be exported in the same order as in the grid!');
+    });
+
     describe('', () => {
         let fix;
         let treeGrid: IgxTreeGridComponent;

projects/igniteui-angular/src/lib/services/csv/csv-exporter.ts

@@ -1,5 +1,5 @@
 import { EventEmitter, Injectable } from '@angular/core';
-import { IExportRecord, IgxBaseExporter } from '../exporter-common/base-export-service';
+import { DEFAULT_OWNER, IExportRecord, IgxBaseExporter } from '../exporter-common/base-export-service';
 import { ExportUtilities } from '../exporter-common/export-utilities';
 import { CharSeparatedValueData } from './char-separated-value-data';
 import { CsvFileTypes, IgxCsvExporterOptions } from './csv-exporter-options';
@@ -49,7 +49,9 @@ export class IgxCsvExporterService extends IgxBaseExporter {
 
     protected exportDataImplementation(data: IExportRecord[], options: IgxCsvExporterOptions, done: () => void) {
         data = data.map((item) => item.data);
-        const csvData = new CharSeparatedValueData(data, options.valueDelimiter);
+        const columnList = this._ownersMap.get(DEFAULT_OWNER);
+
+        const csvData = new CharSeparatedValueData(data, options.valueDelimiter, columnList?.columns);
         csvData.prepareDataAsync((r) => {
             this._stringData = r;
             this.saveFile(options);

projects/igniteui-angular/src/lib/services/csv/csv-verification-wrapper.spec.ts

@@ -261,4 +261,31 @@ export class CSVWrapper {
         `6${this._delimiter}-1${this._delimiter}Erma Walsh${this._delimiter}CEO${this._delimiter}52${this._eor}` +
         `10${this._delimiter}-1${this._delimiter}Eduardo Ramirez${this._delimiter}Manager${this._delimiter}53${this._eor}`;
     }
+
+    public get gridColumnsAddedOnInit() {
+        return `CompanyName${this._delimiter}ContactName${this._delimiter}Address${this._delimiter}0${this._delimiter}` +
+        `1${this._delimiter}2${this._eor}` +
+        `Alfreds Futterkiste${this._delimiter}Maria Anders${this._delimiter}Obere Str. 57${this._delimiter}0${this._delimiter}` +
+        `2500${this._delimiter}5000${this._eor}` +
+        `Ana Trujillo Emparedados y helados${this._delimiter}Ana Trujillo${this._delimiter}Avda. de la Constitución 2222` +
+        `${this._delimiter}0${this._delimiter}2500${this._delimiter}5000${this._eor}` +
+        `Antonio Moreno Taquería${this._delimiter}Antonio Moreno${this._delimiter}Mataderos 2312${this._delimiter}0` +
+        `${this._delimiter}2500${this._delimiter}5000${this._eor}` +
+        `Around the Horn${this._delimiter}Thomas Hardy${this._delimiter}120 Hanover Sq.${this._delimiter}0${this._delimiter}` +
+        `2500${this._delimiter}5000${this._eor}` +
+        `Berglunds snabbköp${this._delimiter}Christina Berglund${this._delimiter}Berguvsvägen 8${this._delimiter}0` +
+        `${this._delimiter}2500${this._delimiter}5000${this._eor}` +
+        `Blauer See Delikatessen${this._delimiter}Hanna Moos${this._delimiter}Forsterstr. 57${this._delimiter}0${this._delimiter}` +
+        `2500${this._delimiter}5000${this._eor}` +
+        `Blondesddsl père et fils${this._delimiter}Frédérique Citeaux${this._delimiter}"24${this._delimiter} place Kléber"` +
+        `${this._delimiter}0${this._delimiter}2500${this._delimiter}5000${this._eor}` +
+        `Bólido Comidas preparadas${this._delimiter}Martín Sommer${this._delimiter}"C/ Araquil${this._delimiter} 67"` +
+        `${this._delimiter}0${this._delimiter}2500${this._delimiter}5000${this._eor}` +
+        `Bon app'${this._delimiter}Laurence Lebihan${this._delimiter}"12${this._delimiter} rue des Bouchers"${this._delimiter}` +
+        `0${this._delimiter}2500${this._delimiter}5000${this._eor}` +
+        `Bottom-Dollar Markets${this._delimiter}Elizabeth Lincoln${this._delimiter}23 Tsawassen Blvd.${this._delimiter}0` +
+        `${this._delimiter}2500${this._delimiter}5000${this._eor}` +
+        `B's Beverages${this._delimiter}Victoria Ashworth${this._delimiter}Fauntleroy Circus${this._delimiter}0${this._delimiter}` +
+        `2500${this._delimiter}5000${this._eor}`;
+    }
 }

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

@@ -16,7 +16,8 @@ import {
     GridHireDateComponent,
     GridExportGroupedDataComponent,
     MultiColumnHeadersExportComponent,
-    GridWithEmptyColumnsComponent
+    GridWithEmptyColumnsComponent,
+    ColumnsAddedOnInitComponent
 } from '../../test-utils/grid-samples.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { first } from 'rxjs/operators';
@@ -59,7 +60,8 @@ describe('Excel Exporter', () => {
                 GridExportGroupedDataComponent,
                 IgxHierarchicalGridExportComponent,
                 MultiColumnHeadersExportComponent,
-                IgxHierarchicalGridMultiColumnHeadersExportComponent
+                IgxHierarchicalGridMultiColumnHeadersExportComponent,
+                ColumnsAddedOnInitComponent
             ],
             imports: [IgxGridModule, IgxTreeGridModule, IgxHierarchicalGridModule, NoopAnimationsModule]
         }).compileComponents();
@@ -691,6 +693,15 @@ describe('Excel Exporter', () => {
 
             await exportAndVerify(grid, options, actualData.exportGroupedDataWithIgnoreGrouping);
         });
+
+        it('should map dynamically added data & columns properly (#9872).', async () => {
+            const fix = TestBed.createComponent(ColumnsAddedOnInitComponent);
+            fix.detectChanges();
+            await wait();
+
+            const grid = fix.componentInstance.grid;
+            await exportAndVerify(grid, options, actualData.columnsAddedOnInit);
+        });
     });
 
     describe('', () => {

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

@@ -110,7 +110,7 @@ export class IgxExcelExporterService extends IgxBaseExporter {
                     .map(a => this._ownersMap.get(a.owner).columns.length + a.level)
                     .sort((a,b) => b - a)[0];
 
-                rootKeys = this._ownersMap.get(firstDataElement.owner).columns.map(c => c.header);
+                rootKeys = this._ownersMap.get(firstDataElement.owner).columns.map(c => c.field);
                 defaultOwner = this._ownersMap.get(firstDataElement.owner);
             } else {
                 defaultOwner = this._ownersMap.get(DEFAULT_OWNER);
@@ -119,7 +119,7 @@ export class IgxExcelExporterService extends IgxBaseExporter {
                 columnWidths = defaultOwner.columnWidths;
                 indexOfLastPinnedColumn = defaultOwner.indexOfLastPinnedColumn;
                 columnCount = columns.length;
-                rootKeys = columns.map(c => c.header);
+                rootKeys = columns.map(c => c.field);
             }
         }
 

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

@@ -1327,4 +1327,22 @@ export class FileContentData {
 
         return this.createData();
     }
+
+    public get columnsAddedOnInit() {
+        this._sharedStringsData =
+            `count="39" uniqueCount="39"><si><t>CompanyName</t></si><si><t>ContactName</t></si><si><t>Address</t></si><si><t>0</t></si><si><t>1</t></si><si><t>2</t></si><si><t>Alfreds Futterkiste</t></si><si><t>Maria Anders</t></si><si><t>Obere Str. 57</t></si><si><t>Ana Trujillo Emparedados y helados</t></si><si><t>Ana Trujillo</t></si><si><t>Avda. de la Constitución 2222</t></si><si><t>Antonio Moreno Taquería</t></si><si><t>Antonio Moreno</t></si><si><t>Mataderos 2312</t></si><si><t>Around the Horn</t></si><si><t>Thomas Hardy</t></si><si><t>120 Hanover Sq.</t></si><si><t>Berglunds snabbköp</t></si><si><t>Christina Berglund</t></si><si><t>Berguvsvägen 8</t></si><si><t>Blauer See Delikatessen</t></si><si><t>Hanna Moos</t></si><si><t>Forsterstr. 57</t></si><si><t>Blondesddsl père et fils</t></si><si><t>Frédérique Citeaux</t></si><si><t>24, place Kléber</t></si><si><t>Bólido Comidas preparadas</t></si><si><t>Martín Sommer</t></si><si><t>C/ Araquil, 67</t></si><si><t>Bon app&apos;</t></si><si><t>Laurence Lebihan</t></si><si><t>12, rue des Bouchers</t></si><si><t>Bottom-Dollar Markets</t></si><si><t>Elizabeth Lincoln</t></si><si><t>23 Tsawassen Blvd.</t></si><si><t>B&apos;s Beverages</t></si><si><t>Victoria Ashworth</t></si><si><t>Fauntleroy Circus</t></si>`;
+
+        this._tableData =
+            `ref="A1:F12" totalsRowShown="0">
+            <autoFilter ref="A1:F12"/><tableColumns count="6"><tableColumn id="1" name="CompanyName"/><tableColumn id="2" name="ContactName"/><tableColumn id="3" name="Address"/><tableColumn id="4" name="0"/><tableColumn id="5" name="1"/><tableColumn id="6" name="2"/></tableColumns>`;
+
+        this._worksheetData =
+            `<dimension ref="A1:F12"/>
+            <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" t="s"><v>6</v></c><c r="B2" t="s"><v>7</v></c><c r="C2" t="s"><v>8</v></c><c r="D2" s="1"><v>0</v></c><c r="E2" s="1"><v>2500</v></c><c r="F2" s="1"><v>5000</v></c></row><row r="3"><c r="A3" t="s"><v>9</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>0</v></c><c r="E3" s="1"><v>2500</v></c><c r="F3" s="1"><v>5000</v></c></row><row r="4"><c r="A4" t="s"><v>12</v></c><c r="B4" t="s"><v>13</v></c><c r="C4" t="s"><v>14</v></c><c r="D4" s="1"><v>0</v></c><c r="E4" s="1"><v>2500</v></c><c r="F4" s="1"><v>5000</v></c></row><row r="5"><c r="A5" t="s"><v>15</v></c><c r="B5" t="s"><v>16</v></c><c r="C5" t="s"><v>17</v></c><c r="D5" s="1"><v>0</v></c><c r="E5" s="1"><v>2500</v></c><c r="F5" s="1"><v>5000</v></c></row><row r="6"><c r="A6" t="s"><v>18</v></c><c r="B6" t="s"><v>19</v></c><c r="C6" t="s"><v>20</v></c><c r="D6" s="1"><v>0</v></c><c r="E6" s="1"><v>2500</v></c><c r="F6" s="1"><v>5000</v></c></row><row r="7"><c r="A7" t="s"><v>21</v></c><c r="B7" t="s"><v>22</v></c><c r="C7" t="s"><v>23</v></c><c r="D7" s="1"><v>0</v></c><c r="E7" s="1"><v>2500</v></c><c r="F7" s="1"><v>5000</v></c></row><row r="8"><c r="A8" t="s"><v>24</v></c><c r="B8" t="s"><v>25</v></c><c r="C8" t="s"><v>26</v></c><c r="D8" s="1"><v>0</v></c><c r="E8" s="1"><v>2500</v></c><c r="F8" s="1"><v>5000</v></c></row><row r="9"><c r="A9" t="s"><v>27</v></c><c r="B9" t="s"><v>28</v></c><c r="C9" t="s"><v>29</v></c><c r="D9" s="1"><v>0</v></c><c r="E9" s="1"><v>2500</v></c><c r="F9" s="1"><v>5000</v></c></row><row r="10"><c r="A10" t="s"><v>30</v></c><c r="B10" t="s"><v>31</v></c><c r="C10" t="s"><v>32</v></c><c r="D10" s="1"><v>0</v></c><c r="E10" s="1"><v>2500</v></c><c r="F10" s="1"><v>5000</v></c></row><row r="11"><c r="A11" t="s"><v>33</v></c><c r="B11" t="s"><v>34</v></c><c r="C11" t="s"><v>35</v></c><c r="D11" s="1"><v>0</v></c><c r="E11" s="1"><v>2500</v></c><c r="F11" s="1"><v>5000</v></c></row><row r="12"><c r="A12" t="s"><v>36</v></c><c r="B12" t="s"><v>37</v></c><c r="C12" t="s"><v>38</v></c><c r="D12" s="1"><v>0</v></c><c r="E12" s="1"><v>2500</v></c><c r="F12" s="1"><v>5000</v></c></row></sheetData>`;
+
+        return this.createData();
+    }
 }

projects/igniteui-angular/src/lib/services/exporter-common/base-export-service.ts

@@ -375,7 +375,7 @@ export abstract class IgxBaseExporter {
                         rawValue = rawValue.toString();
                     }
 
-                    a[e.header] = shouldApplyFormatter ? e.formatter(rawValue) : rawValue;
+                    a[e.field] = shouldApplyFormatter ? e.formatter(rawValue) : rawValue;
                 }
                 return a;
             }, {});

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

@@ -2436,3 +2436,27 @@ export class GridWithEmptyColumnsComponent {
 
     public data = SampleTestData.personJobDataFull();
 }
+
+/** Issue 9872 */
+@Component({
+    template: GridTemplateStrings.declareGrid('', '', ColumnDefinitions.generatedWithDataType)
+})
+export class ColumnsAddedOnInitComponent extends BasicGridComponent implements OnInit {
+    public columns = [];
+    public data = [];
+    public ngOnInit(): void {
+        this.columns = [
+            { field: 'CompanyName' },
+            { field: 'ContactName' },
+            { field: 'Address' }];
+        this.data = SampleTestData.contactInfoData();
+
+        for (let i = 0; i < 3; i++) {
+            this.columns.push({ field: i.toString() }); //add columns for the horizon
+            this.data.forEach(
+                c => (c[i] = i * 2500)
+            ); //add random quantity to each customer for each period in the horizon
+        }
+    }
+
+}