Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into rkaraivanov/row-classes-bindings

Author: rkaraivanov

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 12.1.6
+
+### New Features
+- `igxGrid`, `igxHierarchicalGrid`, `igxTreeGrid`
+    - Added capability to restore the state of multi column headers with `IgxGridStateDirective`.
+
 ## 12.1.3
 
 ### New Features

ROADMAP.md

@@ -7,7 +7,7 @@
 1. Add row at top of grid [#9675](https://github.com/IgniteUI/igniteui-angular/issues/9675)
 2. Grid row styles and classes [#9969](https://github.com/IgniteUI/igniteui-angular/issues/9969)
 3. Freezing Columns/Rows on Export to Excel (Angular) [#9863](https://github.com/IgniteUI/igniteui-angular/issues/9863)
-4. Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667)
+4. Persistent State directive for column group [#8516](https://github.com/IgniteUI/igniteui-angular/issues/8516)
 5. IgxTreeGrid: display only filtered records [#9923](https://github.com/IgniteUI/igniteui-angular/issues/9923)
 
 ## Going down the road
@@ -17,6 +17,7 @@
 3. PDF Export feature on Angular Grid [#5696](https://github.com/IgniteUI/igniteui-angular/issues/5696)
 4. Themes: Move code to Sass modules [#9554](https://github.com/IgniteUI/igniteui-angular/issues/9554)
 5. Themes: Split themes and aid with Grid refactoring [#9556](https://github.com/IgniteUI/igniteui-angular/issues/9556)
+6. Stepper component [#8667](https://github.com/IgniteUI/igniteui-angular/issues/8667)
 
 # Previous Milestone
 

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3026,7 +3026,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     };
 
     private transactionChange$ = new Subject<void>();
-
+    private _rendered = false;
     private readonly DRAG_SCROLL_DELTA = 10;
 
     /**
@@ -3711,6 +3711,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
                 this.paginator.totalRecords = this.totalRecords;
                 this.paginator.overlaySettings = { outlet: this.outlet };
             }
+            this._rendered = true;
         });
         Promise.resolve().then(() => this.rendered.next(true));
     }
@@ -4065,16 +4066,24 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         return this.featureColumnsWidth();
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public get columns(): IgxColumnComponent[] {
+        return this._columns;
+    }
+
     /**
      * Gets an array of `IgxColumnComponent`s.
      *
      * @example
      * ```typescript
-     * const colums = this.grid.columns.
+     * const colums = this.grid.columnsCollection.
      * ```
      */
-    public get columns(): IgxColumnComponent[] {
-        return this._columns;
+    public get columnsCollection(): IgxColumnComponent[] {
+        return this._rendered ?  this._columns : [];
     }
 
     /**

projects/igniteui-angular/src/lib/grids/grid/grid-cell-selection.spec.ts

@@ -667,7 +667,7 @@ describe('IgxGrid - Cell selection #grid', () => {
             } finally {
                 fix.detectChanges();
             }
-            expect(errorMessage).toEqual('Cannot read property \'visibleIndex\' of undefined');
+            expect(errorMessage).toContain('visibleIndex');
             expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
             expect(grid.getSelectedData()).toEqual([]);
             expect(grid.getSelectedRanges()).toEqual([]);
@@ -699,7 +699,7 @@ describe('IgxGrid - Cell selection #grid', () => {
             } finally {
                 fix.detectChanges();
             }
-            expect(errorMessage).toEqual('Cannot read property \'visibleIndex\' of undefined');
+            expect(errorMessage).toContain('visibleIndex');
             GridSelectionFunctions.verifySelectedRange(grid, 1, 2, 0, 1);
             expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
             expect(grid.getSelectedData()).toEqual(expectedData);
@@ -718,7 +718,7 @@ describe('IgxGrid - Cell selection #grid', () => {
             } finally {
                 fix.detectChanges();
             }
-            expect(errorMessage).toEqual('Cannot read property \'visibleIndex\' of undefined');
+            expect(errorMessage).toContain('visibleIndex');
             expect(selectionChangeSpy).toHaveBeenCalledTimes(0);
             expect(grid.getSelectedData()).toEqual([]);
             expect(grid.getSelectedRanges()).toEqual([]);

projects/igniteui-angular/src/lib/grids/state.directive.spec.ts

@@ -3,6 +3,7 @@ import { ISortingExpression } from '../data-operations/sorting-expression.interf
 import { FilteringExpressionsTree, IFilteringExpressionsTree } from '../data-operations/filtering-expressions-tree';
 import { IFilteringExpression } from '../data-operations/filtering-expression.interface';
 import { IgxColumnComponent } from './columns/column.component';
+import { IgxColumnGroupComponent } from './columns/column-group.component';
 import { IGroupingExpression } from '../data-operations/grouping-expression.interface';
 import { IPagingState } from '../data-operations/paging-state.interface';
 import { GridColumnDataType } from '../data-operations/data-util';
@@ -76,6 +77,8 @@ export interface IColumnState {
     header: string;
     resizable: boolean;
     searchable: boolean;
+    columnGroup: boolean;
+    parent: any;
 }
 
 export type GridFeatures = keyof IGridStateOptions;
@@ -162,37 +165,61 @@ export class IgxGridStateDirective {
         columns: {
             getFeatureState: (context: IgxGridStateDirective): IGridState => {
                 const gridColumns: IColumnState[] = context.currGrid.columns.map((c) => ({
-                        pinned: c.pinned,
-                        sortable: c.sortable,
-                        filterable: c.filterable,
-                        editable: c.editable,
-                        sortingIgnoreCase: c.sortingIgnoreCase,
-                        filteringIgnoreCase: c.filteringIgnoreCase,
-                        headerClasses: c.headerClasses,
-                        headerGroupClasses: c.headerGroupClasses,
-                        maxWidth: c.maxWidth,
-                        groupable: c.groupable,
-                        movable: c.movable,
-                        hidden: c.hidden,
-                        dataType: c.dataType,
-                        hasSummary: c.hasSummary,
-                        field: c.field,
-                        width: c.width,
-                        header: c.header,
-                        resizable: c.resizable,
-                        searchable: c.searchable,
-                        selectable: c.selectable
-                    }));
+                    pinned: c.pinned,
+                    sortable: c.sortable,
+                    filterable: c.filterable,
+                    editable: c.editable,
+                    sortingIgnoreCase: c.sortingIgnoreCase,
+                    filteringIgnoreCase: c.filteringIgnoreCase,
+                    headerClasses: c.headerClasses,
+                    headerGroupClasses: c.headerGroupClasses,
+                    maxWidth: c.maxWidth,
+                    groupable: c.groupable,
+                    movable: c.movable,
+                    hidden: c.hidden,
+                    dataType: c.dataType,
+                    hasSummary: c.hasSummary,
+                    field: c.field,
+                    width: c.width,
+                    header: c.header,
+                    resizable: c.resizable,
+                    searchable: c.searchable,
+                    selectable: c.selectable,
+                    parent: c.parent ? c.parent.header : null,
+                    columnGroup: c.columnGroup
+                }));
                 return { columns: gridColumns };
             },
             restoreFeatureState: (context: IgxGridStateDirective, state: IColumnState[]): void => {
                 const newColumns = [];
                 const factory = context.resolver.resolveComponentFactory(IgxColumnComponent);
+                const groupFactory = context.resolver.resolveComponentFactory(IgxColumnGroupComponent);
                 state.forEach((colState) => {
-                    const ref = factory.create(context.viewRef.injector);
-                    Object.assign(ref.instance, colState);
-                    ref.changeDetectorRef.detectChanges();
-                    newColumns.push(ref.instance);
+                    const hasColumnGroup = colState.columnGroup;
+                    delete colState.columnGroup;
+                    if (hasColumnGroup) {
+                        const ref1 = groupFactory.create(context.viewRef.injector);
+                        Object.assign(ref1.instance, colState);
+                        if (ref1.instance.parent) {
+                            const columnGroup: IgxColumnGroupComponent = newColumns.find(e => e.header === ref1.instance.parent);
+                            columnGroup.children.reset([...columnGroup.children.toArray(), ref1.instance]);
+                            ref1.instance.parent = columnGroup;
+                        }
+                        ref1.changeDetectorRef.detectChanges();
+                        newColumns.push(ref1.instance);
+                    } else {
+                        const ref = factory.create(context.viewRef.injector);
+                        Object.assign(ref.instance, colState);
+                        if (ref.instance.parent) {
+                            const columnGroup: IgxColumnGroupComponent = newColumns.find(e => e.header === ref.instance.parent);
+                            if (columnGroup) {
+                                ref.instance.parent = columnGroup;
+                                columnGroup.children.reset([...columnGroup.children.toArray(), ref.instance]);
+                            }
+                        }
+                        ref.changeDetectorRef.detectChanges();
+                        newColumns.push(ref.instance);
+                    }
                 });
                 context.currGrid.columnList.reset(newColumns);
                 context.currGrid.columnList.notifyOnChanges();