feat(pinning): add "Frozen Columns" to header menu

package.json

@@ -101,7 +101,7 @@
     "lodash.isequal": "^4.5.0",
     "moment-mini": "^2.22.1",
     "rxjs": "^6.3.3",
-    "slickgrid": "^2.4.24",
+    "slickgrid": "^2.4.25",
     "text-encoding-utf-8": "^1.0.2"
   },
   "devDependencies": {

src/app/examples/grid-colspan.component.html

@@ -14,11 +14,20 @@ <h3>Grid 1 <small>(with Header Grouping &amp; Colspan)</small></h3>
   <hr />
 
   <h3>Grid 2 <small>(with Header Grouping &amp; Frozen/Pinned Columns)</small></h3>
+  <div class="col-sm 12">
+    <button class="btn btn-default btn-sm" (click)="setFrozenColumns2(-1)" data-test="remove-frozen-column-button">
+      <i class="fa fa-times fa-lg"></i> Remove Frozen Columns
+    </button>
+    <button class="btn btn-default btn-sm" (click)="setFrozenColumns2(2)" data-test="set-3frozen-columns">
+      <i class="fa fa-thumb-tack fa-lg"></i> Set 3 Frozen Columns
+    </button>
+  </div>
   <angular-slickgrid gridId="grid2"
                      [columnDefinitions]="columnDefinitions2"
                      [gridOptions]="gridOptions2"
                      [dataset]="dataset2"
                      gridHeight="275"
-                     gridWidth="800">
+                     gridWidth="800"
+                     (onAngularGridCreated)="angularGridReady2($event)">
   </angular-slickgrid>
 </div>

src/app/examples/grid-colspan.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { Column, FieldType, GridOption } from './../modules/angular-slickgrid';
+import { AngularGridInstance, Column, FieldType, GridOption } from './../modules/angular-slickgrid';
 
 @Component({
   templateUrl: './grid-colspan.component.html',
@@ -15,9 +15,15 @@ export class GridColspanComponent implements OnInit {
       Header Grouping - (<a href="https://github.com/ghiscoding/Angular-Slickgrid/wiki/Header-Title-Grouping" target="_blank">Wiki docs</a>)
     </li>
     <li>Note that you can add Sort but remember that it will sort by the data which the row contains, even if the data is visually hidden by colspan it will still sort it</li>
+    <li>
+      Header Grouping spanning accross multiple columns is working but has some UI issues on window resize.
+      If anyone can fix it, probably some CSS issues, please let us know.
+    </li>
   </ul>
   `;
 
+  angularGrid2: AngularGridInstance;
+  gridObj2: any;
   columnDefinitions1: Column[];
   columnDefinitions2: Column[];
   gridOptions1: GridOption;
@@ -30,6 +36,11 @@ export class GridColspanComponent implements OnInit {
     this.prepareGrid2();
   }
 
+  angularGridReady2(angularGrid: AngularGridInstance) {
+    this.angularGrid2 = angularGrid;
+    this.gridObj2 = angularGrid.slickGrid;
+  }
+
   prepareGrid1() {
     this.columnDefinitions1 = [
       { id: 'title', name: 'Title', field: 'title', sortable: true, columnGroup: 'Common Factor' },
@@ -49,14 +60,15 @@ export class GridColspanComponent implements OnInit {
       showPreHeaderPanel: true,
       preHeaderPanelHeight: 28,
       explicitInitialization: true,
-      colspanCallback: this.renderDifferentColspan
+      colspanCallback: this.renderDifferentColspan,
     };
 
     this.dataset1 = this.getData(500);
   }
 
   prepareGrid2() {
     this.columnDefinitions2 = [
+      { id: 'sel', name: '#', field: 'num', behavior: 'select', cssClass: 'cell-selection', width: 40, resizable: false, selectable: false },
       { id: 'title', name: 'Title', field: 'title', sortable: true, columnGroup: 'Common Factor' },
       { id: 'duration', name: 'Duration', field: 'duration', columnGroup: 'Common Factor' },
       { id: 'start', name: 'Start', field: 'start', columnGroup: 'Period' },
@@ -73,7 +85,9 @@ export class GridColspanComponent implements OnInit {
       showPreHeaderPanel: true,
       preHeaderPanelHeight: 25,
       explicitInitialization: true,
-      frozenColumn: 1,
+      frozenColumn: 2,
+      gridMenu: { hideClearFrozenColumnsCommand: false },
+      headerMenu: { hideFreezeColumnsCommand: false }
     };
 
     this.dataset2 = this.getData(500);
@@ -97,6 +111,11 @@ export class GridColspanComponent implements OnInit {
     return mockDataset;
   }
 
+  setFrozenColumns2(frozenCols: number) {
+    this.gridObj2.setOptions({ frozenColumn: frozenCols, alwaysShowVerticalScroll: false });
+    this.gridOptions2 = this.gridObj2.getOptions();
+  }
+
   /**
    * A callback to render different row column span
    * Your callback will always have the "item" argument which you can use to decide on the colspan

src/app/examples/grid-frozen.component.html

@@ -19,6 +19,16 @@ <h2>{{title}}</h2>
         Set
       </button>
     </span>
+  </div>
+
+  <div class="row col-sm-12">
+    <button class="btn btn-default btn-sm" (click)="setFrozenColumns(-1)" data-test="remove-frozen-column-button">
+      <i class="fa fa-times fa-lg"></i> Remove Frozen Columns
+    </button>
+    <button class="btn btn-default btn-sm" (click)="setFrozenColumns(2)" data-test="set-3frozen-columns">
+      <i class="fa fa-thumb-tack fa-lg"></i> Set 3 Frozen Columns
+    </button>
+
     <span style="margin-left: 15px">
       <button class="btn btn-default btn-sm" (click)="toggleFrozenBottomRows()">
         <i class="fa fa-random fa-lg"></i> Toggle Pinned Rows

src/app/examples/grid-frozen.component.ts

@@ -77,14 +77,14 @@ export class GridFrozenComponent implements OnInit {
       {
         id: 'start', name: 'Start', field: 'start',
         minWidth: 100, width: 120,
-        filterable: true,
-        sortable: true
+        filterable: true, sortable: true,
+        formatter: Formatters.dateIso
       },
       {
         id: 'finish', name: 'Finish', field: 'finish',
         minWidth: 100, width: 120,
-        filterable: true,
-        sortable: true
+        filterable: true, sortable: true,
+        formatter: Formatters.dateIso
       },
       {
         id: 'cost', name: 'Cost | Duration', field: 'cost',
@@ -170,25 +170,25 @@ export class GridFrozenComponent implements OnInit {
         sortable: true
       },
       {
-        id: 'title1', name: 'Title1', field: 'title1',
+        id: 'title1', name: 'Title 1', field: 'title1',
         minWidth: 100, width: 120,
         filterable: true,
         sortable: true
       },
       {
-        id: 'title2', name: 'Title2', field: 'title2',
+        id: 'title2', name: 'Title 2', field: 'title2',
         minWidth: 100, width: 120,
         filterable: true,
         sortable: true
       },
       {
-        id: 'title3', name: 'Title3', field: 'title3',
+        id: 'title3', name: 'Title 3', field: 'title3',
         minWidth: 100, width: 120,
         filterable: true,
         sortable: true
       },
       {
-        id: 'title4', name: 'Title4', field: 'title4',
+        id: 'title4', name: 'Title 4', field: 'title4',
         minWidth: 100, width: 120,
         filterable: true,
         sortable: true
@@ -209,6 +209,9 @@ export class GridFrozenComponent implements OnInit {
       frozenColumn: this.frozenColumnCount,
       frozenRow: this.frozenRowCount,
       // frozenBottom: true, // if you want to freeze the bottom instead of the top, you can enable this property
+
+      gridMenu: { hideClearFrozenColumnsCommand: false },
+      headerMenu: { hideFreezeColumnsCommand: false }
     };
 
     // mock a dataset
@@ -219,18 +222,14 @@ export class GridFrozenComponent implements OnInit {
     // Set up some test columns.
     const mockDataset = [];
     for (let i = 0; i < 500; i++) {
-      const randomYear = 2000 + Math.floor(Math.random() * 10);
-      const randomMonth = Math.floor(Math.random() * 11);
-      const randomDay = Math.floor((Math.random() * 29));
-
       mockDataset[i] = {
         id: i,
         title: 'Task ' + i,
         cost: (i % 33 === 0) ? null : Math.random() * 10000,
         duration: i % 8 ? (Math.round(Math.random() * 100) + '') : null,
         percentComplete: Math.round(Math.random() * 100),
-        start: new Date(randomYear, randomMonth, randomDay),
-        finish: new Date(randomYear, (randomMonth + 1), randomDay),
+        start: new Date(2009, 0, 1),
+        finish: new Date(2009, 4, 5),
         effortDriven: (i % 5 === 0),
         title1: `Some Text ${Math.round(Math.random() * 25)}`,
         title2: `Some Text ${Math.round(Math.random() * 25)}`,
@@ -276,6 +275,11 @@ export class GridFrozenComponent implements OnInit {
     alert(args.validationResults.msg);
   }
 
+  setFrozenColumns(frozenCols: number) {
+    this.gridObj.setOptions({ frozenColumn: frozenCols, alwaysShowVerticalScroll: false });
+    this.gridOptions = this.gridObj.getOptions();
+  }
+
   /** toggle dynamically, through slickgrid "setOptions()" the top/bottom pinned location */
   toggleFrozenBottomRows() {
     if (this.gridObj && this.gridObj.setOptions) {

src/app/modules/angular-slickgrid/constants.ts

@@ -8,6 +8,7 @@ export class Constants {
     TEXT_CLEAR_ALL_FILTERS: 'Clear all Filters',
     TEXT_CLEAR_ALL_GROUPING: 'Clear all Grouping',
     TEXT_CLEAR_ALL_SORTING: 'Clear all Sorting',
+    TEXT_CLEAR_FROZEN_COLUMNS: 'Clear Frozen Columns',
     TEXT_COLLAPSE_ALL_GROUPS: 'Collapse all Groups',
     TEXT_CONTAINS: 'Contains',
     TEXT_COLUMNS: 'Columns',
@@ -20,6 +21,7 @@ export class Constants {
     TEXT_EXPORT_TO_TEXT_FORMAT: 'Export in Text format (Tab delimited)',
     TEXT_EXPORT_TO_EXCEL: 'Export to Excel',
     TEXT_FORCE_FIT_COLUMNS: 'Force fit columns',
+    TEXT_FREEZE_COLUMNS: 'Freeze Columns',
     TEXT_GROUP_BY: 'Group By',
     TEXT_HIDE_COLUMN: 'Hide Column',
     TEXT_ITEMS: 'items',