feat(igxGrid): Add onScroll event for grid.

Author: MKirova

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';
@@ -361,6 +362,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
@@ -2654,6 +2666,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) => {
@@ -2669,6 +2687,8 @@ export class IgxGridBaseDirective extends DisplayDensityBase implements
         });
 
         this.hideOverlays();
+        const args: IGridScrollEventArgs = { direction: 'horizontal', event: event, scrollPosition: this.headerContainer.scrollPosition  };
+        this.onScroll.emit(args);
     }
 
     /**

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', () => {