feat(igx-hierarchical-grid): export hierarchical grid (#9206)

* feat(igx-hierarchical-grid): export hierarchical grid
* feat(hierarchical-grid): excel export major refactoring
* chore(*): edit changelog.md

Author: onlyexeption

CHANGELOG.md

@@ -31,6 +31,8 @@ All notable changes for each version of this project will be documented in this
     - `onDataPreLoad` -> `dataPreLoad`
 
 ### New Features
+- `IgxHierarchicalGrid`
+    - Added support for exporting hierarchical data.
 - `IgxForOf`, `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - **Behavioral Change** - Virtual containers now scroll smoothly when using the mouse wheel(s) to scroll them horizontally or vertically. This behavior more closely resembles the scrolling behavior of non-virtualized containers in most modern browsers.
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

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

@@ -32,7 +32,7 @@ export class CharSeparatedValueData {
             return '';
         }
 
-        this._isSpecialData = ExportUtilities.isSpecialData(this._data);
+        this._isSpecialData = ExportUtilities.isSpecialData(this._data[0]);
         this._escapeCharacters.push(this._delimiter);
 
         this._headerRecord = this.processHeaderRecord(keys);
@@ -52,7 +52,7 @@ export class CharSeparatedValueData {
             done('');
         }
 
-        this._isSpecialData = ExportUtilities.isSpecialData(this._data);
+        this._isSpecialData = ExportUtilities.isSpecialData(this._data[0]);
         this._escapeCharacters.push(this._delimiter);
 
         this._headerRecord = this.processHeaderRecord(keys);

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

@@ -26,10 +26,15 @@ import { configureTestSuite } from '../../test-utils/configure-suite';
 import { IgxTreeGridPrimaryForeignKeyComponent } from '../../test-utils/tree-grid-components.spec';
 import { IgxTreeGridModule, IgxTreeGridComponent } from '../../grids/tree-grid/public_api';
 import { IgxNumberFilteringOperand } from '../../data-operations/filtering-condition';
-import { wait } from '../../test-utils/ui-interactions.spec';
+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 { IgxHierarchicalGridModule,
+         IgxHierarchicalGridComponent,
+} from '../../grids/hierarchical-grid/public_api';
+import { IgxHierarchicalRowComponent } from '../../grids/hierarchical-grid/hierarchical-row.component';
 
 describe('Excel Exporter', () => {
     configureTestSuite();
@@ -47,9 +52,10 @@ describe('Excel Exporter', () => {
                 GridWithEmptyColumnsComponent,
                 GridIDNameJobTitleHireDataPerformanceComponent,
                 GridHireDateComponent,
-                GridExportGroupedDataComponent
+                GridExportGroupedDataComponent,
+                IgxHierarchicalGridExportComponent
             ],
-            imports: [IgxGridModule, IgxTreeGridModule, NoopAnimationsModule]
+            imports: [IgxGridModule, IgxTreeGridModule, IgxHierarchicalGridModule, NoopAnimationsModule]
         }).compileComponents();
     }));
 
@@ -140,7 +146,6 @@ describe('Excel Exporter', () => {
             await wait();
 
             const grid = fix.componentInstance.grid;
-            options.ignoreColumnsOrder = true;
             options.ignoreColumnsVisibility = false;
 
             expect(grid.visibleColumns.length).toEqual(3, 'Invalid number of visible columns!');
@@ -632,6 +637,101 @@ describe('Excel Exporter', () => {
         });
     });
 
+    describe('', () => {
+        let fix;
+        let hGrid: IgxHierarchicalGridComponent;
+
+        beforeEach(waitForAsync(() => {
+            options = createExportOptions('HierarchicalGridExcelExport');
+            fix = TestBed.createComponent(IgxHierarchicalGridExportComponent);
+            fix.detectChanges();
+
+            hGrid = fix.componentInstance.hGrid;
+        }));
+
+        it('should export hierarchical grid', async () => {
+            await exportAndVerify(hGrid, options, actualData.exportHierarchicalData);
+        });
+
+        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);
+        });
+
+        it('should export hierarchical grid data with ignored sorting', async () => {
+            hGrid.sort({fieldName: 'GrammyNominations', dir: SortingDirection.Desc});
+
+            options.ignoreSorting = true;
+            fix.detectChanges();
+
+            await exportAndVerify(hGrid, options, actualData.exportHierarchicalData);
+        });
+
+        it('should export filtered hierarchical grid data', async () => {
+            hGrid.filter('Debut', '2009', IgxStringFilteringOperand.instance().condition('contains'), true);
+            fix.detectChanges();
+
+            await exportAndVerify(hGrid, options, actualData.exportFilteredHierarchicalData);
+        });
+
+        it('should export hierarchical grid data with ignored filtering', async () => {
+            hGrid.filter('Debut', '2009', IgxStringFilteringOperand.instance().condition('contains'), true);
+            fix.detectChanges();
+
+            options.ignoreFiltering = true;
+
+            await exportAndVerify(hGrid, options, actualData.exportHierarchicalData);
+        });
+
+        it('should export hierarchical grid with expanded rows.', async () => {
+            const firstRow = hGrid.hgridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+            const secondRow = hGrid.hgridAPI.get_row_by_index(1) as IgxHierarchicalRowComponent;
+
+            UIInteractions.simulateClickAndSelectEvent(firstRow.expander);
+            fix.detectChanges();
+            expect(firstRow.expanded).toBe(true);
+
+            let childGrids = hGrid.hgridAPI.getChildGrids(false);
+
+            const firstChildGrid = childGrids[0];
+            const firstChildRow = firstChildGrid.hgridAPI.get_row_by_index(2) as IgxHierarchicalRowComponent;
+
+            UIInteractions.simulateClickAndSelectEvent(firstChildRow.expander);
+            fix.detectChanges();
+            expect(firstChildRow.expanded).toBe(true);
+
+            const secondChildGrid = childGrids[1];
+            const secondChildRow = secondChildGrid.hgridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+
+            UIInteractions.simulateClickAndSelectEvent(secondChildRow.expander);
+            fix.detectChanges();
+            expect(secondChildRow.expanded).toBe(true);
+
+            UIInteractions.simulateClickAndSelectEvent(secondRow.expander);
+            fix.detectChanges();
+            expect(secondRow.expanded).toBe(true);
+
+            childGrids = hGrid.hgridAPI.getChildGrids(false);
+
+            const thirdChildGrid = childGrids[3];
+            const thirdChildRow = thirdChildGrid.hgridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+
+            UIInteractions.simulateClickAndSelectEvent(thirdChildRow.expander);
+            fix.detectChanges();
+            expect(thirdChildRow.expanded).toBe(true);
+
+            await exportAndVerify(hGrid, options, actualData.exportHierarchicalDataWithExpandedRows);
+        });
+    });
+
     describe('', () => {
         let fix;
         let treeGrid: IgxTreeGridComponent;
@@ -855,9 +955,10 @@ describe('Excel Exporter', () => {
     };
 
     const exportAndVerify = async (component, exportOptions, expectedData) => {
+        const isHGrid = component instanceof IgxHierarchicalGridComponent;
         const wrapper = await getExportedData(component, exportOptions);
-        await wrapper.verifyStructure();
-        await wrapper.verifyDataFilesContent(expectedData);
+        await wrapper.verifyStructure(isHGrid);
+        await wrapper.verifyDataFilesContent(expectedData, '', isHGrid);
     };
 });
 

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 { IExportRecord, IgxBaseExporter } from '../exporter-common/base-export-service';
+import { ExportRecordType, IExportRecord, IgxBaseExporter, DEFAULT_OWNER } from '../exporter-common/base-export-service';
 import { ExportUtilities } from '../exporter-common/export-utilities';
 import { WorksheetData } from './worksheet-data';
 import { IBaseEventArgs } from '../../core/utils';
@@ -72,9 +72,13 @@ export class IgxExcelExporterService extends IgxBaseExporter {
     }
 
     protected exportDataImplementation(data: IExportRecord[], options: IgxExcelExporterOptions): void {
-        const level = data[0]?.level;
+        const firstDataElement = data[0];
+        let rootKeys;
+        let columnCount;
+        let columnWidths;
+        let indexOfLastPinnedColumn;
 
-        if (typeof level !== 'undefined') {
+        if (typeof firstDataElement !== 'undefined') {
             let maxLevel = 0;
 
             data.forEach((r) => {
@@ -84,9 +88,25 @@ export class IgxExcelExporterService extends IgxBaseExporter {
             if (maxLevel > 7) {
                 throw Error('Can create an outline of up to eight levels!');
             }
+
+            if (firstDataElement.type === ExportRecordType.HierarchicalGridRecord) {
+                columnCount = data
+                    .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);
+            } else {
+                const defaultOwner = this._ownersMap.get(DEFAULT_OWNER);
+                const columns = defaultOwner.columns.filter(col => !col.skip);
+                columnWidths = defaultOwner.columnWidths;
+                indexOfLastPinnedColumn = defaultOwner.indexOfLastPinnedColumn;
+                columnCount = columns.length;
+                rootKeys = columns.map(c => c.header);
+            }
         }
 
-        const worksheetData = new WorksheetData(data, this.columnWidthList, options, this._indexOfLastPinnedColumn, this._sort);
+        const worksheetData =
+            new WorksheetData(data, options, this._sort, columnCount, rootKeys, indexOfLastPinnedColumn, columnWidths);
 
         this._xlsx = new (JSZip as any).default();