Merge branch '16.1.x' into gedinakova/fflateUpdate-16.1

Author: kdinev

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts

@@ -189,6 +189,38 @@ describe('IgxForOf directive -', () => {
             expect(state.startIndex).toBe(1);
         });
 
+        it('should display the correct chunk items on resizing the container', () => {
+            // initially the container's width is narrow enough to be scrollable
+            fix.componentInstance.width = '200px';
+            fix.componentInstance.cols = [
+                { field: '1', width: 100 },
+                { field: '2', width: 100 },
+                { field: '3', width: 100 },
+                { field: '4', width: 100 },
+                { field: '5', width: 100 }
+            ];
+            fix.detectChanges();
+
+            expect(displayContainer).not.toBeNull();
+
+            // scroll the container so that at least the first col is out of view
+            fix.componentInstance.scrollLeft(displayContainer.clientWidth);
+            fix.detectChanges();
+
+            fix.componentInstance.childVirtDirs.toArray().forEach(element => {
+                expect(element.state.startIndex).not.toBe(0);
+            });
+
+            // the container's width is assigned as wide as to display all cols
+            fix.componentInstance.width = '600px';
+            fix.detectChanges();
+
+            const secondRecChildren = fix.nativeElement.querySelectorAll(DISPLAY_CONTAINER)[1].children;
+            for (let i = 0; i < secondRecChildren.length; i++) {
+                expect(secondRecChildren[i].textContent)
+                    .toBe(fix.componentInstance.data[1][i + 1].toString());
+            }
+        });
     });
 
     describe('vertical virtual component', () => {

projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts

@@ -862,7 +862,6 @@ export class IgxForOfDirective<T, U extends T[] = T[]> implements OnInit, OnChan
     public resetScrollPosition() {
         this.scrollPosition = 0;
         this.scrollComponent.scrollAmount = 0;
-        this.state.startIndex = 0;
     }
 
     /**

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

@@ -3698,6 +3698,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
     public resetCaches(recalcFeatureWidth = true) {
         if (recalcFeatureWidth) {
             this._headerFeaturesWidth = NaN;
+            this.summaryService.summaryHeight = 0;
         }
         this.resetForOfCache();
         this.resetColumnsCaches();

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

@@ -397,6 +397,25 @@ describe('IgxGridState - input properties #grid', () => {
         expect(grid.columnInit.emit).toHaveBeenCalledTimes(columnsStateObject.columns.length);
     });
 
+    it('setState should correctly restore grid columns with Column Groups and same headers', () => {
+        const fix = TestBed.createComponent(IgxGridStateComponent);
+        fix.detectChanges();
+        const state = fix.componentInstance.state;
+        /* eslint-disable max-len */
+        const initialState = '{"columns":[{"pinned":true,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"testCss","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"number","hasSummary":false,"field":"ProductID","width":"150px","header":"Product ID","resizable":true,"searchable":false,"parent":null,"columnGroup":false,"disableHiding":false,"disablePinning":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"150px","header":"Prodyct Name","resizable":true,"searchable":true,"selectable":false,"parent":null,"columnGroup":false,"disableHiding":false,"disablePinning":false},{"pinned":false,"sortable":false,"filterable":true,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":false,"movable":false,"hidden":false,"dataType":"boolean","hasSummary":true,"field":"InStock","width":"140px","header":"In Stock","resizable":true,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false,"disablePinning":true},{"pinned":false,"sortable":true,"filterable":false,"editable":true,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","maxWidth":"300px","groupable":true,"movable":false,"hidden":false,"dataType":"date","hasSummary":false,"field":"OrderDate","width":"110px","header":"Date ordered","resizable":false,"searchable":true,"parent":null,"columnGroup":false,"disableHiding":false,"disablePinning":false}]}';
+        const columnsState = '{"columns":[{"pinned":false,"sortable":false,"filterable":false,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductID","width":"199px","header":"General Information","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":false,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"width":"398px","header":"General Information","resizable":false,"searchable":true,"selectable":true,"parent":null,"columnGroup":true,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"ProductName","width":"199px","header":"","resizable":true,"searchable":true,"selectable":true,"parent":"General Information","columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"UnitsInStock","width":"199px","header":"","resizable":true,"searchable":true,"selectable":true,"parent":"General Information","columnGroup":false,"disableHiding":false},{"pinned":false,"sortable":true,"filterable":true,"editable":false,"sortingIgnoreCase":true,"filteringIgnoreCase":true,"headerClasses":"","headerGroupClasses":"","groupable":false,"movable":false,"hidden":false,"dataType":"string","hasSummary":false,"field":"InStock","width":"199px","header":"","resizable":true,"searchable":true,"selectable":true,"parent":null,"columnGroup":false,"disableHiding":false}],"filtering":{"filteringOperands":[],"operator":0},"advancedFiltering":{},"sorting":[],"groupBy":{"expressions":[],"expansion":[],"defaultExpanded":true},"cellSelection":[],"rowSelection":[],"columnSelection":[],"rowPinning":[],"expansion":[],"moving":true,"rowIslands":[]}';
+        /* eslint-enable max-len */
+        const columnsStateObject = JSON.parse(columnsState);
+        let gridState = state.getState(true, 'columns');
+        expect(gridState).toBe(initialState);
+        expect(() => {
+            state.setState(columnsStateObject);
+        }).not.toThrow();
+
+        gridState = state.getState(false, 'columns') as IGridState;
+        HelperFunctions.verifyColumns(columnsStateObject.columns, gridState);
+    });
+
     it('setState should correctly restore grid paging state from string', () => {
         const fix = TestBed.createComponent(IgxGridStateComponent);
         fix.detectChanges();

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

@@ -216,7 +216,7 @@ export class IgxGridStateDirective {
                         Object.assign(ref1.instance, colState);
                         ref1.instance.grid = context.currGrid;
                         if (ref1.instance.parent) {
-                            const columnGroup: IgxColumnGroupComponent = newColumns.find(e => e.header === ref1.instance.parent);
+                            const columnGroup: IgxColumnGroupComponent = newColumns.find(e => e.header === ref1.instance.parent  && e.columnGroup);
                             columnGroup.children.reset([...columnGroup.children.toArray(), ref1.instance]);
                             ref1.instance.parent = columnGroup;
                         }
@@ -227,7 +227,7 @@ export class IgxGridStateDirective {
                         Object.assign(ref.instance, colState);
                         ref.instance.grid = context.currGrid;
                         if (ref.instance.parent) {
-                            const columnGroup: IgxColumnGroupComponent = newColumns.find(e => e.header === ref.instance.parent);
+                            const columnGroup: IgxColumnGroupComponent = newColumns.find(e => e.header === ref.instance.parent && e.columnGroup);
                             if (columnGroup) {
                                 ref.instance.parent = columnGroup;
                                 columnGroup.children.reset([...columnGroup.children.toArray(), ref.instance]);