Merge branch '8.1.x' into mkirova/fix-5751-8.1.x

Author: zdrawku

projects/igniteui-angular/src/lib/core/styles/components/grid/_excel-filtering-theme.scss

@@ -12,7 +12,6 @@
 /// @requires --var
 @mixin _excel-filtering($theme, $palette) {
     %grid-excel-filter {
-        height: rem(15px);
         display: block;
     }
 

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

@@ -255,6 +255,19 @@ describe('IgxForOf directive -', () => {
             }
         });
 
+        it('should not throw error when itemSize is changed while data is null/undefined.', () => {
+            let errorMessage = '';
+            fix.componentInstance.data = null;
+            fix.detectChanges();
+            try {
+                fix.componentInstance.itemSize = '100px';
+                fix.detectChanges();
+            } catch (ex) {
+                errorMessage = ex.message;
+            }
+            expect(errorMessage).toBe('');
+        });
+
         it('should allow initially undefined value for igxForOf and then detect changes correctly once the value is updated', async () => {
             fix = TestBed.createComponent(VerticalVirtualNoDataComponent);
             expect(() => {

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

@@ -423,7 +423,8 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
             }
         }
         const defaultItemSize = 'igxForItemSize';
-        if (defaultItemSize in changes && !changes[defaultItemSize].firstChange && this.igxForScrollOrientation === 'vertical') {
+        if (defaultItemSize in changes && !changes[defaultItemSize].firstChange &&
+            this.igxForScrollOrientation === 'vertical' && this.igxForOf) {
             // handle default item size changed.
             this.initSizesCache(this.igxForOf);
             this._applyChanges();
@@ -1325,7 +1326,8 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
             }
         }
         const defaultItemSize = 'igxForItemSize';
-        if (defaultItemSize in changes && !changes[defaultItemSize].firstChange && this.igxForScrollOrientation === 'vertical') {
+        if (defaultItemSize in changes && !changes[defaultItemSize].firstChange &&
+             this.igxForScrollOrientation === 'vertical' && this.igxForOf) {
             // handle default item size changed.
             this.initSizesCache(this.igxForOf);
         }

projects/igniteui-angular/src/lib/grids/filtering/excel-style/grid.excel-style-filtering.component.ts

@@ -14,10 +14,10 @@ import {
 import {
     HorizontalAlignment,
     VerticalAlignment,
-    ConnectedPositioningStrategy,
     OverlaySettings,
     IgxOverlayService,
-    AbsoluteScrollStrategy
+    AbsoluteScrollStrategy,
+    AutoPositionStrategy
 } from '../../../services/index';
 import { IgxFilteringService, ExpressionUI } from '../grid-filtering.service';
 import { IgxToggleDirective } from '../../../directives/toggle/toggle.directive';
@@ -115,7 +115,7 @@ export class IgxGridExcelStyleFilteringComponent implements OnDestroy, OnInit, A
     private _subMenuOverlaySettings: OverlaySettings = {
         closeOnOutsideClick: true,
         modal: false,
-        positionStrategy: new ConnectedPositioningStrategy(this._subMenuPositionSettings),
+        positionStrategy: new AutoPositionStrategy(this._subMenuPositionSettings),
         scrollStrategy: new AbsoluteScrollStrategy()
     };
 

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

@@ -163,6 +163,7 @@ export abstract class IgxHierarchicalGridBaseComponent extends IgxGridBaseCompon
         const result = flatten(columns);
         this.columnList.reset(result);
         this.columnList.notifyOnChanges();
+        this.initPinning();
     }
 
     protected _createColumn(col) {

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.integration.spec.ts

@@ -942,6 +942,35 @@ describe('IgxHierarchicalGrid Integration', () => {
             expect(childGrid.columnList.toArray()[0].pinned).toBeTruthy();
             expect(headers[0].classList.contains('igx-grid__th--pinned')).toBeTruthy();
         }));
+
+        it('should be applied correctly for child grid with multi-column header.', (() => {
+            const ri = fixture.componentInstance.rowIsland;
+            const col = ri.columnList.find(x => x.header === 'Information');
+            col.pinned = true;
+            fixture.detectChanges();
+
+            const row = hierarchicalGrid.getRowByIndex(0) as IgxHierarchicalRowComponent;
+            UIInteractions.clickElement(row.expander);
+            fixture.detectChanges();
+
+            const childGrids =  fixture.debugElement.queryAll(By.css('igx-child-grid-row'));
+            const childGrid = childGrids[0].query(By.css('igx-hierarchical-grid')).componentInstance;
+            // check unpinned/pinned columns
+            expect(childGrid.pinnedColumns.length).toBe(3);
+            expect(childGrid.unpinnedColumns.length).toBe(1);
+             // check cells
+            const cells = childGrid.getRowByIndex(0).cells;
+            expect(cells.length).toBe(3);
+            let cell = childGrid.getCellByColumn(0, 'ChildLevels');
+            expect(cell.visibleColumnIndex).toEqual(0);
+            expect(cell.nativeElement.classList.contains('igx-grid__td--pinned')).toBe(true);
+            cell = childGrid.getCellByColumn(0, 'ProductName');
+            expect(cell.visibleColumnIndex).toEqual(1);
+            expect(cell.nativeElement.classList.contains('igx-grid__td--pinned')).toBe(true);
+            cell = childGrid.getCellByColumn(0, 'ID');
+            expect(cell.visibleColumnIndex).toEqual(2);
+            expect(cell.nativeElement.classList.contains('igx-grid__td--pinned')).toBe(false);
+        }));
     });
 });
 

src/app/hierarchical-grid-remote/hierarchical-grid-remote.sample.html

@@ -1,6 +1,6 @@
 <button (click)='setterBindingChange()'>Set rowSelectable via binding</button>
 <button (click)='setterChange()'>Set rowSelectable via setter on 1st row island</button>
-<igx-hierarchical-grid #grid1 [data]="remoteData" [primaryKey]="'CustomerID'" [autoGenerate]="false" [height]="'800px'" [width]="'100%'" #hGrid [emptyGridMessage]="''">
+<igx-hierarchical-grid #grid1  displayDensity="cosy" [data]="remoteData" [primaryKey]="'CustomerID'" [autoGenerate]="false" [height]="'800px'" [width]="'100%'" #hGrid [emptyGridMessage]="''">
     <igx-column field="CustomerID"></igx-column>
     <igx-column field="CompanyName"></igx-column>
     <igx-column field="ContactName"></igx-column>