From 48f8eeb5a94f0098530e62cbf71a88bc3001d2bd Mon Sep 17 00:00:00 2001 From: Ghislain Beaulac Date: Wed, 7 Oct 2020 10:59:50 -0400 Subject: [PATCH 1/3] WIP - fix(core): don't override alwaysShowVerticalScroll flag - the `alwaysShowVerticalScroll` flag should be dealt directly in the core and it should never show vertical scroll on left frozen container, even when the `alwaysShowVerticalScroll` is set to True (see core lib [PR #537](6pac/SlickGrid#537)) - requires core lib [PR #537](6pac/SlickGrid#537) to be merged and released --- src/app/examples/grid-colspan.component.ts | 3 +-- src/app/examples/grid-frozen.component.ts | 3 +-- .../extensions/__tests__/gridMenuExtension.spec.ts | 2 +- .../extensions/__tests__/headerMenuExtension.spec.ts | 4 ++-- .../modules/angular-slickgrid/extensions/gridMenuExtension.ts | 3 +-- .../angular-slickgrid/extensions/headerMenuExtension.ts | 2 +- 6 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/app/examples/grid-colspan.component.ts b/src/app/examples/grid-colspan.component.ts index b145b6270..dc0503017 100644 --- a/src/app/examples/grid-colspan.component.ts +++ b/src/app/examples/grid-colspan.component.ts @@ -78,7 +78,6 @@ export class GridColspanComponent implements OnInit { ]; this.gridOptions2 = { - alwaysShowVerticalScroll: false, // disable scroll since we don't want it to show on the left pinned columns enableCellNavigation: true, enableColumnReorder: false, createPreHeaderPanel: true, @@ -112,7 +111,7 @@ export class GridColspanComponent implements OnInit { } setFrozenColumns2(frozenCols: number) { - this.gridObj2.setOptions({ frozenColumn: frozenCols, alwaysShowVerticalScroll: false }); + this.gridObj2.setOptions({ frozenColumn: frozenCols }); this.gridOptions2 = this.gridObj2.getOptions(); } diff --git a/src/app/examples/grid-frozen.component.ts b/src/app/examples/grid-frozen.component.ts index 7d763d96b..a89a5acef 100644 --- a/src/app/examples/grid-frozen.component.ts +++ b/src/app/examples/grid-frozen.component.ts @@ -200,7 +200,6 @@ export class GridFrozenComponent implements OnInit { containerId: 'demo-container', sidePadding: 10 }, - alwaysShowVerticalScroll: false, // disable scroll since we don't want it to show on the left pinned columns enableExcelCopyBuffer: true, enableCellNavigation: true, editable: true, @@ -276,7 +275,7 @@ export class GridFrozenComponent implements OnInit { } setFrozenColumns(frozenCols: number) { - this.gridObj.setOptions({ frozenColumn: frozenCols, alwaysShowVerticalScroll: false }); + this.gridObj.setOptions({ frozenColumn: frozenCols }); this.gridOptions = this.gridObj.getOptions(); } diff --git a/src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts b/src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts index af6b7798c..945f919bb 100644 --- a/src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts +++ b/src/app/modules/angular-slickgrid/extensions/__tests__/gridMenuExtension.spec.ts @@ -607,7 +607,7 @@ describe('gridMenuExtension', () => { expect(onCommandSpy).toHaveBeenCalled(); expect(setColumnsSpy).toHaveBeenCalled(); - expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1, alwaysShowVerticalScroll: true }); + expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1 }); }); it('should call "clearFilters" and dataview refresh when the command triggered is "clear-filter"', () => { diff --git a/src/app/modules/angular-slickgrid/extensions/__tests__/headerMenuExtension.spec.ts b/src/app/modules/angular-slickgrid/extensions/__tests__/headerMenuExtension.spec.ts index 8e370405d..1e33e54a7 100644 --- a/src/app/modules/angular-slickgrid/extensions/__tests__/headerMenuExtension.spec.ts +++ b/src/app/modules/angular-slickgrid/extensions/__tests__/headerMenuExtension.spec.ts @@ -416,7 +416,7 @@ describe('headerMenuExtension', () => { instance.onCommand.notify({ column: columnsMock[0], grid: gridStub, command: 'freeze-columns' }, new Slick.EventData(), gridStub); expect(onCommandSpy).toHaveBeenCalled(); - expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: 0, alwaysShowVerticalScroll: false }); + expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: 0 }); expect(setColumnsSpy).toHaveBeenCalled(); }); @@ -429,7 +429,7 @@ describe('headerMenuExtension', () => { instance.onCommand.notify({ column: columnsMock[1], grid: gridStub, command: 'freeze-columns' }, new Slick.EventData(), gridStub); expect(onCommandSpy).toHaveBeenCalled(); - expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1, alwaysShowVerticalScroll: false }); + expect(setOptionsSpy).toHaveBeenCalledWith({ frozenColumn: -1 }); expect(setColumnsSpy).toHaveBeenCalled(); }); diff --git a/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts b/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts index badd89ca8..a474a659b 100644 --- a/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts +++ b/src/app/modules/angular-slickgrid/extensions/gridMenuExtension.ts @@ -370,8 +370,7 @@ export class GridMenuExtension implements Extension { switch (args.command) { case 'clear-frozen-columns': const visibleColumns = [...this.sharedService.visibleColumns]; - const showVerticalScroll = this.sharedService.gridOptions && this.sharedService.gridOptions.enableGridMenu || false; - this.sharedService.grid.setOptions({ frozenColumn: -1, alwaysShowVerticalScroll: showVerticalScroll }); + this.sharedService.grid.setOptions({ frozenColumn: -1 }); if (Array.isArray(visibleColumns) && Array.isArray(this.sharedService.allColumns) && visibleColumns.length !== this.sharedService.allColumns.length) { this.sharedService.grid.setColumns(visibleColumns); } diff --git a/src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts b/src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts index 6167eeab4..422bcdefd 100644 --- a/src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts +++ b/src/app/modules/angular-slickgrid/extensions/headerMenuExtension.ts @@ -329,7 +329,7 @@ export class HeaderMenuExtension implements Extension { case 'freeze-columns': const visibleColumns = [...this.sharedService.visibleColumns]; const columnPosition = visibleColumns.findIndex((col) => col.id === args.column.id); - this.sharedService.grid.setOptions({ frozenColumn: columnPosition, alwaysShowVerticalScroll: false }); + this.sharedService.grid.setOptions({ frozenColumn: columnPosition } as GridOption); // to freeze columns, we need to take only the visible columns and we also need to use setColumns() when some of them are hidden // to make sure that we only use the visible columns, not doing this would show back some of the hidden columns From 6a01075a07ff022dc583e014c891c76616571f8d Mon Sep 17 00:00:00 2001 From: Ghislain Beaulac Date: Wed, 14 Oct 2020 08:03:13 -0400 Subject: [PATCH 2/3] refactor(core): update to latest SlickGrid version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 165a2f191..f41091d5c 100644 --- a/package.json +++ b/package.json @@ -109,7 +109,7 @@ "lodash.isequal": "^4.5.0", "moment-mini": "^2.24.0", "rxjs": "^6.3.3", - "slickgrid": "^2.4.29", + "slickgrid": "^2.4.30", "text-encoding-utf-8": "^1.0.2" }, "peerDependencies": { From e942b7b65f45575e5820ff3f08873d64b0d80072 Mon Sep 17 00:00:00 2001 From: Ghislain Beaulac Date: Wed, 14 Oct 2020 08:05:40 -0400 Subject: [PATCH 3/3] examples: tweak GraphQL example description --- src/app/examples/grid-graphql-nopage.component.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/app/examples/grid-graphql-nopage.component.ts b/src/app/examples/grid-graphql-nopage.component.ts index 06554a1da..aed3e28a8 100644 --- a/src/app/examples/grid-graphql-nopage.component.ts +++ b/src/app/examples/grid-graphql-nopage.component.ts @@ -40,16 +40,16 @@ export interface Country { export class GridGraphqlWithoutPaginationComponent implements OnInit { title = 'Example 27: GraphQL Basic API without Pagination'; subTitle = ` - Use it as a basic GraphQL API with any external public APIs (Wiki docs). + Use basic GraphQL query with any external public APIs (Wiki docs).
  • This Examples uses a Public GraphQL API that you can find at this link https://countries.trevorblades.com/
    • -
  • Compare to the regular and default GraphQL implementation, you will find the following differenecs
    • +
  • Compare to the regular and default GraphQL implementation, you will find the following differences
      • -
    • There are no Pagination and we only use GraphQL once to load the data
      • +
    • There are no Pagination and we only use GraphQL once to load the data, then we use the grid as a regular local in-memory grid
    • We enabled the following 2 flags "useLocalFiltering" and "useLocalSorting" to use regular (in memory) DataView filtering/sorting
    -
  • NOTE - This Example calls multiple GraphQL queries, this is ONLY for demo purposes, you would typically only call 1 query (which is what GraphQL is good at)
    • -
  • This demo is mainly to show the use of GraphqlService to build the query and retrieve the data but also to show how to mix that with usage of local Filtering/Sorting strategies
    • +
  • NOTE - This Example calls multiple GraphQL queries, this is ONLY for demo purposes, you would typically only call 1 query (which is what GraphQL is good at)
    • +
  • This example is mainly to demo the use of GraphqlService to build the query and retrieve the data but also to demo how to mix that with local (in-memory) Filtering/Sorting strategies
`; angularGrid: AngularGridInstance;