From 8455484562fdf1a013105b816f5464b58d77111d Mon Sep 17 00:00:00 2001 From: MKirova Date: Thu, 19 Sep 2019 15:50:13 +0300 Subject: [PATCH] fix(igxGrid): If set data is null/undefined update views accordingly. --- .../lib/directives/for-of/for_of.directive.ts | 4 ++-- .../src/lib/grids/grid/grid.component.spec.ts | 23 +++++++++++++++++++ .../grid-remote-virtualization.sample.html | 2 ++ .../grid-remote-virtualization.sample.ts | 17 +++++++++++--- src/app/shared/remote.service.ts | 8 +++++++ 5 files changed, 49 insertions(+), 5 deletions(-) diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts index 108ea43554f..aafd0b2cf4f 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.ts @@ -411,7 +411,7 @@ export class IgxForOfDirective implements OnInit, OnChanges, DoCheck, OnDestr if (changes) { // re-init cache. if (!this.igxForOf) { - return; + this.igxForOf = []; } this._updateSizeCache(); this._zone.run(() => { @@ -1451,7 +1451,7 @@ export class IgxGridForOfDirective extends IgxForOfDirective 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 diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index ab69a74b22b..e26c2246cef 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/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; diff --git a/src/app/grid-remote-virtualization/grid-remote-virtualization.sample.html b/src/app/grid-remote-virtualization/grid-remote-virtualization.sample.html index 8c244969b93..2ee5755c45f 100644 --- a/src/app/grid-remote-virtualization/grid-remote-virtualization.sample.html +++ b/src/app/grid-remote-virtualization/grid-remote-virtualization.sample.html @@ -3,4 +3,6 @@ + + diff --git a/src/app/grid-remote-virtualization/grid-remote-virtualization.sample.ts b/src/app/grid-remote-virtualization/grid-remote-virtualization.sample.ts index f6fe5491899..37b0cf3718e 100644 --- a/src/app/grid-remote-virtualization/grid-remote-virtualization.sample.ts +++ b/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) { diff --git a/src/app/shared/remote.service.ts b/src/app/shared/remote.service.ts index 7b5f79caf7f..18b232bb8ba 100644 --- a/src/app/shared/remote.service.ts +++ b/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(