Skip to content

Commit b244696

Browse files
zdrawkuzdrawku
authored
Merge pull request #1838 from IgniteUI/preventDocumentScroll-m
Add scroll directive for igxGrid, which aim si to prevent document scrolling
2 parents 213e70f + 39885a0 commit b244696

File tree

243 files changed

+1022
-874
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

243 files changed

+1022
-874
lines changed

‎live-editing/configs/GridConfigGenerator.ts

Lines changed: 248 additions & 247 deletions
Large diffs are not rendered by default.

‎live-editing/configs/HierarchicalGridConfigGenerator.ts

Lines changed: 166 additions & 165 deletions
Large diffs are not rendered by default.

‎live-editing/configs/TreeGridConfigGenerator.ts

Lines changed: 200 additions & 199 deletions
Large diffs are not rendered by default.

‎live-editing/configs/app-dv-configs/DVGridConfig.ts

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { FinJSDemoComponent } from "../../../projects/app-lob/src/app/grid-finjs
77
import { LocalDataService } from "../../../projects/app-lob/src/app/grid-finjs/localData.service";
88
import { GridComponent } from "../../../projects/app-lob/src/app/grid/grid-boston-marathon/grid.component";
99
import { GridMasterDetailSampleComponent } from "../../../projects/app-lob/src/app/grid/grid-master-detail/grid-master-detail.component";
10+
import { IgxPreventDocumentScrollModule } from "../../../src/app/directives/prevent-scroll.directive";
1011
import { DependenciesType } from "../../services/DependenciesType";
1112
import { AppModuleConfig } from "../core/AppModuleConfig";
1213
import { Config } from "../core/Config";
@@ -18,15 +19,15 @@ export class DVGridConfigGenerator implements IConfigGenerator {
1819

1920
configs.push(new Config({
2021
component: GridComponent,
21-
additionalFiles: ["/src/app/grid/services/data.ts"],
22+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/grid/services/data.ts"],
2223
additionalDependencies: ["igniteui-angular-charts", "igniteui-angular-core"],
2324
appModuleConfig: new AppModuleConfig({
24-
imports: [HttpClientModule, IgxAvatarModule, IgxBadgeModule, IgxButtonModule,
25+
imports: [IgxPreventDocumentScrollModule, HttpClientModule, IgxAvatarModule, IgxBadgeModule, IgxButtonModule,
2526
IgxGridModule, IgxIconModule, IgxInputGroupModule, IgxProgressBarModule,
2627
IgxRippleModule, IgxSwitchModule, GridComponent,
2728
IgxSparklineCoreModule, IgxSparklineModule],
2829
ngDeclarations: [GridComponent],
29-
ngImports: [IgxAvatarModule, IgxBadgeModule, IgxButtonModule, IgxGridModule,
30+
ngImports: [IgxPreventDocumentScrollModule, IgxAvatarModule, IgxBadgeModule, IgxButtonModule, IgxGridModule,
3031
IgxIconModule, IgxInputGroupModule, IgxProgressBarModule, IgxRippleModule,
3132
IgxSwitchModule, HttpClientModule, IgxSparklineCoreModule, IgxSparklineModule]
3233
})
@@ -35,30 +36,30 @@ export class DVGridConfigGenerator implements IConfigGenerator {
3536
// master-detail sample
3637
configs.push(new Config({
3738
component: GridMasterDetailSampleComponent,
38-
additionalFiles: ["/projects/app-lob/src/app/services/athletesData.ts"],
39+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/projects/app-lob/src/app/services/athletesData.ts"],
3940
additionalDependencies: ["igniteui-angular-charts", "igniteui-angular-core"],
4041
appModuleConfig: new AppModuleConfig({
41-
imports: [GridMasterDetailSampleComponent, IgxGridModule, IgxCategoryChartModule,
42+
imports: [IgxPreventDocumentScrollModule, GridMasterDetailSampleComponent, IgxGridModule, IgxCategoryChartModule,
4243
IgxAvatarModule, IgxTabsModule, IgxIconModule, IgxPieChartModule, IgxLegendModule,
4344
IgxDividerModule],
4445
ngDeclarations: [GridMasterDetailSampleComponent],
45-
ngImports: [IgxGridModule, IgxCategoryChartModule, IgxPieChartModule, IgxLegendModule,
46+
ngImports: [IgxPreventDocumentScrollModule, IgxGridModule, IgxCategoryChartModule, IgxPieChartModule, IgxLegendModule,
4647
IgxAvatarModule, IgxTabsModule, IgxIconModule, IgxDividerModule],
4748
ngProviders: []
4849
})
4950
}));
5051

5152
configs.push(new Config({
5253
component: GridCRMComponent,
53-
additionalFiles: ["/projects/app-lob/src/app/services/athletesData.ts"],
54+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/projects/app-lob/src/app/services/athletesData.ts"],
5455
additionalDependencies: ["igniteui-angular-charts", "igniteui-angular-core"],
5556
appModuleConfig: new AppModuleConfig({
56-
imports: [HttpClientModule, IgxAvatarModule, IgxBadgeModule, IgxButtonModule,
57+
imports: [IgxPreventDocumentScrollModule, HttpClientModule, IgxAvatarModule, IgxBadgeModule, IgxButtonModule,
5758
IgxGridModule, IgxIconModule, IgxInputGroupModule, IgxProgressBarModule,
5859
IgxRippleModule, IgxSwitchModule, IgxToggleModule, IgxCheckboxModule,
5960
IgxExcelExporterService, GridCRMComponent, IgxSparklineCoreModule, IgxSparklineModule],
6061
ngDeclarations: [GridCRMComponent],
61-
ngImports: [IgxAvatarModule, IgxBadgeModule, IgxButtonModule, IgxGridModule,
62+
ngImports: [IgxPreventDocumentScrollModule, IgxAvatarModule, IgxBadgeModule, IgxButtonModule, IgxGridModule,
6263
IgxIconModule, IgxInputGroupModule, IgxProgressBarModule,
6364
IgxRippleModule, IgxSwitchModule, IgxToggleModule, IgxCheckboxModule,
6465
HttpClientModule, IgxSparklineCoreModule, IgxSparklineModule],
@@ -70,15 +71,15 @@ export class DVGridConfigGenerator implements IConfigGenerator {
7071
configs.push(new Config({
7172
component: FinJSDemoComponent,
7273
dependenciesType: DependenciesType.Charts,
73-
additionalFiles: ["/projects/app-lob/src/app/grid-finjs/localData.service.ts",
74+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/projects/app-lob/src/app/grid-finjs/localData.service.ts",
7475
"/projects/app-lob/src/app/services/financialData.ts"],
7576
appModuleConfig: new AppModuleConfig({
76-
imports: [IgxCategoryChartModule,
77+
imports: [IgxPreventDocumentScrollModule, IgxCategoryChartModule,
7778
IgxGridModule, IgxButtonGroupModule, IgxIconModule, IgxSliderModule, IgxToggleModule,
7879
IgxButtonModule, IgxExcelExporterService, IgxCsvExporterService, IgxSwitchModule,
7980
IgxRippleModule, FinJSDemoComponent, IgxDialogModule, LocalDataService],
8081
ngDeclarations: [FinJSDemoComponent],
81-
ngImports: [IgxGridModule, IgxButtonGroupModule, IgxIconModule, IgxSliderModule, IgxToggleModule,
82+
ngImports: [IgxPreventDocumentScrollModule, IgxGridModule, IgxButtonGroupModule, IgxIconModule, IgxSliderModule, IgxToggleModule,
8283
IgxButtonModule, IgxSwitchModule, IgxRippleModule, IgxCategoryChartModule, IgxDialogModule],
8384
ngProviders: [LocalDataService, IgxExcelExporterService, IgxCsvExporterService]
8485
})

‎live-editing/configs/app-dv-configs/DVHierarchicalGridConfig.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { IgxHierarchicalGridModule } from "igniteui-angular";
33
import { IgxSparklineCoreModule, IgxSparklineModule } from "igniteui-angular-charts";
44
import { HGridColumnResizingSampleComponent } from "../../../projects/app-lob/src/app/hierarchical-grid/hierarchical-grid-column-resizing/hierarchical-grid-resizing.component";
5+
import { IgxPreventDocumentScrollModule } from "../../../src/app/directives/prevent-scroll.directive";
56
import { AppModuleConfig } from "../core/AppModuleConfig";
67
import { Config } from "../core/Config";
78
import { IConfigGenerator } from "../core/IConfigGenerator";
@@ -11,12 +12,12 @@ export class DVHierarchicalGridConfigGenerator implements IConfigGenerator {
1112
const configs = new Array<Config>();
1213

1314
configs.push(new Config({
14-
additionalFiles: ["/src/app/hierarchical-grid/data.ts"],
15+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/src/app/hierarchical-grid/data.ts"],
1516
additionalDependencies: ["igniteui-angular-charts", "igniteui-angular-core"],
1617
appModuleConfig: new AppModuleConfig({
17-
imports: [IgxHierarchicalGridModule, HGridColumnResizingSampleComponent, IgxSparklineCoreModule, IgxSparklineModule],
18+
imports: [IgxPreventDocumentScrollModule, IgxHierarchicalGridModule, HGridColumnResizingSampleComponent, IgxSparklineCoreModule, IgxSparklineModule],
1819
ngDeclarations: [HGridColumnResizingSampleComponent],
19-
ngImports: [IgxHierarchicalGridModule, IgxSparklineCoreModule, IgxSparklineModule]
20+
ngImports: [IgxPreventDocumentScrollModule, IgxHierarchicalGridModule, IgxSparklineCoreModule, IgxSparklineModule]
2021
}),
2122
component: HGridColumnResizingSampleComponent
2223
}));

‎live-editing/configs/app-dv-configs/DVTreeGridConfig.ts

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { TreeGridChilddatakeySampleComponent } from "../../../projects/app-lob/s
66
import { TreeGridPrimaryforeignkeySampleComponent } from "../../../projects/app-lob/src/app/tree-grid/tree-grid-primaryforeignkey-sample/tree-grid-primaryforeignkey-sample.component";
77
import { TreeGridFinJSComponent } from "../../../projects/app-lob/src/app/treegrid-finjs/tree-grid-finjs-sample.component";
88
import { TreeGridGroupingPipe } from "../../../projects/app-lob/src/app/treegrid-finjs/tree-grid-grouping.pipe";
9+
import { IgxPreventDocumentScrollModule } from "../../../src/app/directives/prevent-scroll.directive";
910
import { AppModuleConfig } from "../core/AppModuleConfig";
1011
import { Config } from "../core/Config";
1112
import { IConfigGenerator } from "../core/IConfigGenerator";
@@ -16,12 +17,12 @@ export class DVTreeGridConfigGenerator implements IConfigGenerator {
1617

1718
// TreeGrid ChildDataKey Sample
1819
configs.push(new Config({
19-
additionalFiles: ["/projects/app-lob/src/app/tree-grid/tree-grid-childdatakey-sample/data.ts"],
20+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/projects/app-lob/src/app/tree-grid/tree-grid-childdatakey-sample/data.ts"],
2021
additionalDependencies: ["igniteui-angular-charts", "igniteui-angular-core"],
2122
appModuleConfig: new AppModuleConfig({
22-
imports: [IgxTreeGridModule, TreeGridChilddatakeySampleComponent, IgxExcelExporterService, IgxCsvExporterService, IgxSparklineCoreModule, IgxSparklineModule],
23+
imports: [IgxPreventDocumentScrollModule, IgxTreeGridModule, TreeGridChilddatakeySampleComponent, IgxExcelExporterService, IgxCsvExporterService, IgxSparklineCoreModule, IgxSparklineModule],
2324
ngDeclarations: [TreeGridChilddatakeySampleComponent],
24-
ngImports: [IgxTreeGridModule, IgxSparklineCoreModule, IgxSparklineModule],
25+
ngImports: [IgxPreventDocumentScrollModule, IgxTreeGridModule, IgxSparklineCoreModule, IgxSparklineModule],
2526
ngProviders: [IgxExcelExporterService, IgxCsvExporterService]
2627
}),
2728
component: TreeGridChilddatakeySampleComponent,
@@ -30,27 +31,27 @@ export class DVTreeGridConfigGenerator implements IConfigGenerator {
3031

3132
// TreeGrid Primary/Foreign Key Sample
3233
configs.push(new Config({
33-
additionalFiles: ["/projects/app-lob/src/app/tree-grid/tree-grid-primaryforeignkey-sample/data.ts"],
34+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/projects/app-lob/src/app/tree-grid/tree-grid-primaryforeignkey-sample/data.ts"],
3435
additionalDependencies: ["igniteui-angular-charts", "igniteui-angular-core"],
3536
appModuleConfig: new AppModuleConfig({
36-
imports: [IgxTreeGridModule, TreeGridPrimaryforeignkeySampleComponent, IgxSparklineCoreModule, IgxSparklineModule],
37+
imports: [IgxPreventDocumentScrollModule, IgxTreeGridModule, TreeGridPrimaryforeignkeySampleComponent, IgxSparklineCoreModule, IgxSparklineModule],
3738
ngDeclarations: [TreeGridPrimaryforeignkeySampleComponent],
38-
ngImports: [IgxTreeGridModule, IgxSparklineCoreModule, IgxSparklineModule]
39+
ngImports: [IgxPreventDocumentScrollModule, IgxTreeGridModule, IgxSparklineCoreModule, IgxSparklineModule]
3940
}),
4041
component: TreeGridPrimaryforeignkeySampleComponent,
4142
shortenComponentPathBy: "/tree-grid/"
4243
}));
4344

4445
configs.push(new Config({
45-
additionalFiles: ["/projects/app-lob/src/app/grid-finjs/localData.service.ts",
46+
additionalFiles: ["/src/app/directives/prevent-scroll.directive.ts", "/projects/app-lob/src/app/grid-finjs/localData.service.ts",
4647
"/projects/app-lob/src/app/services/financialData.ts",
4748
"/projects/app-lob/src/app/treegrid-finjs/tree-grid-grouping.pipe.ts"],
4849
appModuleConfig: new AppModuleConfig({
49-
imports: [IgxTreeGridModule, IgxButtonGroupModule, IgxIconModule, IgxSliderModule, IgxToggleModule,
50+
imports: [IgxPreventDocumentScrollModule, IgxTreeGridModule, IgxButtonGroupModule, IgxIconModule, IgxSliderModule, IgxToggleModule,
5051
IgxButtonModule, IgxExcelExporterService, IgxSwitchModule, IgxRippleModule, TreeGridFinJSComponent,
5152
LocalDataService, TreeGridGroupingPipe],
5253
ngDeclarations: [TreeGridFinJSComponent, TreeGridGroupingPipe],
53-
ngImports: [IgxTreeGridModule, IgxButtonGroupModule, IgxIconModule, IgxSliderModule, IgxToggleModule,
54+
ngImports: [IgxPreventDocumentScrollModule, IgxTreeGridModule, IgxButtonGroupModule, IgxIconModule, IgxSliderModule, IgxToggleModule,
5455
IgxButtonModule, IgxSwitchModule, IgxRippleModule],
5556
ngProviders: [LocalDataService, IgxExcelExporterService]
5657
}),

‎projects/app-lob/src/app/directives/prevent-scroll.directive.ts

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { AfterViewInit, Directive, Host, Input, NgModule, Optional } from "@angular/core";
2+
import { IgxGridBaseDirective } from "igniteui-angular";
3+
4+
@Directive({
5+
selector: "[igxPreventDocumentScroll]"
6+
})
7+
export class IgxPreventDocumentScrollDirective implements AfterViewInit {
8+
private _preventScroll = true;
9+
private gridBody: HTMLElement;
10+
11+
/**
12+
* A boolean indicating if page scroll should be prevented while mouse wheeling over the grid,
13+
* when grid scroll has reached top or bottom. Defaults to true.
14+
* ```html
15+
* <igx-grid igxPreventDocumentScroll></igx-grid>
16+
* <igx-grid [igxPreventDocumentScroll]="false"></igx-grid>
17+
* ```
18+
*/
19+
@Input("igxPreventDocumentScroll")
20+
public set preventScroll(val: boolean) {
21+
if (val === false) { this._preventScroll = false; }
22+
}
23+
24+
/**
25+
* @hidden
26+
*/
27+
constructor(@Host() @Optional() private grid: IgxGridBaseDirective) {
28+
this.gridBody = this.getGridBody();
29+
}
30+
31+
public ngAfterViewInit() {
32+
if (this._preventScroll) {
33+
this.gridBody.addEventListener("wheel", this.preventDocumentScroll, { passive: false });
34+
}
35+
}
36+
37+
public ngOnDestroy() {
38+
this.gridBody.removeEventListener("wheel", this.preventDocumentScroll);
39+
}
40+
41+
/**
42+
* Prevents scrolling the page, when mouse wheel over the grid body.
43+
*/
44+
private preventDocumentScroll(event) {
45+
event.preventDefault();
46+
}
47+
48+
private getGridBody(): HTMLElement {
49+
return this.grid.nativeElement;
50+
}
51+
}
52+
53+
/**
54+
* @hidden
55+
*/
56+
@NgModule({
57+
declarations: [IgxPreventDocumentScrollDirective],
58+
exports: [IgxPreventDocumentScrollDirective]
59+
})
60+
61+
export class IgxPreventDocumentScrollModule { }

‎projects/app-lob/src/app/grid-crm/grid-crm/grid-crm.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
IgxGridModule, IgxProgressBarModule
77
} from "igniteui-angular";
88
import { IgxSparklineCoreModule, IgxSparklineModule } from "igniteui-angular-charts";
9+
import { IgxPreventDocumentScrollModule } from "../../directives/prevent-scroll.directive";
910
import { GridCRMRoutingModule } from "./grid-crm-routing.module";
1011
import { GridCRMComponent } from "./grid-crm/grid-crm.component";
1112

@@ -16,6 +17,7 @@ import { GridCRMComponent } from "./grid-crm/grid-crm.component";
1617
imports: [
1718
CommonModule,
1819
FormsModule,
20+
IgxPreventDocumentScrollModule,
1921
GridCRMRoutingModule,
2022
IgxGridModule,
2123
IgxAvatarModule,

‎projects/app-lob/src/app/grid-crm/grid-crm/grid-crm/grid-crm.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div class="grid__wrapper">
2-
<igx-grid #grid1 id="grid1" [data]="localData" [height]="'430px'" [width]="'1180px'" [rowSelectable]="true"
2+
<igx-grid #grid1 igxPreventDocumentScroll id="grid1" [data]="localData" [height]="'430px'" [width]="'1180px'" [rowSelectable]="true"
33
displayDensity="cosy" rowHeight="50" [allowFiltering]="true"
44
[showToolbar]="true" [columnHiding]="true" columnHidingTitle="Column Hiding"
55
[columnPinning]="true" [exportExcel]="true" [exportCsv]="true" exportExcelText="Export to Excel" exportCsvText="Export to CSV">

‎projects/app-lob/src/app/grid-dynamic-chart-data/grid-dynamic-chart-data.component.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<div igxOverlayOutlet class="grid-chart-contextmenu-wrapper">
2-
<igx-grid #grid chartIntegration conditionalFormatting [formatter]="currentFormatter" [chartData]="chartData"
2+
<igx-grid igxPreventDocumentScroll #grid chartIntegration conditionalFormatting [formatter]="currentFormatter" [chartData]="chartData"
33
primaryKey='ID' displayDensity="compact" [data]="data">
44
<igx-column field='ID' [hidden]='true'></igx-column>
55
<igx-column field='Category' [editable]="true" [width]="'110px'"></igx-column>

0 commit comments

Comments
 (0)