Merge branch '7.3.x' into mkirova/fix-5683

Author: mpavlinov

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

@@ -412,7 +412,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(() => {
@@ -1453,7 +1453,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/grid/grid.component.spec.ts

@@ -145,6 +145,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;
@@ -4424,6 +4439,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);
@@ -4461,6 +4480,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

@@ -143,6 +143,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

@@ -941,6 +941,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/shared/remote.service.ts

@@ -16,6 +16,14 @@ export class RemoteService {
         this.remoteData = this._remoteData.asObservable();
     }
 
+    nullData() {
+        this._remoteData.next(null);
+    }
+
+    undefinedData() {
+        this._remoteData.next(undefined);
+    }
+
     getData(data?: any, cb?: (any) => void) {
         const dataState = data;
         return this.http.get(this.buildUrl(dataState)).pipe(