Merge branch '11.1.x' into ddincheva/percentAlignment-11.1

Author: hanastasov

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

@@ -15,6 +15,7 @@ import { IgxGridBaseDirective } from './grid-base.directive';
 import { IgxGridComponent } from './grid/grid.component';
 import { IgxHierarchicalGridComponent } from './hierarchical-grid/hierarchical-grid.component';
 import { IPinningConfig } from './grid.common';
+import { delay, take } from 'rxjs/operators';
 
 export interface IGridState {
     columns?: IColumnState[];
@@ -415,6 +416,7 @@ export class IgxGridStateDirective {
         if (typeof state === 'string') {
             state = JSON.parse(state) as IGridState;
         }
+        this.state = state;
         this.currGrid = this.grid;
         this.restoreGridState(state, features);
         this.grid.cdr.detectChanges(); // TODO
@@ -443,7 +445,22 @@ export class IgxGridStateDirective {
      * The method that calls corresponding methods to restore features from the passed IGridState object.
      */
     private restoreGridState(state: IGridState, features?: GridFeatures | GridFeatures[]) {
+        // TODO Notify the grid that columnList.changes is triggered by the state directive
+        // instead of piping it like below
+        const columns = 'columns';
+        this.grid.columnList.changes.pipe(delay(0), take(1)).subscribe(() => {
+            this.featureKeys = this.featureKeys.filter(f => f !== columns);
+            this.restoreFeatures(state);
+        });
         this.applyFeatures(features);
+        if (this.featureKeys.includes(columns) && this.options[columns] && state[columns]) {
+            this.getFeature(columns).restoreFeatureState(this, state[columns]);
+        } else {
+            this.restoreFeatures(state);
+        }
+    }
+
+    private restoreFeatures(state: IGridState) {
         this.featureKeys.forEach(f => {
             if (this.options[f]) {
                 const featureState = state[f];

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

@@ -1,4 +1,4 @@
-import { TestBed, waitForAsync } from '@angular/core/testing';
+import { fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { Component, ViewChild } from '@angular/core';
 import { IgxGridStateDirective, IGridState, IColumnState } from './state.directive';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -169,7 +169,7 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => {
         HelperFunctions.verifyFilteringExpressions(filtering, gridState);
     });
 
-    it('setState should correctly restore grid filtering state from string', () => {
+    it('setState should correctly restore grid filtering state from string', fakeAsync(() => {
         const state = fix.componentInstance.state;
 
         const emptyFiltering = '{"filteringOperands":[],"operator":0}';
@@ -185,6 +185,8 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => {
         expect(gridState).toBe(initialState);
 
         state.setState(JSON.stringify(filteringStateObject));
+        tick();
+        fix.detectChanges();
         gridState = state.getState(false, ['filtering', 'rowIslands']) as IGridState;
         HelperFunctions.verifyFilteringExpressions(grid.filteringExpressionsTree, gridState);
         const gridsCollection = HelperFunctions.getChildGridsCollection(grid, gridState);
@@ -193,9 +195,9 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => {
         });
         gridState = state.getState(true, ['filtering', 'rowIslands']);
         expect(gridState).toBe(filteringState);
-    });
+    }));
 
-    it('setState should correctly restore grid filtering state from object', () => {
+    it('setState should correctly restore grid filtering state from object', fakeAsync(() => {
         const state = fix.componentInstance.state;
 
         const emptyFiltering = '{"filteringOperands":[],"operator":0}';
@@ -211,6 +213,8 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => {
         expect(gridState).toBe(initialState);
 
         state.setState(filteringStateObject);
+        tick();
+        fix.detectChanges();
         gridState = state.getState(false, ['filtering', 'rowIslands']) as IGridState;
         HelperFunctions.verifyFilteringExpressions(grid.filteringExpressionsTree, gridState);
         const gridsCollection = HelperFunctions.getChildGridsCollection(grid, gridState);
@@ -219,7 +223,7 @@ describe('IgxHierarchicalGridState - input properties #hGrid', () => {
         });
         gridState = state.getState(true, ['filtering', 'rowIslands']);
         expect(gridState).toBe(filteringState);
-    });
+    }));
 
     it('setState should correctly restore grid sorting state from string', () => {
         const state = fix.componentInstance.state;