fix(core): don't override alwaysShowVerticalScroll flag (#600)

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

Author: ghiscoding

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": {

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();
   }
 

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();
   }
 

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 (<a href="/ghiscoding/Angular-Slickgrid/wiki/GraphQL" target="_blank">Wiki docs</a>).
+  Use basic GraphQL query with any external public APIs (<a href="/ghiscoding/Angular-Slickgrid/wiki/GraphQL" target="_blank">Wiki docs</a>).
   <ul>
     <li>This Examples uses a Public GraphQL API that you can find at this link <a href="https://countries.trevorblades.com/" target="_blank">https://countries.trevorblades.com/</a></li>
-    <li>Compare to the regular and default GraphQL implementation, you will find the following differenecs</li>
+    <li>Compare to the regular and default GraphQL implementation, you will find the following differences</li>
     <ul>
-      <li>There are no Pagination and we only use GraphQL once to load the data</li>
+      <li>There are no Pagination and we only use GraphQL <b>once</b> to load the data, then we use the grid as a regular local in-memory grid</li>
       <li>We enabled the following 2 flags "useLocalFiltering" and "useLocalSorting" to use regular (in memory) DataView filtering/sorting</li>
     </ul>
-    <li>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)</li>
-    <li>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</li>
+    <li>NOTE - This Example calls multiple GraphQL queries, this is <b>ONLY</b> for demo purposes, you would typically only call 1 query (which is what GraphQL is good at)</li>
+    <li>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</li>
   </ul>
   `;
   angularGrid: AngularGridInstance;

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

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();
       });
 

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);
           }

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