Merge branch 'master' into rkaraivanov/grids-spa-and-wellbeing

Author: ddincheva

CHANGELOG.md

@@ -14,7 +14,6 @@ All notable changes for each version of this project will be documented in this
         <igx-grid-toolbar-hiding [overlaySettings]="overlaySettingsAuto"></igx-grid-toolbar-hiding>
     </igx-grid-toolbar-actions>
     ```
-- `Exporters`'s `columnExporting` event now supports changing the index of the column in the exported file. 
 - `IgxPaginatorComponent`
     - Added `paging` and `pagingDone` events; `paging` event is cancellable and is emitted before pagination is performed, `pagingDone` event gives you information about the previous and the current page number and is not cancellable; Also `IgxPageSizeSelectorComponent` and `IgxPageNavigationComponent` are introduced and now the paginator components allows you to define a custom content, as it is shown in the example below:
     ```html
@@ -27,7 +26,6 @@ All notable changes for each version of this project will be documented in this
         </igx-paginator-content>
     </igx-paginator>
     ```
-
 - `Exporters`'s `columnExporting` event now supports changing the index of the column in the exported file.
     ```typescript
         this.excelExporterService.columnExporting.subscribe((col) => {
@@ -36,6 +34,9 @@ All notable changes for each version of this project will be documented in this
             }
         });
     ```
+- `IgxExcelExporterService`
+    - Added support for exporting the grids' multi-column headers to **Excel**. By default, the multi-column headers would be exported but this behavior can be controlled by the `ignoreMultiColumnHeaders` option off the IgxExcelExporterOptions object.
+    
 ### General
 - `IgxPaginatorComponent`
     - Deprecated properties `selectLabel` and `prepositionPage` are now removed;

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

@@ -47,13 +47,14 @@ export class IgxCsvExporterService extends IgxBaseExporter {
 
     private _stringData: string;
 
-    protected exportDataImplementation(data: IExportRecord[], options: IgxCsvExporterOptions) {
+    protected exportDataImplementation(data: IExportRecord[], options: IgxCsvExporterOptions, done: () => void) {
         data = data.map((item) => item.data);
         const csvData = new CharSeparatedValueData(data, options.valueDelimiter);
         csvData.prepareDataAsync((r) => {
             this._stringData = r;
             this.saveFile(options);
             this.exportEnded.emit({ csvData: this._stringData });
+            done();
         });
     }
 

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

@@ -1,5 +1,4 @@
 import { TestBed, waitForAsync } from '@angular/core/testing';
-import { Component, ViewChild } from '@angular/core';
 import { IgxGridModule } from '../../grids/grid/public_api';
 import { IgxGridComponent } from '../../grids/grid/grid.component';
 import { IColumnExportingEventArgs, IRowExportingEventArgs } from '../exporter-common/base-export-service';
@@ -15,7 +14,9 @@ import {
     ProductsComponent,
     GridIDNameJobTitleHireDataPerformanceComponent,
     GridHireDateComponent,
-    GridExportGroupedDataComponent
+    GridExportGroupedDataComponent,
+    MultiColumnHeadersExportComponent,
+    GridWithEmptyColumnsComponent
 } from '../../test-utils/grid-samples.spec';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { first } from 'rxjs/operators';
@@ -30,11 +31,14 @@ import { UIInteractions, wait } from '../../test-utils/ui-interactions.spec';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
-import { IgxHierarchicalGridExportComponent } from '../../test-utils/hierarchical-grid-components.spec';
+import { IgxHierarchicalGridExportComponent,
+         IgxHierarchicalGridMultiColumnHeadersExportComponent
+} from '../../test-utils/hierarchical-grid-components.spec';
 import { IgxHierarchicalGridModule,
          IgxHierarchicalGridComponent,
 } from '../../grids/hierarchical-grid/public_api';
 import { IgxHierarchicalRowComponent } from '../../grids/hierarchical-grid/hierarchical-row.component';
+import { GridFunctions } from '../../test-utils/grid-functions.spec';
 
 describe('Excel Exporter', () => {
     configureTestSuite();
@@ -53,7 +57,9 @@ describe('Excel Exporter', () => {
                 GridIDNameJobTitleHireDataPerformanceComponent,
                 GridHireDateComponent,
                 GridExportGroupedDataComponent,
-                IgxHierarchicalGridExportComponent
+                IgxHierarchicalGridExportComponent,
+                MultiColumnHeadersExportComponent,
+                IgxHierarchicalGridMultiColumnHeadersExportComponent
             ],
             imports: [IgxGridModule, IgxTreeGridModule, IgxHierarchicalGridModule, NoopAnimationsModule]
         }).compileComponents();
@@ -689,8 +695,7 @@ describe('Excel Exporter', () => {
 
     describe('', () => {
         let fix;
-        let hGrid: IgxHierarchicalGridComponent;
-
+        let hGrid;
         beforeEach(waitForAsync(() => {
             options = createExportOptions('HierarchicalGridExcelExport');
             fix = TestBed.createComponent(IgxHierarchicalGridExportComponent);
@@ -705,12 +710,12 @@ describe('Excel Exporter', () => {
 
         it('should export hierarchical grid respecting options width.', async () => {
             options = createExportOptions('HierarchicalGridExcelExport', 50);
+
             await exportAndVerify(hGrid, options, actualData.exportHierarchicalDataWithColumnWidth);
         });
 
         it('should export sorted hierarchical grid data', async () => {
             hGrid.sort({fieldName: 'GrammyNominations', dir: SortingDirection.Desc});
-
             fix.detectChanges();
 
             await exportAndVerify(hGrid, options, actualData.exportSortedHierarchicalData);
@@ -782,6 +787,17 @@ describe('Excel Exporter', () => {
         });
     });
 
+    describe('', () => {
+        it('should export hierarchical grid with multi column headers', async () => {
+            const fix = TestBed.createComponent(IgxHierarchicalGridMultiColumnHeadersExportComponent);
+            fix.detectChanges();
+
+            const hGrid = fix.componentInstance.hGrid;
+            options = createExportOptions('HierarchicalGridMCHExcelExport');
+            await exportAndVerify(hGrid, options, actualData.exportHierarchicalDataWithMultiColumnHeaders);
+        });
+    });
+
     describe('', () => {
         let fix;
         let treeGrid: IgxTreeGridComponent;
@@ -911,7 +927,7 @@ describe('Excel Exporter', () => {
             expect(error).toMatch('Can create an outline of up to eight levels!');
         });
 
-        it('should skip the formatter when columnExproting skipFormatter is true', async () => {
+        it('should skip the formatter when columnExporting skipFormatter is true', async () => {
             treeGrid.columns[4].formatter = ((val: number) => {
                 const t = Math.floor(val / 10);
                 const o = val % 10;
@@ -958,6 +974,66 @@ describe('Excel Exporter', () => {
         });
     });
 
+    describe('', () => {
+        let fix;
+        let grid: IgxGridComponent;
+
+        beforeEach(waitForAsync(() => {
+            options = createExportOptions('MultiColumnHeaderGridExcelExport');
+            fix = TestBed.createComponent(MultiColumnHeadersExportComponent);
+            fix.detectChanges();
+
+            grid = fix.componentInstance.grid;
+        }));
+
+        it('should export grid with multi column headers', async () => {
+            await exportAndVerify(grid, options, actualData.exportMultiColumnHeadersData, false);
+        });
+
+        it('should export grid with multi column headers and moved column', async () => {
+            grid.columns[0].move(2);
+            fix.detectChanges();
+
+            await exportAndVerify(grid, options, actualData.exportMultiColumnHeadersDataWithMovedColumn, false);
+        });
+
+        it('should export grid with hidden column', async () => {
+            grid.columns[0].hidden = true;
+            fix.detectChanges();
+
+            await exportAndVerify(grid, options, actualData.exportMultiColumnHeadersDataWithHiddenColumn, false);
+        });
+
+        it('should export grid with hidden column and ignoreColumnVisibility set to true', async () => {
+            grid.columns[0].hidden = true;
+            options.ignoreColumnsVisibility = true;
+            fix.detectChanges();
+
+            await exportAndVerify(grid, options, actualData.exportMultiColumnHeadersDataWithIgnoreColumnVisibility, false);
+        });
+
+        it('should export grid with pinned column group', async () => {
+            grid.columns[1].pinned = true;
+            fix.detectChanges();
+
+            await exportAndVerify(grid, options, actualData.exportMultiColumnHeadersDataWithPinnedColumn, false);
+        });
+
+        it('should export grid with collapsed and expanded multi column headers', async () => {
+            GridFunctions.clickGroupExpandIndicator(fix, grid.columns[1]);
+            GridFunctions.clickGroupExpandIndicator(fix, grid.columns[7]);
+            fix.detectChanges();
+            await exportAndVerify(grid, options, actualData.exportCollapsedAndExpandedMultiColumnHeadersData, false);
+        });
+
+        it('should respect ignoreMultiColumnHeaders when set to true', async () => {
+            options.ignoreMultiColumnHeaders = true;
+            fix.detectChanges();
+
+            await exportAndVerify(grid, options, actualData.exportMultiColumnHeadersDataWithoutMultiColumnHeaders);
+        });
+    });
+
     const getExportedData = (grid, exportOptions: IgxExcelExporterOptions) => {
         const exportData = new Promise<JSZipWrapper>((resolve) => {
             exporter.exportEnded.pipe(first()).subscribe((value) => {
@@ -1004,31 +1080,12 @@ describe('Excel Exporter', () => {
         return opts;
     };
 
-    const exportAndVerify = async (component, exportOptions, expectedData) => {
+    const exportAndVerify = async (component, exportOptions, expectedData, exportTable: boolean = true) => {
         const isHGrid = component instanceof IgxHierarchicalGridComponent;
+        const shouldNotExportTable = isHGrid || !exportTable;
+
         const wrapper = await getExportedData(component, exportOptions);
-        await wrapper.verifyStructure(isHGrid);
-        await wrapper.verifyDataFilesContent(expectedData, '', isHGrid);
+        await wrapper.verifyStructure(shouldNotExportTable);
+        await wrapper.verifyDataFilesContent(expectedData, '', shouldNotExportTable);
     };
 });
-
-@Component({
-    template: `
-    <igx-grid #grid1 [data]="data">
-        <igx-column>
-            <ng-template igxCell>
-                <button>SimpleBtn</button>
-            </ng-template>
-        </igx-column>
-        <igx-column header="" field="ID"></igx-column>
-        <igx-column header="  " field=""></igx-column>
-        <igx-column header="Name" field="Name"></igx-column>
-        <igx-column header="JobTitle" field="JobTitle"></igx-column>
-    </igx-grid>`
-})
-
-export class GridWithEmptyColumnsComponent {
-    @ViewChild('grid1', { static: true }) public grid: IgxGridComponent;
-
-    public data = SampleTestData.personJobDataFull();
-}

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

@@ -5,7 +5,7 @@ import { ExcelElementsFactory } from './excel-elements-factory';
 import { ExcelFolderTypes } from './excel-enums';
 import { IgxExcelExporterOptions } from './excel-exporter-options';
 import { IExcelFolder } from './excel-interfaces';
-import { ExportRecordType, IExportRecord, IgxBaseExporter, DEFAULT_OWNER } from '../exporter-common/base-export-service';
+import { ExportRecordType, IExportRecord, IgxBaseExporter, DEFAULT_OWNER, HeaderType } from '../exporter-common/base-export-service';
 import { ExportUtilities } from '../exporter-common/export-utilities';
 import { WorksheetData } from './worksheet-data';
 import { IBaseEventArgs } from '../../core/utils';
@@ -74,15 +74,15 @@ export class IgxExcelExporterService extends IgxBaseExporter {
         }
     }
 
-    protected exportDataImplementation(data: IExportRecord[], options: IgxExcelExporterOptions): void {
+    protected exportDataImplementation(data: IExportRecord[], options: IgxExcelExporterOptions, done: () => void): void {
         const firstDataElement = data[0];
         const isHierarchicalGrid = firstDataElement?.type === ExportRecordType.HierarchicalGridRecord;
 
         let rootKeys;
         let columnCount;
         let columnWidths;
         let indexOfLastPinnedColumn;
-
+        let defaultOwner;
 
         const columnsExceedLimit = typeof firstDataElement !== 'undefined' ?
             isHierarchicalGrid ?
@@ -111,9 +111,11 @@ export class IgxExcelExporterService extends IgxBaseExporter {
                     .sort((a,b) => b - a)[0];
 
                 rootKeys = this._ownersMap.get(firstDataElement.owner).columns.map(c => c.header);
+                defaultOwner = this._ownersMap.get(firstDataElement.owner);
             } else {
-                const defaultOwner = this._ownersMap.get(DEFAULT_OWNER);
-                const columns = defaultOwner.columns.filter(col => !col.skip);
+                defaultOwner = this._ownersMap.get(DEFAULT_OWNER);
+                const columns = defaultOwner.columns.filter(col => !col.skip && col.headerType === HeaderType.ColumnHeader);
+
                 columnWidths = defaultOwner.columnWidths;
                 indexOfLastPinnedColumn = defaultOwner.indexOfLastPinnedColumn;
                 columnCount = columns.length;
@@ -122,7 +124,8 @@ export class IgxExcelExporterService extends IgxBaseExporter {
         }
 
         const worksheetData =
-            new WorksheetData(data, options, this._sort, columnCount, rootKeys, indexOfLastPinnedColumn, columnWidths);
+            new WorksheetData(data, options, this._sort, columnCount, rootKeys, indexOfLastPinnedColumn,
+                columnWidths, defaultOwner, this._ownersMap);
 
         this._xlsx = typeof (JSZip as any).default === 'function' ? new (JSZip as any).default() : new JSZip();
 
@@ -133,6 +136,7 @@ export class IgxExcelExporterService extends IgxBaseExporter {
             this._xlsx.generateAsync(IgxExcelExporterService.ZIP_OPTIONS).then((result) => {
                 this.saveFile(result, options.fileName);
                 this.exportEnded.emit({ xlsx: this._xlsx });
+                done();
             });
         });
     }