Merge pull request #5830 from IgniteUI/mkirova/fix-5751-8.1.x

fix(igxGrid): If set data is null/undefined update views accordingly.

Author: zdrawku

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

@@ -444,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(() => {
@@ -1488,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/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;

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(