diff --git a/projects/igniteui-angular/src/lib/services/csv/char-separated-value-data.ts b/projects/igniteui-angular/src/lib/services/csv/char-separated-value-data.ts index aea2416c319..ea3691015e8 100644 --- a/projects/igniteui-angular/src/lib/services/csv/char-separated-value-data.ts +++ b/projects/igniteui-angular/src/lib/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); diff --git a/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts b/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts index 629d9ecc68a..b4a7f98e930 100644 --- a/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/services/csv/csv-exporter-grid.spec.ts @@ -24,6 +24,7 @@ import { wait } from '../../test-utils/ui-interactions.spec'; import { IgxPivotGridComponent } from '../../grids/pivot-grid/pivot-grid.component'; import { IgxPivotGridTestBaseComponent } from '../../test-utils/pivot-grid-samples.spec'; import { IgxPivotNumericAggregate } from '../../grids/pivot-grid/pivot-grid-aggregate'; +import { OneGroupThreeColsGridComponent } from '../../test-utils/grid-mch-sample.spec'; describe('CSV Grid Exporter', () => { let exporter: IgxCsvExporterService; @@ -391,6 +392,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;