Merge branch '8.1.x' into validate-comments-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();
@@ -443,7 +444,7 @@ export class IgxForOfDirective<T> implements OnInit, OnChanges, DoCheck, OnDestr
             if (changes) {
                 //  re-init cache.
                 if (!this.igxForOf) {
-                    return;
+                    this.igxForOf = [];
                 }
                 this._updateSizeCache();
                 this._zone.run(() => {
@@ -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);
         }
@@ -1486,7 +1488,7 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
                 this.onDataChanging.emit(args);
                 //  re-init cache.
                 if (!this.igxForOf) {
-                    return;
+                    this.igxForOf = [];
                 }
                 /* we need to reset the master dir if all rows are removed
                 (e.g. because of filtering); if all columns are hidden, rows are

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/grid/grid.component.spec.ts

@@ -150,6 +150,21 @@ describe('IgxGrid Component Tests', () => {
             }
         });
 
+        it('should remove all rows if data becomes null/undefined.', async () => {
+            const fix = TestBed.createComponent(IgxGridRemoteVirtualizationComponent);
+            fix.detectChanges();
+            const grid = fix.componentInstance.instance;
+            expect(grid.rowList.length).toEqual(10);
+
+            fix.componentInstance.nullData();
+            fix.detectChanges();
+
+            const noRecordsSpan = fix.debugElement.query(By.css('.igx-grid__tbody-message'));
+            expect(grid.rowList.length).toEqual(0);
+            expect(noRecordsSpan).toBeTruthy();
+            expect(noRecordsSpan.nativeElement.innerText).toBe('Grid has no data.');
+        });
+
         it('height/width should be calculated depending on number of records', fakeAsync(() => {
             const fix = TestBed.createComponent(IgxGridTestComponent);
             fix.componentInstance.grid.height = null;
@@ -4724,6 +4739,10 @@ export class LocalService {
         this.records = this._records.asObservable();
     }
 
+    nullData() {
+        this._records.next(null);
+    }
+
     public getData(data?: IForOfState, cb?: (any) => void): any {
         const size = data.chunkSize === 0 ? 10 : data.chunkSize;
         this.dataStore = this.generateData(data.startIndex, data.startIndex + size);
@@ -4761,6 +4780,10 @@ export class IgxGridRemoteVirtualizationComponent implements OnInit, AfterViewIn
         this.data = this.localService.records;
     }
 
+    nullData() {
+        this.localService.nullData();
+    }
+
     public ngAfterViewInit() {
         this.localService.getData(this.instance.virtualizationState, (count) => {
             this.instance.totalItemCount = count;

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/grid-remote-virtualization/grid-remote-virtualization.sample.html

@@ -3,4 +3,6 @@
     </igx-grid>
 
     <button (click)="loadData()">loadData</button>
+    <button (click)="loadNullData()">null Data</button>
+    <button (click)="loadUndefinedData()">undefined Data</button>
 </div>

src/app/grid-remote-virtualization/grid-remote-virtualization.sample.ts

@@ -46,13 +46,24 @@ export class GridVirtualizationSampleComponent implements OnInit, AfterViewInit
 
     public loadData() {
         this.grid.shouldGenerate = true;
+        this.remoteService.getData(this.grid.virtualizationState, (data) => {
+            this.remoteData = this.remoteService.remoteData;
+        });
+    }
+
+    public loadNullData() {
+        this.remoteService.nullData();
+        this.remoteData = this.remoteService.remoteData;
+    }
+
+    public loadUndefinedData() {
+        this.remoteService.undefinedData();
         this.remoteData = this.remoteService.remoteData;
     }
 
     public ngAfterViewInit() {
-        this.remoteService.getData(this.grid.virtualizationState, (data) => {
-            this.grid.totalItemCount = data['@odata.count'];
-        });
+        this.remoteService.nullData();
+        this.remoteData = this.remoteService.remoteData;
     }
 
     dataLoading(evt) {

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>