Merge pull request #1838 from IgniteUI/preventDocumentScroll-m

Add scroll directive for igxGrid, which aim si to prevent document scrolling
IgniteUI · Mar 9, 2020 · b244696 · b244696
2 parents 213e70f + 39885a0
commit b244696
Show file tree

Hide file tree

Showing 243 changed files with 1,022 additions and 874 deletions.
diff --git a/live-editing/configs/GridConfigGenerator.ts b/live-editing/configs/GridConfigGenerator.ts
diff --git a/live-editing/configs/HierarchicalGridConfigGenerator.ts b/live-editing/configs/HierarchicalGridConfigGenerator.ts
diff --git a/live-editing/configs/TreeGridConfigGenerator.ts b/live-editing/configs/TreeGridConfigGenerator.ts
diff --git a/live-editing/configs/app-dv-configs/DVGridConfig.ts b/live-editing/configs/app-dv-configs/DVGridConfig.ts
@@ -7,6 +7,7 @@ import { FinJSDemoComponent } from "../../../projects/app-lob/src/app/grid-finjs
 import { LocalDataService } from "../../../projects/app-lob/src/app/grid-finjs/localData.service";
 import { GridComponent } from "../../../projects/app-lob/src/app/grid/grid-boston-marathon/grid.component";
 import { GridMasterDetailSampleComponent } from "../../../projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component";
+import { IgxPreventDocumentScrollModule } from "../../../src/app/directives/prevent-scroll.directive";
 import { DependenciesType } from "../../services/DependenciesType";
 import { AppModuleConfig } from "../core/AppModuleConfig";
 import { Config } from "../core/Config";
