Merge pull request #7511 from IgniteUI/pbozhinov/fix-7416

refactor(*): Moves remote virtualization methods to supported grids

Author: ChronosSF

CHANGELOG.md

@@ -13,6 +13,11 @@ All notable changes for each version of this project will be documented in this
     - Added `closeOnEscapeKey` - with it, the dialog can be allowed or prevented from closing when `Esc` is pressed.
 - `IgxNavbar`:
     - **Breaking Changes** - The `igx-action-icon` has been renamed to `igx-navbar-action`. It should get renamed in your components via `ng update`;
+- `igxGrid`
+    - Added `onScroll` event, which is emitted when the grid is scrolled vertically or horizontally.
+- `igxTreeGrid`
+    - Removed `onDataPreLoad` event as it is specific for remote virtualization implementation, which is not supported for the `igxTreeGrid`. A more generic `onScroll` event is exposed and can be used instead.
+
 ### New Features
 - `IgxGridState` directive
     - Added support for expansion states, column selection and row pinning.

projects/igniteui-angular/migrations/update-10_1_0/changes/outputs.json

@@ -0,0 +1,13 @@
+{
+    "$schema": "../../common/schema/binding.schema.json",
+    "changes": [
+        {
+            "name": "onDataPreLoad",
+            "replaceWith": "onScroll",
+            "owner": {
+                "selector": "igx-tree-grid",
+                "type": "component"
+            }
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-10_1_0/index.spec.ts

@@ -105,4 +105,18 @@ describe('Update 10.1.0', () => {
             .toEqual(expectedFileContent);
     });
 
+    it('should replace onDataPreLoad with onScroll ', async () => {
+        appTree.create(
+            `/testSrc/appPrefix/component/tree-grid.component.html`,
+            '<igx-tree-grid (onDataPreLoad)="handleEvent($event)"></igx-tree-grid>'
+        );
+
+        const tree = await schematicRunner.runSchematicAsync('migration-16', {}, appTree)
+            .toPromise();
+
+        expect(tree.readContent('/testSrc/appPrefix/component/tree-grid.component.html'))
+            .toEqual('<igx-tree-grid (onScroll)="handleEvent($event)"></igx-tree-grid>');
+
+    });
+
 });

projects/igniteui-angular/src/lib/grids/common/events.ts

@@ -150,3 +150,15 @@ export interface IPinRowEventArgs extends IBaseEventArgs {
     /** Whether or noy the row is pinned or unpinned. */
     readonly isPinned: boolean;
 }
+
+/**
+ * Event emitted when a grid is scrolled.
+ */
+export interface IGridScrollEventArgs extends IBaseEventArgs {
+    /** The scroll direction - vertical or horizontal. */
+    direction: string;
+    /** The original browser scroll event. */
+    event: Event;
+    /** The new scroll position */
+    scrollPosition: number;
+}

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -138,7 +138,8 @@ import {
     ICellPosition,
     IRowToggleEventArgs,
     IColumnSelectionEventArgs,
-    IPinRowEventArgs
+    IPinRowEventArgs,
+    IGridScrollEventArgs
 } from './common/events';
 import { IgxAdvancedFilteringDialogComponent } from './filtering/advanced-filtering/advanced-filtering-dialog.component';
 import { GridType } from './common/grid.interface';
@@ -360,6 +361,17 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     @Output()
     public advancedFilteringExpressionsTreeChange = new EventEmitter<IFilteringExpressionsTree>();
 
+    /**
+     * Emitted when grid is scrolled horizontally/vertically.
+     * @example
+     * ```html
+     * <igx-grid #grid [data]="localData" [height]="'305px'" [autoGenerate]="true"
+     *              (onScroll)="onScroll($event)"></igx-grid>
+     * ```
+     */
+    @Output()
+    public onScroll = new EventEmitter<IGridScrollEventArgs>();
+
     /**
      * Gets/Sets the advanced filtering state.
      * @example
@@ -1281,16 +1293,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
     @Output()
     public onRowDeleted = new EventEmitter<IRowDataEventArgs>();
 
-    /**
-     * Emitted when a new chunk of data is loaded from virtualization.
-     * @example
-     * ```typescript
-     *  <igx-grid #grid [data]="localData" [autoGenerate]="true" (onDataPreLoad)='handleDataPreloadEvent()'></igx-grid>
-     * ```
-     */
-    @Output()
-    public onDataPreLoad = new EventEmitter<IForOfState>();
-
     /**
      * Emitted when column is resized.
      * @remarks
@@ -2663,6 +2665,12 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         this.disableTransitions = false;
 
         this.hideOverlays();
+        const args: IGridScrollEventArgs = {
+            direction: 'vertical',
+            event: event,
+            scrollPosition: this.verticalScrollContainer.scrollPosition
+        };
+        this.onScroll.emit(args);
     }
 
     private horizontalScrollHandler = (event) => {
@@ -2678,6 +2686,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         });
 
         this.hideOverlays();
+        const args: IGridScrollEventArgs = { direction: 'horizontal', event: event, scrollPosition: this.headerContainer.scrollPosition  };
+        this.onScroll.emit(args);
     }
 
     /**
@@ -3220,13 +3230,6 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         });
     }
 
-    /**
-     * @hidden @internal
-     */
-    public dataLoading(event) {
-        this.onDataPreLoad.emit(event);
-    }
-
     /**
      * Toggles the specified column's visibility.
      * @example

projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts

@@ -1597,6 +1597,48 @@ describe('IgxGrid Component Tests #grid', () => {
 
             expect(grid.verticalScrollContainer.getScroll().scrollTop).toEqual(200);
         });
+
+        it('should emit onScroll event when scrolling horizontally/vertically', async() => {
+            const fix = TestBed.createComponent(IgxGridDefaultRenderingComponent);
+            fix.componentInstance.initColumnsRows(30, 10);
+            fix.detectChanges();
+
+            const grid = fix.componentInstance.grid;
+            grid.height = '300px';
+            grid.width = '300px';
+            fix.detectChanges();
+
+            spyOn(grid.onScroll, 'emit').and.callThrough();
+            let verticalScrollEvent;
+            let horizontalScrollEvent;
+            grid.verticalScrollContainer.getScroll().addEventListener('scroll', (evt) => verticalScrollEvent = evt);
+            grid.headerContainer.getScroll().addEventListener('scroll', (evt) => horizontalScrollEvent = evt);
+
+            grid.navigateTo(20, 0);
+            fix.detectChanges();
+            await wait(100);
+            fix.detectChanges();
+
+            expect(grid.onScroll.emit).toHaveBeenCalledTimes(1);
+            expect(grid.onScroll.emit).toHaveBeenCalledWith({
+                direction: 'vertical',
+                scrollPosition: grid.verticalScrollContainer.getScrollForIndex(20, true),
+                event: verticalScrollEvent
+            });
+
+            grid.navigateTo(20, 6);
+            fix.detectChanges();
+            await wait(100);
+            fix.detectChanges();
+
+            expect(grid.onScroll.emit).toHaveBeenCalledTimes(2);
+            expect(grid.onScroll.emit).toHaveBeenCalledWith({
+                direction: 'horizontal',
+                scrollPosition: grid.headerContainer.getScrollForIndex(6, true),
+                event: horizontalScrollEvent
+            });
+
+        });
     });
 
     describe('IgxGrid - Integration with other Igx Controls', () => {

projects/igniteui-angular/src/lib/grids/grid/grid.component.ts

@@ -12,6 +12,7 @@ import { IGroupByRecord } from '../../data-operations/groupby-record.interface';
 import { IgxGroupByRowTemplateDirective, IgxGridDetailTemplateDirective } from './grid.directives';
 import { IgxGridGroupByRowComponent } from './groupby-row.component';
 import { IGroupByExpandState } from '../../data-operations/groupby-expand-state.interface';
+import { IForOfState } from '../../directives/for-of/for_of.directive';
 import { IBaseChipEventArgs, IChipClickEventArgs, IChipKeyDownEventArgs } from '../../chips/chip.component';
 import { IChipsAreaReorderEventArgs } from '../../chips/chips-area.component';
 import { IgxColumnComponent } from '../columns/column.component';
@@ -168,6 +169,16 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         this._filteredData = value;
     }
 
+    /**
+     * Emitted when a new chunk of data is loaded from virtualization.
+     * @example
+     * ```typescript
+     *  <igx-grid #grid [data]="localData" [autoGenerate]="true" (onDataPreLoad)='handleDataPreloadEvent()'></igx-grid>
+     * ```
+     */
+    @Output()
+    public onDataPreLoad = new EventEmitter<IForOfState>();
+
     /**
      * Gets/Sets the total number of records in the data source.
      * @remarks
@@ -1038,6 +1049,13 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
         super.ngDoCheck();
     }
 
+    /**
+     * @hidden @internal
+     */
+    public dataLoading(event) {
+        this.onDataPreLoad.emit(event);
+    }
+
     /**
      * @inheritdoc
      */

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts

@@ -32,6 +32,7 @@ import { IgxHierarchicalGridBaseDirective } from './hierarchical-grid-base.direc
 import { takeUntil } from 'rxjs/operators';
 import { IgxTemplateOutletDirective } from '../../directives/template-outlet/template_outlet.directive';
 import { IgxGridSelectionService, IgxGridCRUDService } from '../selection/selection.service';
+import { IForOfState } from '../../directives/for-of/for_of.directive';
 import { IgxTransactionService } from '../../services/public_api';
 import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
 import { GridType } from '../common/grid.interface';
@@ -128,8 +129,6 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
      */
     public set filteredData(value) {
         this._filteredData = value;
-
-
     }
 
     /**
@@ -143,6 +142,36 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         return this._filteredData;
     }
 
+    /**
+     * Emitted when a new chunk of data is loaded from virtualization.
+     * @example
+     * ```typescript
+     *  <igx-hierarchical-grid [id]="'igx-grid-1'" [data]="Data" [autoGenerate]="true" (onDataPreLoad)="handleEvent()">
+     *  </igx-hierarchical-grid>
+     * ```
+     */
+    @Output()
+    public onDataPreLoad = new EventEmitter<IForOfState>();
+
+    /**
+     * Gets/Sets the total number of records in the data source.
+     * @remarks
+     * This property is required for remote grid virtualization to function when it is bound to remote data.
+     * @example
+     * ```typescript
+     * const itemCount = this.grid1.totalItemCount;
+     * this.grid1.totalItemCount = 55;
+     * ```
+     */
+    set totalItemCount(count) {
+        this.verticalScrollContainer.totalItemCount = count;
+        this.cdr.detectChanges();
+    }
+
+    get totalItemCount() {
+        return this.verticalScrollContainer.totalItemCount;
+    }
+
     /**
      * Sets if all immediate children of the `IgxHierarchicalGridComponent` should be expanded/collapsed.
      * Defult value is false.
@@ -362,6 +391,13 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         super.ngAfterContentInit();
     }
 
+    /**
+     * @hidden @internal
+     */
+    public dataLoading(event) {
+        this.onDataPreLoad.emit(event);
+    }
+
     /** @hidden */
     public featureColumnsWidth() {
         return super.featureColumnsWidth(this.headerHierarchyExpander);

projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.virtualization.spec.ts

@@ -8,7 +8,7 @@ import { IgxRowIslandComponent } from './row-island.component';
 import { wait, UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { By } from '@angular/platform-browser';
 import { first, delay } from 'rxjs/operators';
-import { setupHierarchicalGridScrollDetection } from '../../test-utils/helper-utils.spec';
+import { setupHierarchicalGridScrollDetection, resizeObserverIgnoreError } from '../../test-utils/helper-utils.spec';
 import { FilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
 import { FilteringLogic } from '../../data-operations/filtering-expression.interface';
 import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
@@ -280,7 +280,8 @@ describe('IgxHierarchicalGrid Virtualization #hGrid', () => {
             .not.toBe(-1);
     });
 
-it('should update scroll height after expanding/collapsing row in a nested child grid that has no height.', async () => {
+    it('should update scroll height after expanding/collapsing row in a nested child grid that has no height.', async () => {
+        resizeObserverIgnoreError();
         fixture.componentInstance.data = [
             { ID: 0, ChildLevels: 3, ProductName: 'Product: A0 ' },
             { ID: 1, ChildLevels: 3, ProductName: 'Product: A0 ' },
@@ -299,10 +300,10 @@ it('should update scroll height after expanding/collapsing row in a nested child
         expect(scrHeight).toBe(0);
 
         (hierarchicalGrid.dataRowList.toArray()[2].nativeElement.children[0] as HTMLElement).click();
-        await wait(100);
+        await wait(200);
         fixture.detectChanges();
         hierarchicalGrid.verticalScrollContainer.scrollNext();
-        await wait(100);
+        await wait(200);
         fixture.detectChanges();
 
         const childGrid1 = hierarchicalGrid.hgridAPI.getChildGrids(false)[0];
@@ -311,14 +312,14 @@ it('should update scroll height after expanding/collapsing row in a nested child
 
         // expand
         (childGrid1.dataRowList.toArray()[0].nativeElement.children[0] as HTMLElement).click();
-        await wait(100);
+        await wait(200);
         fixture.detectChanges();
         scrHeight = hierarchicalGrid.verticalScrollContainer.getScroll().scrollHeight;
         expect(scrHeight).toBe(3 * 51 + childGrid1.nativeElement.closest('.igx-grid__tr-container').offsetHeight - 1);
 
         // collapse
         (childGrid1.dataRowList.toArray()[0].nativeElement.children[0] as HTMLElement).click();
-        await wait(100);
+        await wait(200);
         fixture.detectChanges();
         scrHeight = hierarchicalGrid.verticalScrollContainer.getScroll().scrollHeight;
         expect(scrHeight).toBe(3 * 51 + childGrid1.nativeElement.closest('.igx-grid__tr-container').offsetHeight - 1);
@@ -336,7 +337,7 @@ it('should update scroll height after expanding/collapsing row in a nested child
         expect(childRowComponent.index).toBe(4);
 
         hierarchicalGrid.verticalScrollContainer.scrollNext();
-        await wait(100);
+        await wait(200);
         fixture.detectChanges();
         childRowComponent = fixture.debugElement.query(By.css('igx-child-grid-row')).componentInstance;
         expect(childRowComponent.rowData.rowID).toBe('3');

projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html

@@ -107,8 +107,7 @@
         | treeGridSummary:hasSummarizedColumns:summaryCalculationMode:summaryPosition:id:pipeTrigger:summaryPipeTrigger
         | gridRowPinning:id:false:pipeTrigger"
             let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
-            [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" #verticalScrollContainer
-            (onChunkPreload)="dataLoading($event)">
+            [igxForContainerSize]='calcHeight' [igxForItemSize]="renderedRowHeight" #verticalScrollContainer>
             <ng-template [igxTemplateOutlet]='isSummaryRow(rowData) ? summary_template : record_template'
                 [igxTemplateOutletContext]='getContext(rowData, rowIndex, false)'
                 (onCachedViewLoaded)='cachedViewLoaded($event)'>