Merge branch 'master' into SKrastev/mrl-resizing

IgniteUI · May 10, 2019 · fc132ec · fc132ec
2 parents 84e5aa1 + d15ccb5
commit fc132ec
Show file tree

Hide file tree

Showing 4 changed files with 106 additions and 17 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
@@ -1267,13 +1267,21 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
         }
     }
 
-    protected get sizesCache(): number[] {
+    /**
+     * @hidden
+     * @internal
+     */
+    public get sizesCache(): number[] {
         if (this.syncService.isMaster(this)) {
             return this._sizesCache;
         }
         return this.syncService.sizesCache(this.igxForScrollOrientation);
     }
-    protected set sizesCache(value: number[]) {
+    /**
+     * @hidden
+     * @internal
+     */
+    public set sizesCache(value: number[]) {
         this._sizesCache = value;
     }
 
@@ -1392,6 +1400,15 @@ export class IgxGridForOfDirective<T> extends IgxForOfDirective<T> implements On
         return newHeight;
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public assumeMaster(): void {
+        this._sizesCache = this.syncService.sizesCache(this.igxForScrollOrientation);
+        this.syncService.setMaster(this, true);
+    }
+
     ngDoCheck() {
         if (this._differ) {
             const changes = this._differ.diff(this.igxForOf);

diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.sync.service.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.sync.service.ts
@@ -6,49 +6,43 @@ import { IgxGridForOfDirective } from './for_of.directive';
 })
 export class IgxForOfSyncService {
 
-    private _master: Map<string, IgxGridForOfDirective<any>>;
-
-    constructor() {
-        this.resetMaster();
-    }
+    private _master: Map<string, IgxGridForOfDirective<any>> = new Map<string, IgxGridForOfDirective<any>>();
 
     /**
      * @hidden
      */
     public isMaster(directive: IgxGridForOfDirective<any>): boolean {
-        return this._master[directive.igxForScrollOrientation] === directive;
+        return this._master.get(directive.igxForScrollOrientation) === directive;
     }
 
     /**
      * @hidden
      */
-    public setMaster(directive: IgxGridForOfDirective<any>) {
-        if (!this._master[directive.igxForScrollOrientation]) {
-            this._master[directive.igxForScrollOrientation] = directive;
+    public setMaster(directive: IgxGridForOfDirective<any>, forced = false) {
+        const orientation = directive.igxForScrollOrientation;
+        if (orientation && (forced || !this._master.has(orientation))) {
+            this._master.set(orientation, directive);
         }
     }
 
     /**
      * @hidden
      */
     public resetMaster() {
-        this._master = new Map<string, IgxGridForOfDirective<any>>([
-            ['horizontal', null],
-            ['vertical', null]
-        ]);
+        this._master.clear();
     }
 
     /**
      * @hidden
      */
     public sizesCache(dir: string): number[] {
-        return this._master[dir].sizesCache;
+        return this._master.get(dir).sizesCache;
     }
 
     /**
      * @hidden
      */
     public chunkSize(dir: string): number {
-        return this._master[dir].state.chunkSize;
+        return this._master.get(dir).state.chunkSize;
     }
 }
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.component.ts b/projects/igniteui-angular/src/lib/grids/grid-base.component.ts
@@ -2695,6 +2695,17 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
         this.columnList.forEach(column => column.resetVisibleIndex());
     }
 
+    /**
+     * @hidden
+     * @internal
+     */
+    public resetForOfCache() {
+        const firstVirtRow = this.dataRowList.first;
+        if (firstVirtRow) {
+            firstVirtRow.virtDirRow.assumeMaster();
+        }
+    }
+
     /**
      * @hidden
      * @internal
@@ -2720,6 +2731,7 @@ export abstract class IgxGridBaseComponent extends DisplayDensityBase implements
      * @internal
      */
     public resetCaches() {
+        this.resetForOfCache();
         this.resetColumnsVisibleIndexCache();
         this.resetColumnCollections();
         this.resetCachedWidths();

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
@@ -8,6 +8,7 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { IgxGridAPIService } from './grid-api.service';
 import { IgxGridComponent } from './grid.component';
+import { IgxRowComponent } from '../row.component';
 import { IgxGridTransaction, IGridEditEventArgs } from '../grid-base.component';
 import { IgxColumnComponent } from '../column.component';
 import { IForOfState } from '../../directives/for-of/for_of.directive';
@@ -473,6 +474,71 @@ describe('IgxGrid Component Tests', () => {
         }));
     });
 
+    describe('IgxGrid - virtualization tests', () => {
+        configureTestSuite();
+        beforeEach(async(() => {
+            TestBed.configureTestingModule({
+                declarations: [
+                    IgxGridTestComponent
+                ],
+                imports: [
+                    NoopAnimationsModule, IgxGridModule]
+            }).compileComponents();
+        }));
+
+        it('should change chunk size for every record after enlarging the grid and the horizontal dirs are scrambled', async () => {
+            const fix = TestBed.createComponent(IgxGridTestComponent);
+            for (let i = 2; i < 100; i++) {
+                fix.componentInstance.data.push({ index: i, value: i, desc: i, detail: i });
+            }
+            fix.componentInstance.columns[0].width = '400px';
+            fix.componentInstance.columns[1].width = '400px';
+            fix.componentInstance.columns.push(
+                { field: 'desc', header: 'desc', dataType: 'number', width: '400px', hasSummary: false },
+                { field: 'detail', header: 'detail', dataType: 'number', width: '400px', hasSummary: false }
+            );
+            fix.detectChanges();
+            fix.componentInstance.grid.verticalScrollContainer.getVerticalScroll().scrollTop = 100;
+            await wait(100);
+            fix.detectChanges();
+            fix.componentInstance.grid.verticalScrollContainer.getVerticalScroll().scrollTop = 250;
+            await wait(100);
+            fix.detectChanges();
+            fix.componentInstance.grid.width = '1300px';
+            await wait(100);
+            fix.detectChanges();
+            const rows = fix.componentInstance.grid.rowList.toArray();
+            for (let i = 0; i < rows.length; i++) {
+                const row = rows[i] as IgxRowComponent<any>;
+                expect(row.cells.length).toEqual(4);
+            }
+        });
+
+        it('should not keep a cached-out template as master after column resizing', async() => {
+            const fix = TestBed.createComponent(IgxGridTestComponent);
+            for (let i = 2; i < 100; i++) {
+                fix.componentInstance.data.push({ index: i, value: i, desc: i, detail: i });
+            }
+            fix.componentInstance.columns[0].width = '400px';
+            fix.componentInstance.columns[1].width = '400px';
+            fix.componentInstance.columns.push(
+                { field: 'desc', header: 'desc', dataType: 'number', width: '400px', hasSummary: false },
+                { field: 'detail', header: 'detail', dataType: 'number', width: '400px', hasSummary: false }
+            );
+            fix.detectChanges();
+            fix.componentInstance.grid.groupBy({ fieldName: 'value', dir: SortingDirection.Asc });
+            fix.detectChanges();
+            fix.componentInstance.grid.getColumnByName('index').width = '100px';
+            fix.detectChanges();
+            await wait();
+            const rows = fix.componentInstance.grid.dataRowList.toArray();
+            for (let i = 0; i < rows.length; i++) {
+                const row = rows[i] as IgxRowComponent<any>;
+                expect(row.cells.length).toEqual(4);
+            }
+        });
+    });
+
     describe('IgxGrid - default rendering for rows and columns', () => {
         configureTestSuite();
         beforeEach(async(() => {