fix(PivotCSV): Fixed exporter when row dimensions exist.

Author: gedinakova

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

@@ -43,8 +43,7 @@ export class CharSeparatedValueData {
     }
 
     public prepareDataAsync(done: (result: string) => void) {
-        const columns = this.columns?.filter(c => c.headerType !== ExportHeaderType.MultiColumnHeader)
-                        .filter(c => !c.skip)
+        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);
@@ -54,7 +53,7 @@ export class CharSeparatedValueData {
 
         const headers = columns && columns.length ?
                         /* When column groups are present, always use the field as it indicates the group the column belongs to.
-                        * Otherwise, in PivotGrid scenarios we can end up with many duplicated columns.
+                        * Otherwise, in PivotGrid scenarios we can end up with many duplicated column names without a hint what they represent.
                         */
                         columns.map(c => c.columnGroupParent ? c.field : c.header ?? c.field) :
                         keys;

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

@@ -1,5 +1,5 @@
 import { EventEmitter, Injectable } from '@angular/core';
-import { DEFAULT_OWNER, IExportRecord, IgxBaseExporter } from '../exporter-common/base-export-service';
+import { DEFAULT_OWNER, ExportHeaderType, IColumnInfo, 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';
@@ -50,10 +50,29 @@ export class IgxCsvExporterService extends IgxBaseExporter {
     private _stringData: string;
 
     protected exportDataImplementation(data: IExportRecord[], options: IgxCsvExporterOptions, done: () => void) {
-        data = data.map((item) => item.data);
+        const dimensionKeys = data[0]?.dimensionKeys;
+        data = dimensionKeys?.length ? 
+            data.map((item) => item.rawData):
+            data.map((item) => item.data);
         const columnList = this._ownersMap.get(DEFAULT_OWNER);
+        const columns = columnList?.columns.filter(c => c.headerType === ExportHeaderType.ColumnHeader);
+        if (dimensionKeys) {
+            const dimensionCols = dimensionKeys.map((key) => {               
+                const columnInfo: IColumnInfo = {
+                    header: key,
+                    field: key,
+                    dataType: 'string',
+                    skip: false,
+                    headerType: ExportHeaderType.ColumnHeader,
+                    columnSpan: 1,
+                    startIndex: 0
+                };
+                return columnInfo;
+            });
+            columns.unshift(...dimensionCols);
+        }
 
-        const csvData = new CharSeparatedValueData(data, options.valueDelimiter, columnList?.columns);
+        const csvData = new CharSeparatedValueData(data, options.valueDelimiter, columns);
         csvData.prepareDataAsync((r) => {
             this._stringData = r;
             this.saveFile(options);

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

@@ -44,6 +44,9 @@ export interface IExportRecord {
     summaryKey?: string;
     hierarchicalOwner?: string;
     references?: IColumnInfo[];
+    /* Adding `rawData` and `dimesnionKeys` properties to support properly exporting pivot grid data to CSV. */
+    rawData?: any;
+    dimensionKeys?: string[];
 }
 
 export interface IColumnList {
@@ -448,13 +451,18 @@ export abstract class IgxBaseExporter {
         if (!isSpecialData) {
             const owner = record.owner === undefined ? DEFAULT_OWNER : record.owner;
             const ownerCols = this._ownersMap.get(owner).columns;
+            const hasRowHeaders = ownerCols.some(c => c.headerType === ExportHeaderType.RowHeader);
 
             if (record.type !== ExportRecordType.HeaderRecord) {
                 const columns = ownerCols
                     .filter(c => c.headerType === ExportHeaderType.ColumnHeader && !c.skip)
                     .sort((a, b) => a.startIndex - b.startIndex)
                     .sort((a, b) => a.pinnedIndex - b.pinnedIndex);
 
+                if (hasRowHeaders) {
+                    record.rawData = record.data;
+                }
+
                 record.data = columns.reduce((a, e) => {
                     if (!e.skip) {
                         let rawValue = resolveNestedPath(record.data, e.field);
@@ -592,6 +600,10 @@ export abstract class IgxBaseExporter {
 
             this.flatRecords.push(pivotGridRecord);
         }
+
+        if (this.flatRecords.length) {
+            this.flatRecords[0].dimensionKeys = Object.values(this.pivotGridRowDimensionsMap);
+        }
     }
 
     private prepareHierarchicalGridData(grid: GridType, hasFiltering: boolean, hasSorting: boolean) {
@@ -1342,8 +1354,8 @@ export abstract class IgxBaseExporter {
 
             for (const k of Object.keys(groupedRecords)) {
                 groupedRecords[k] = groupedRecords[k].filter(row => mapKeys.every(mk => Object.keys(row).includes(mk))
-                    && mapValues.every(mv => Object.values(row).includes(mv)));
-
+                && mapValues.every(mv => Object.values(row).includes(mv)));
+                
                 if (groupedRecords[k].length === 0) {
                     delete groupedRecords[k];
                 }