@@ -18,15 +19,15 @@ export class DVGridConfigGenerator implements IConfigGenerator {
 
         configs.push(new Config({
             component: GridComponent,
-            additionalFiles: ["/src/app/grid/services/data.ts"],
+            additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/grid/services/data.ts"],
             additionalDependencies: ["igniteui-angular-charts", "igniteui-angular-core"],
             appModuleConfig: new AppModuleConfig({
-                imports: [HttpClientModule, IgxAvatarModule, IgxBadgeModule, IgxButtonModule,
+                imports: [IgxPreventDocumentScrollModule, HttpClientModule, IgxAvatarModule, IgxBadgeModule, IgxButtonModule,
                     IgxGridModule, IgxIconModule, IgxInputGroupModule, IgxProgressBarModule,
                     IgxRippleModule, IgxSwitchModule, GridComponent,
                     IgxSparklineCoreModule, IgxSparklineModule],
                 ngDeclarations: [GridComponent],
-                ngImports: [IgxAvatarModule, IgxBadgeModule, IgxButtonModule, IgxGridModule,
+                ngImports: [IgxPreventDocumentScrollModule, IgxAvatarModule, IgxBadgeModule, IgxButtonModule, IgxGridModule,
                     IgxIconModule, IgxInputGroupModule, IgxProgressBarModule, IgxRippleModule,
                     IgxSwitchModule, HttpClientModule, IgxSparklineCoreModule, IgxSparklineModule]
             })
@@ -35,30 +36,30 @@ export class DVGridConfigGenerator implements IConfigGenerator {
         // master-detail sample
         configs.push(new Config({
             component: GridMasterDetailSampleComponent,
-            additionalFiles: ["/projects/app-lob/src/app/services/athletesData.ts"],
+            additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/projects/app-lob/src/app/services/athletesData.ts"],
             additionalDependencies: ["igniteui-angular-charts", "igniteui-angular-core"],
             appModuleConfig: new AppModuleConfig({
-                imports: [GridMasterDetailSampleComponent, IgxGridModule, IgxCategoryChartModule,
+                imports: [IgxPreventDocumentScrollModule, GridMasterDetailSampleComponent, IgxGridModule, IgxCategoryChartModule,
                     IgxAvatarModule, IgxTabsModule, IgxIconModule, IgxPieChartModule, IgxLegendModule,
                     IgxDividerModule],
                 ngDeclarations: [GridMasterDetailSampleComponent],
-                ngImports: [IgxGridModule, IgxCategoryChartModule, IgxPieChartModule, IgxLegendModule,
+                ngImports: [IgxPreventDocumentScrollModule, IgxGridModule, IgxCategoryChartModule, IgxPieChartModule, IgxLegendModule,
                     IgxAvatarModule, IgxTabsModule, IgxIconModule, IgxDividerModule],
                 ngProviders: []
             })
         }));
 
         configs.push(new Config({
             component: GridCRMComponent,
-            additionalFiles: ["/projects/app-lob/src/app/services/athletesData.ts"],
+            additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/projects/app-lob/src/app/services/athletesData.ts"],
             additionalDependencies: ["igniteui-angular-charts", "igniteui-angular-core"],
             appModuleConfig: new AppModuleConfig({
-                imports: [HttpClientModule, IgxAvatarModule, IgxBadgeModule, IgxButtonModule,
+                imports: [IgxPreventDocumentScrollModule, HttpClientModule, IgxAvatarModule, IgxBadgeModule, IgxButtonModule,
                     IgxGridModule, IgxIconModule, IgxInputGroupModule, IgxProgressBarModule,
                     IgxRippleModule, IgxSwitchModule, IgxToggleModule, IgxCheckboxModule,
                     IgxExcelExporterService, GridCRMComponent, IgxSparklineCoreModule, IgxSparklineModule],
                 ngDeclarations: [GridCRMComponent],
-                ngImports: [IgxAvatarModule, IgxBadgeModule, IgxButtonModule, IgxGridModule,
+                ngImports: [IgxPreventDocumentScrollModule, IgxAvatarModule, IgxBadgeModule, IgxButtonModule, IgxGridModule,
                     IgxIconModule, IgxInputGroupModule, IgxProgressBarModule,
                     IgxRippleModule, IgxSwitchModule, IgxToggleModule, IgxCheckboxModule,
                     HttpClientModule, IgxSparklineCoreModule, IgxSparklineModule],
@@ -70,15 +71,15 @@ export class DVGridConfigGenerator implements IConfigGenerator {
         configs.push(new Config({
             component: FinJSDemoComponent,
             dependenciesType: DependenciesType.Charts,
-            additionalFiles: ["/projects/app-lob/src/app/grid-finjs/localData.service.ts",
+            additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/projects/app-lob/src/app/grid-finjs/localData.service.ts",
                 "/projects/app-lob/src/app/services/financialData.ts"],
             appModuleConfig: new AppModuleConfig({
-                imports: [IgxCategoryChartModule,
+                imports: [IgxPreventDocumentScrollModule, IgxCategoryChartModule,
                     IgxGridModule, IgxButtonGroupModule, IgxIconModule, IgxSliderModule, IgxToggleModule,
                     IgxButtonModule, IgxExcelExporterService, IgxCsvExporterService, IgxSwitchModule,
                     IgxRippleModule, FinJSDemoComponent, IgxDialogModule, LocalDataService],
                 ngDeclarations: [FinJSDemoComponent],
-                ngImports: [IgxGridModule, IgxButtonGroupModule, IgxIconModule, IgxSliderModule, IgxToggleModule,
+                ngImports: [IgxPreventDocumentScrollModule, IgxGridModule, IgxButtonGroupModule, IgxIconModule, IgxSliderModule, IgxToggleModule,
                     IgxButtonModule, IgxSwitchModule, IgxRippleModule, IgxCategoryChartModule, IgxDialogModule],
                 ngProviders: [LocalDataService, IgxExcelExporterService, IgxCsvExporterService]
             })

diff --git a/live-editing/configs/app-dv-configs/DVHierarchicalGridConfig.ts b/live-editing/configs/app-dv-configs/DVHierarchicalGridConfig.ts
@@ -2,6 +2,7 @@
 import { IgxHierarchicalGridModule } from "igniteui-angular";
 import { IgxSparklineCoreModule, IgxSparklineModule } from "igniteui-angular-charts";
 import { HGridColumnResizingSampleComponent } from "../../../projects/app-lob/src/app/hierarchical-grid/hierarchical-grid-column-resizing/hierarchical-grid-resizing.component";
+import { IgxPreventDocumentScrollModule } from "../../../src/app/directives/prevent-scroll.directive";
 import { AppModuleConfig } from "../core/AppModuleConfig";
 import { Config } from "../core/Config";
 import { IConfigGenerator } from "../core/IConfigGenerator";
@@ -11,12 +12,12 @@ export class DVHierarchicalGridConfigGenerator implements IConfigGenerator {
         const configs = new Array<Config>();
 
         configs.push(new Config({
-            additionalFiles: ["/src/app/hierarchical-grid/data.ts"],
+            additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/hierarchical-grid/data.ts"],
             additionalDependencies: ["igniteui-angular-charts", "igniteui-angular-core"],
             appModuleConfig: new AppModuleConfig({
-                imports: [IgxHierarchicalGridModule, HGridColumnResizingSampleComponent, IgxSparklineCoreModule, IgxSparklineModule],
+                imports: [IgxPreventDocumentScrollModule, IgxHierarchicalGridModule, HGridColumnResizingSampleComponent, IgxSparklineCoreModule, IgxSparklineModule],
                 ngDeclarations: [HGridColumnResizingSampleComponent],
-                ngImports: [IgxHierarchicalGridModule, IgxSparklineCoreModule, IgxSparklineModule]
+                ngImports: [IgxPreventDocumentScrollModule, IgxHierarchicalGridModule, IgxSparklineCoreModule, IgxSparklineModule]
             }),
             component: HGridColumnResizingSampleComponent
         }));

diff --git a/live-editing/configs/app-dv-configs/DVTreeGridConfig.ts b/live-editing/configs/app-dv-configs/DVTreeGridConfig.ts
@@ -6,6 +6,7 @@ import { TreeGridChilddatakeySampleComponent } from "../../../projects/app-lob/s
 import { TreeGridPrimaryforeignkeySampleComponent } from "../../../projects/app-lob/src/app/tree-grid/tree-grid-primaryforeignkey-sample/tree-grid-primaryforeignkey-sample.component";
 import { TreeGridFinJSComponent } from "../../../projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component";
 import { TreeGridGroupingPipe } from "../../../projects/app-lob/src/app/treegrid-finjs/tree-grid-grouping.pipe";
+import { IgxPreventDocumentScrollModule } from "../../../src/app/directives/prevent-scroll.directive";
 import { AppModuleConfig } from "../core/AppModuleConfig";
 import { Config } from "../core/Config";
 import { IConfigGenerator } from "../core/IConfigGenerator";
@@ -16,12 +17,12 @@ export class DVTreeGridConfigGenerator implements IConfigGenerator {
 
                 // TreeGrid ChildDataKey Sample
         configs.push(new Config({
-                    additionalFiles: ["/projects/app-lob/src/app/tree-grid/tree-grid-childdatakey-sample/data.ts"],
+                    additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/projects/app-lob/src/app/tree-grid/tree-grid-childdatakey-sample/data.ts"],
                     additionalDependencies: ["igniteui-angular-charts", "igniteui-angular-core"],
                     appModuleConfig: new AppModuleConfig({
-                        imports: [IgxTreeGridModule, TreeGridChilddatakeySampleComponent, IgxExcelExporterService, IgxCsvExporterService, IgxSparklineCoreModule, IgxSparklineModule],
+                        imports: [IgxPreventDocumentScrollModule, IgxTreeGridModule, TreeGridChilddatakeySampleComponent, IgxExcelExporterService, IgxCsvExporterService, IgxSparklineCoreModule, IgxSparklineModule],
                         ngDeclarations: [TreeGridChilddatakeySampleComponent],
-                        ngImports: [IgxTreeGridModule, IgxSparklineCoreModule, IgxSparklineModule],
+                        ngImports: [IgxPreventDocumentScrollModule, IgxTreeGridModule, IgxSparklineCoreModule, IgxSparklineModule],
                         ngProviders: [IgxExcelExporterService, IgxCsvExporterService]
                     }),
                     component: TreeGridChilddatakeySampleComponent,
@@ -30,27 +31,27 @@ export class DVTreeGridConfigGenerator implements IConfigGenerator {
 
         // TreeGrid Primary/Foreign Key Sample
         configs.push(new Config({
-            additionalFiles: ["/projects/app-lob/src/app/tree-grid/tree-grid-primaryforeignkey-sample/data.ts"],
+            additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/projects/app-lob/src/app/tree-grid/tree-grid-primaryforeignkey-sample/data.ts"],
             additionalDependencies: ["igniteui-angular-charts", "igniteui-angular-core"],
             appModuleConfig: new AppModuleConfig({
-                imports: [IgxTreeGridModule, TreeGridPrimaryforeignkeySampleComponent, IgxSparklineCoreModule, IgxSparklineModule],
+                imports: [IgxPreventDocumentScrollModule, IgxTreeGridModule, TreeGridPrimaryforeignkeySampleComponent, IgxSparklineCoreModule, IgxSparklineModule],
                 ngDeclarations: [TreeGridPrimaryforeignkeySampleComponent],
-                ngImports: [IgxTreeGridModule, IgxSparklineCoreModule, IgxSparklineModule]
+                ngImports: [IgxPreventDocumentScrollModule, IgxTreeGridModule, IgxSparklineCoreModule, IgxSparklineModule]
             }),
             component: TreeGridPrimaryforeignkeySampleComponent,
             shortenComponentPathBy: "/tree-grid/"
         }));
 
         configs.push(new Config({
-            additionalFiles: ["/projects/app-lob/src/app/grid-finjs/localData.service.ts",
+            additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/projects/app-lob/src/app/grid-finjs/localData.service.ts",
                 "/projects/app-lob/src/app/services/financialData.ts",
                 "/projects/app-lob/src/app/treegrid-finjs/tree-grid-grouping.pipe.ts"],
             appModuleConfig: new AppModuleConfig({
-                imports: [IgxTreeGridModule, IgxButtonGroupModule, IgxIconModule, IgxSliderModule, IgxToggleModule,
+                imports: [IgxPreventDocumentScrollModule, IgxTreeGridModule, IgxButtonGroupModule, IgxIconModule, IgxSliderModule, IgxToggleModule,
                     IgxButtonModule, IgxExcelExporterService, IgxSwitchModule, IgxRippleModule, TreeGridFinJSComponent,
                     LocalDataService, TreeGridGroupingPipe],
                 ngDeclarations: [TreeGridFinJSComponent, TreeGridGroupingPipe],
-                ngImports: [IgxTreeGridModule, IgxButtonGroupModule, IgxIconModule, IgxSliderModule, IgxToggleModule,
+                ngImports: [IgxPreventDocumentScrollModule, IgxTreeGridModule, IgxButtonGroupModule, IgxIconModule, IgxSliderModule, IgxToggleModule,
                     IgxButtonModule, IgxSwitchModule, IgxRippleModule],
                 ngProviders: [LocalDataService, IgxExcelExporterService]
             }),

diff --git a/projects/app-lob/src/app/directives/prevent-scroll.directive.ts b/projects/app-lob/src/app/directives/prevent-scroll.directive.ts
@@ -0,0 +1,61 @@
+import { AfterViewInit, Directive, Host, Input, NgModule, Optional } from "@angular/core";
+import { IgxGridBaseDirective } from "igniteui-angular";
+
+@Directive({
+    selector: "[igxPreventDocumentScroll]"
+})
+export class IgxPreventDocumentScrollDirective implements AfterViewInit {
+    private _preventScroll = true;
+    private gridBody: HTMLElement;
+
+    /**
+     *  A boolean indicating if page scroll should be prevented while mouse wheeling over the grid,
+     * when grid scroll has reached top or bottom. Defaults to true.
+     * ```html
+     * <igx-grid igxPreventDocumentScroll></igx-grid>
+     * <igx-grid [igxPreventDocumentScroll]="false"></igx-grid>
+     * ```
+     */
+    @Input("igxPreventDocumentScroll")
+    public set preventScroll(val: boolean) {
+        if (val === false) { this._preventScroll = false; }
+    }
+
+    /**
+     * @hidden
+     */
+    constructor(@Host() @Optional() private grid: IgxGridBaseDirective) {
+        this.gridBody = this.getGridBody();
+    }
+
+    public ngAfterViewInit() {
+        if (this._preventScroll) {
+            this.gridBody.addEventListener("wheel", this.preventDocumentScroll, { passive: false });
+        }
+    }
+
+    public ngOnDestroy() {
+        this.gridBody.removeEventListener("wheel", this.preventDocumentScroll);
+    }
+
+    /**
+     * Prevents scrolling the page, when mouse wheel over the grid body.
+     */
+    private preventDocumentScroll(event) {
+        event.preventDefault();
+    }
+
+    private getGridBody(): HTMLElement {
+        return this.grid.nativeElement;
+    }
+}
+
+/**
+ * @hidden
+ */
+@NgModule({
+    declarations: [IgxPreventDocumentScrollDirective],
+    exports: [IgxPreventDocumentScrollDirective]
+})
+
+export class IgxPreventDocumentScrollModule { }
diff --git a/projects/app-lob/src/app/grid-crm/grid-crm/grid-crm.module.ts b/projects/app-lob/src/app/grid-crm/grid-crm/grid-crm.module.ts
@@ -6,6 +6,7 @@ import {
     IgxGridModule, IgxProgressBarModule
 } from "igniteui-angular";
 import { IgxSparklineCoreModule, IgxSparklineModule } from "igniteui-angular-charts";
+import { IgxPreventDocumentScrollModule } from "../../directives/prevent-scroll.directive";
 import { GridCRMRoutingModule } from "./grid-crm-routing.module";
 import { GridCRMComponent } from "./grid-crm/grid-crm.component";
 
@@ -16,6 +17,7 @@ import { GridCRMComponent } from "./grid-crm/grid-crm.component";
     imports: [
         CommonModule,
         FormsModule,
+        IgxPreventDocumentScrollModule,
         GridCRMRoutingModule,
         IgxGridModule,
         IgxAvatarModule,

diff --git a/projects/app-lob/src/app/grid-crm/grid-crm/grid-crm/grid-crm.component.html b/projects/app-lob/src/app/grid-crm/grid-crm/grid-crm/grid-crm.component.html
@@ -1,5 +1,5 @@
 <div class="grid__wrapper">
-    <igx-grid #grid1 id="grid1" [data]="localData" [height]="'430px'" [width]="'1180px'" [rowSelectable]="true"
+    <igx-grid #grid1 igxPreventDocumentScroll id="grid1" [data]="localData" [height]="'430px'" [width]="'1180px'" [rowSelectable]="true"
         displayDensity="cosy" rowHeight="50" [allowFiltering]="true"
         [showToolbar]="true" [columnHiding]="true" columnHidingTitle="Column Hiding"
         [columnPinning]="true" [exportExcel]="true" [exportCsv]="true" exportExcelText="Export to Excel" exportCsvText="Export to CSV">

diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html
@@ -1,5 +1,5 @@
 <div igxOverlayOutlet class="grid-chart-contextmenu-wrapper">
-    <igx-grid #grid chartIntegration  conditionalFormatting [formatter]="currentFormatter" [chartData]="chartData"
+    <igx-grid igxPreventDocumentScroll #grid chartIntegration  conditionalFormatting [formatter]="currentFormatter" [chartData]="chartData"
          primaryKey='ID' displayDensity="compact" [data]="data">
         <igx-column field='ID' [hidden]='true'></igx-column>
         <igx-column field='Category' [editable]="true" [width]="'110px'"></igx-column>

diff --git a/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.module.ts b/projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.module.ts
@@ -6,6 +6,7 @@ import { IgxBarSeriesModule, IgxCategoryChartModule, IgxCategoryXAxisModule,
     IgxItemLegendComponent, IgxItemLegendModule, IgxLegendComponent, IgxLegendModule,
     IgxNumericXAxisModule, IgxNumericYAxisModule, IgxPieChartComponent } from "igniteui-angular-charts";
 import { IgxPieChartModule } from "igniteui-angular-charts/";
+import { IgxPreventDocumentScrollModule } from "../directives/prevent-scroll.directive";
 import { ChartHostDirective,
     ChartIntegrationDirective } from "./directives/chart-integration/chart-integration.directive";
 import { ConditionalFormattingDirective } from "./directives/conditional-formatting/conditional-formatting.directive";
@@ -26,6 +27,7 @@ import { FilterTypePipe, GridDynamicChartDataComponent, NamePipe } from "./grid-
         IgxDialogModule,
         IgxDividerModule,
         IgxGridModule,
+        IgxPreventDocumentScrollModule,
         IgxTabsModule,
         IgxDataChartCategoryModule,
         IgxDataChartCoreModule,

diff --git a/projects/app-lob/src/app/grid-finjs/grid-finjs-demo.component.html b/projects/app-lob/src/app/grid-finjs/grid-finjs-demo.component.html
@@ -36,9 +36,9 @@
                 ~{{volume/5}} records updated.</span>
         </div>
     </div>
-    <igx-grid #grid1
+    <igx-grid #grid1 igxPreventDocumentScroll
         (onRowSelectionChange)="rowSelectionChanged($event)" [data]="data"
-        width="100%" [autoGenerate]='false' displayDensity='compact'
+        width="100%" height="30%" [autoGenerate]='false' displayDensity='compact'
         columnHidingTitle="Indicators" hiddenColumnsText="Hidden" primaryKey='ID' [rowSelectable]="true"
         [allowFiltering]="true" [filterMode]="'excelStyleFilter'" [showToolbar]="false" [columnHiding]="true"
         [columnPinning]="true" [exportExcel]="true" exportExcelText="Export to Excel">

diff --git a/projects/app-lob/src/app/grid-finjs/grid-finjs.module.ts b/projects/app-lob/src/app/grid-finjs/grid-finjs.module.ts
@@ -10,6 +10,7 @@ import {
     IgxDataChartCategoryModule, IgxDataChartCoreModule, IgxDataChartInteractivityModule, IgxFinancialPriceSeriesModule,
     IgxIndicatorsModule, IgxLegendModule, IgxNumericXAxisModule, IgxNumericYAxisModule
 } from "igniteui-angular-charts";
+import { IgxPreventDocumentScrollModule } from "../directives/prevent-scroll.directive";
 import { FinJSDemoComponent } from "./grid-finjs-demo.component";
 import { GridFinjsRoutingModule } from "./grid-finjs-routing.module";
 import { LocalDataService } from "./localData.service";
@@ -19,7 +20,7 @@ import { LocalDataService } from "./localData.service";
         FinJSDemoComponent
     ],
     imports: [
-
+        IgxPreventDocumentScrollModule,
         CommonModule,
         FormsModule,
         IgxButtonModule,

diff --git a/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.html b/projects/app-lob/src/app/grid/grid-boston-marathon/grid.component.html
@@ -11,7 +11,7 @@ <h5 class="switch-sample__title">Boston Marathon 2020</h5>
         </igx-input-group>
     </div>
 
-    <igx-grid #grid1 [data]="localData" [paging]="true" [perPage]="10" height="600px" (onSelection)="cellSelection($event)" [allowFiltering]="true">
+    <igx-grid #grid1 igxPreventDocumentScroll [data]="localData" [paging]="true" [perPage]="10" height="600px" (onSelection)="cellSelection($event)" [allowFiltering]="true">
         <igx-column header="Rank" headerClasses="myClass" width="115px" field="Id" sortable="true" [filterable]="false">
             <ng-template igxCell let-cell="cell">
                 <div class="cell__inner">