[CSV] Always print column headers if available. (#16597)

Author: gedinakova

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

@@ -52,10 +52,7 @@ export class CharSeparatedValueData {
         this._escapeCharacters.push(this._delimiter);
 
         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 column names without a hint what they represent.
-                        */
-                        columns.map(c => c.columnGroupParent ? c.field : c.header ?? c.field) :
+                        columns.map(c => c.header ?? c.field) :
                         keys;
 
         this._headerRecord = this.processHeaderRecord(headers, this._data.length);

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

@@ -21,6 +21,7 @@ import { IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid';
 import { IgxGridNavigationService, IgxPivotNumericAggregate } from 'igniteui-angular/grids/core';
 import { DefaultSortingStrategy, FilteringExpressionsTree, FilteringLogic, IgxNumberFilteringOperand, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core';
 import { CSVWrapper } from './csv-verification-wrapper.spec';
+import { OneGroupThreeColsGridComponent } from '../../../../../test-utils/grid-mch-sample.spec';
 
 describe('CSV Grid Exporter', () => {
     let exporter: IgxCsvExporterService;
@@ -388,6 +389,20 @@ describe('CSV Grid Exporter', () => {
         expect(ExportUtilities.saveBlobToFile).toHaveBeenCalledTimes(1);
     });
 
+    it('should print column headers when available when column groups are present.', async () => {
+        const fix = TestBed.createComponent(OneGroupThreeColsGridComponent);
+        fix.componentInstance.data = [];
+        fix.detectChanges();
+
+        fix.componentInstance.grid.getColumnByName('City').header = 'Test Header';
+        fix.detectChanges();
+
+        const grid = fix.componentInstance.grid;
+
+        const wrapper = await getExportedData(grid, options);
+        wrapper.verifyData('Country,Region,Test Header', 'Only headers should be exported.');
+    });
+
     describe('Tree Grid CSV export', () => {
         let fix;
         let treeGrid: IgxTreeGridComponent;