BREAKING CHANGE: migrate to Slickgrid-Universal v4.0 new major version

angular.json

@@ -24,7 +24,6 @@
               "excel-builder-webpacker",
               "fetch-jsonp",
               "flatpickr",
-              "slickgrid",
               "stream"
             ],
             "assets": [
@@ -60,8 +59,7 @@
               "src/styles.scss"
             ],
             "scripts": [
-              "node_modules/bootstrap/dist/js/bootstrap.min.js",
-              "node_modules/sortablejs/Sortable.min.js"
+              "node_modules/bootstrap/dist/js/bootstrap.min.js"
             ],
             "vendorChunk": true,
             "extractLicenses": false,

package.json

@@ -50,13 +50,13 @@
   },
   "dependencies": {
     "@ngx-translate/core": "^15.0.0",
-    "@slickgrid-universal/common": "~3.7.2",
-    "@slickgrid-universal/custom-footer-component": "~3.7.2",
-    "@slickgrid-universal/empty-warning-component": "~3.7.2",
-    "@slickgrid-universal/event-pub-sub": "~3.7.0",
-    "@slickgrid-universal/pagination-component": "~3.7.2",
-    "@slickgrid-universal/row-detail-view-plugin": "~3.7.2",
-    "@slickgrid-universal/rxjs-observable": "~3.7.2",
+    "@slickgrid-universal/common": "~4.0.2",
+    "@slickgrid-universal/custom-footer-component": "~4.0.2",
+    "@slickgrid-universal/empty-warning-component": "~4.0.2",
+    "@slickgrid-universal/event-pub-sub": "~4.0.2",
+    "@slickgrid-universal/pagination-component": "~4.0.2",
+    "@slickgrid-universal/row-detail-view-plugin": "~4.0.2",
+    "@slickgrid-universal/rxjs-observable": "~4.0.2",
     "dequal": "^2.0.3",
     "dompurify": "^3.0.6",
     "rxjs": "^7.8.1",
@@ -87,20 +87,20 @@
     "@ngx-translate/http-loader": "^8.0.0",
     "@popperjs/core": "^2.11.8",
     "@release-it/conventional-changelog": "^8.0.1",
-    "@slickgrid-universal/composite-editor-component": "~3.7.2",
-    "@slickgrid-universal/custom-tooltip-plugin": "~3.7.2",
-    "@slickgrid-universal/excel-export": "~3.7.2",
-    "@slickgrid-universal/graphql": "~3.7.2",
-    "@slickgrid-universal/odata": "~3.7.2",
-    "@slickgrid-universal/text-export": "~3.7.2",
+    "@slickgrid-universal/composite-editor-component": "~4.0.2",
+    "@slickgrid-universal/custom-tooltip-plugin": "~4.0.2",
+    "@slickgrid-universal/excel-export": "~4.0.2",
+    "@slickgrid-universal/graphql": "~4.0.2",
+    "@slickgrid-universal/odata": "~4.0.2",
+    "@slickgrid-universal/text-export": "~4.0.2",
     "@types/dompurify": "^3.0.5",
     "@types/flatpickr": "^3.1.2",
     "@types/fnando__sparkline": "^0.3.7",
     "@types/jest": "^29.5.11",
     "@types/node": "^20.10.4",
     "@types/sortablejs": "^1.15.7",
-    "@typescript-eslint/eslint-plugin": "^6.13.2",
-    "@typescript-eslint/parser": "^6.13.2",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
     "bootstrap": "^5.3.2",
     "copyfiles": "^2.4.1",
     "custom-event-polyfill": "^1.0.7",

src/app/examples/custom-inputEditor.ts

@@ -4,7 +4,6 @@ import {
   Editor,
   EditorValidator,
   EditorValidationResult,
-  KeyCode,
 } from './../modules/angular-slickgrid';
 
 /*
@@ -67,7 +66,7 @@ export class CustomInputEditor implements Editor {
 
   onKeydown(event: KeyboardEvent) {
     this._lastInputEvent = event;
-    if (event.keyCode === KeyCode.LEFT || event.keyCode === KeyCode.RIGHT) {
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
       event.stopImmediatePropagation();
     }
   }
@@ -107,8 +106,8 @@ export class CustomInputEditor implements Editor {
   }
 
   isValueChanged() {
-    const lastEvent = this._lastInputEvent?.keyCode;
-    if (this.columnEditor?.alwaysSaveOnEnterKey && lastEvent === KeyCode.ENTER) {
+    const lastKeyEvent = this._lastInputEvent?.key;
+    if (this.columnEditor?.alwaysSaveOnEnterKey && lastKeyEvent === 'Enter') {
       return true;
     }
     return (!(this.inputElm.value === '' && this.defaultValue === null) && this.inputElm.value !== this.defaultValue);

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

@@ -62,7 +62,8 @@ export class GridAddItemComponent implements OnInit {
         id: 'delete',
         field: 'id',
         excludeFromHeaderMenu: true,
-        formatter: Formatters.deleteIcon,
+        formatter: Formatters.icon,
+        params: { iconCssClass: 'fa fa-trash pointer' },
         minWidth: 30,
         maxWidth: 30,
         // use onCellClick OR grid.onClick.subscribe which you can see down below

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

@@ -11,7 +11,7 @@ import {
   Formatters,
   GridOption,
   OnEventArgs,
-  SlickNamespace,
+  SlickGlobalEditorLock,
 } from './../modules/angular-slickgrid';
 import { EditorNgSelectComponent } from './editor-ng-select.component';
 import { CustomAngularComponentEditor } from './custom-angularComponentEditor';
@@ -20,9 +20,6 @@ import { CustomTitleFormatterComponent } from './custom-titleFormatter.component
 import { FilterNgSelectComponent } from './filter-ng-select.component';
 import { CustomButtonFormatterComponent } from './custom-buttonFormatter.component';
 
-// using external non-typed js libraries
-declare const Slick: SlickNamespace;
-
 const NB_ITEMS = 100;
 
 @Component({
@@ -364,7 +361,7 @@ export class GridAngularComponent implements OnInit {
 
   undo() {
     const command = this._commandQueue.pop();
-    if (command && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+    if (command && SlickGlobalEditorLock.cancelCurrentEdit()) {
       command.undo();
       this.gridObj.gotoCell(command.row, command.cell, false);
     }

src/app/examples/grid-composite-editor.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
-import { SlickCompositeEditorComponent } from '@slickgrid-universal/composite-editor-component';
+import { SlickCompositeEditor, SlickCompositeEditorComponent } from '@slickgrid-universal/composite-editor-component';
 
 import {
   AngularGridInstance,
@@ -20,17 +20,14 @@ import {
   GridStateChange,
   LongTextEditorOption,
   OnCompositeEditorChangeEventArgs,
+  SlickGlobalEditorLock,
   SlickGrid,
-  SlickNamespace,
   SortComparers,
 } from '../modules/angular-slickgrid';
 
 const NB_ITEMS = 500;
 const URL_COUNTRIES_COLLECTION = 'assets/data/countries.json';
 
-// using external SlickGrid JS libraries
-declare const Slick: SlickNamespace;
-
 /**
  * Check if the current item (cell) is editable or not
  * @param {*} dataContext - item data context object
@@ -489,7 +486,7 @@ export class GridCompositeEditorComponent implements OnInit {
   handleValidationError(_e: Event, args: any) {
     if (args.validationResults) {
       let errorMsg = args.validationResults.msg || '';
-      if (args.editor && (args.editor instanceof Slick.CompositeEditor)) {
+      if (args.editor && (args.editor instanceof SlickCompositeEditor)) {
         if (args.validationResults.errors) {
           errorMsg += '\n';
           for (const error of args.validationResults.errors) {
@@ -720,7 +717,7 @@ export class GridCompositeEditorComponent implements OnInit {
   undoLastEdit(showLastEditor = false) {
     const lastEdit = this.editQueue.pop();
     const lastEditCommand = lastEdit?.editCommand;
-    if (lastEdit && lastEditCommand && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+    if (lastEdit && lastEditCommand && SlickGlobalEditorLock.cancelCurrentEdit()) {
       lastEditCommand.undo();
 
       // remove unsaved css class from that cell
@@ -740,7 +737,7 @@ export class GridCompositeEditorComponent implements OnInit {
   undoAllEdits() {
     for (const lastEdit of this.editQueue) {
       const lastEditCommand = lastEdit?.editCommand;
-      if (lastEditCommand && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+      if (lastEditCommand && SlickGlobalEditorLock.cancelCurrentEdit()) {
         lastEditCommand.undo();
 
         // remove unsaved css class from that cell

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

@@ -21,15 +21,12 @@ import {
   OnEventArgs,
   OperatorType,
   SortComparers,
-  SlickNamespace,
+  SlickGlobalEditorLock,
 } from './../modules/angular-slickgrid';
 import { CustomInputEditor } from './custom-inputEditor';
 import { CustomInputFilter } from './custom-inputFilter';
 import { Subject } from 'rxjs';
 
-// using external non-typed js libraries
-declare const Slick: SlickNamespace;
-
 const NB_ITEMS = 100;
 const URL_SAMPLE_COLLECTION_DATA = 'assets/data/collection_100_numbers.json';
 const URL_COUNTRIES_COLLECTION = 'assets/data/countries.json';
@@ -120,7 +117,8 @@ export class GridEditorComponent implements OnInit {
         excludeFromColumnPicker: true,
         excludeFromGridMenu: true,
         excludeFromHeaderMenu: true,
-        formatter: Formatters.editIcon,
+        formatter: Formatters.icon,
+        params: { iconCssClass: 'fa fa-pencil pointer' },
         minWidth: 30,
         maxWidth: 30,
         // use onCellClick OR grid.onClick.subscribe which you can see down below
@@ -136,7 +134,8 @@ export class GridEditorComponent implements OnInit {
         excludeFromColumnPicker: true,
         excludeFromGridMenu: true,
         excludeFromHeaderMenu: true,
-        formatter: Formatters.deleteIcon,
+        formatter: Formatters.icon,
+        params: { iconCssClass: 'fa fa-trash pointer' },
         minWidth: 30,
         maxWidth: 30,
         // use onCellClick OR grid.onClick.subscribe which you can see down below
@@ -686,7 +685,7 @@ export class GridEditorComponent implements OnInit {
   undo() {
     const command = this._commandQueue.pop();
     const item = this.angularGrid.dataView.getItem(command.row);
-    if (command && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+    if (command && SlickGlobalEditorLock.cancelCurrentEdit()) {
       command.undo();
       this.gridObj.gotoCell(command.row, command.cell, false);
     }

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

@@ -1,7 +1,5 @@
 import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';
-import { AngularGridInstance, Column, ColumnEditorDualInput, Editors, FieldType, formatNumber, Formatters, Filters, GridOption, SlickNamespace } from './../modules/angular-slickgrid';
-
-declare const Slick: SlickNamespace;
+import { AngularGridInstance, Column, ColumnEditorDualInput, Editors, FieldType, formatNumber, Formatters, Filters, GridOption, SlickEventHandler } from './../modules/angular-slickgrid';
 
 @Component({
   templateUrl: './grid-frozen.component.html',
@@ -31,7 +29,7 @@ export class GridFrozenComponent implements OnInit, OnDestroy {
   slickEventHandler: any;
 
   constructor() {
-    this.slickEventHandler = new Slick.EventHandler();
+    this.slickEventHandler = new SlickEventHandler();
   }
 
   ngOnInit(): void {

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

@@ -98,7 +98,7 @@ export class GridHeaderButtonComponent implements OnInit {
     };
   }
 
-  handleOnCommand(_e: Event, args: any, gridNo: 1 | 2) {
+  handleOnCommand(_e: any, args: any, gridNo: 1 | 2) {
     const column = args.column;
     const button = args.button;
     const command = args.command;

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

@@ -2,7 +2,7 @@ import fetchJsonp from 'fetch-jsonp';
 // import 'slickgrid/slick.remotemodel'; // SlickGrid Remote Plugin
 
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { AngularGridInstance, Column, Formatter, GridOption } from './../modules/angular-slickgrid';
+import { AngularGridInstance, Column, Formatter, GridOption, SlickEventHandler } from './../modules/angular-slickgrid';
 
 declare const Slick: any;
 
@@ -22,7 +22,7 @@ const mpnFormatter: Formatter = (_row, _cell, _value, _columnDef, dataContext) =
   templateUrl: './grid-remote.component.html'
 })
 export class GridRemoteComponent implements OnDestroy, OnInit {
-  private _eventHandler: any = new Slick.EventHandler();
+  private _eventHandler: any = new SlickEventHandler();
 
   title = 'Example 18: Octopart Catalog Search - Remote Model Plugin';
   subTitle = `

src/app/examples/grid-resize-by-content.component.ts

@@ -2,10 +2,9 @@ import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { ExcelExportService } from '@slickgrid-universal/excel-export';
 
-import { AngularGridInstance, Column, GridOption, Filters, Formatter, LongTextEditorOption, FieldType, Editors, Formatters, AutocompleterOption, EditCommand, formatNumber, SortComparers, SlickGrid, SlickNamespace } from '../modules/angular-slickgrid';
+import { AngularGridInstance, Column, GridOption, Filters, Formatter, LongTextEditorOption, FieldType, Editors, Formatters, AutocompleterOption, EditCommand, formatNumber, SortComparers, SlickGrid, SlickGlobalEditorLock } from '../modules/angular-slickgrid';
 
 const URL_COUNTRIES_COLLECTION = 'assets/data/countries.json';
-declare const Slick: SlickNamespace;
 
 /**
  * Check if the current item (cell) is editable or not
@@ -38,9 +37,9 @@ const customEditableInputFormatter: Formatter = (_row, _cell, value, columnDef,
 };
 
 // you can create custom validator to pass to an inline editor
-const myCustomTitleValidator = (value: any, args: any) => {
-  if ((value === null || value === undefined || !value.length) && (args.compositeEditorOptions && args.compositeEditorOptions.modalType === 'create' || args.compositeEditorOptions.modalType === 'edit')) {
-    // we will only check if the field is supplied when it's an inline editing OR a composite editor of type create/edit
+const myCustomTitleValidator = (value: any) => {
+  if ((value === null || value === undefined || !value.length)) {
+    // we will only check if the field is supplied when it's an inline editing
     return { valid: false, msg: 'This is a required field.' };
   } else if (!/^(task\s\d+)*$/i.test(value)) {
     return { valid: false, msg: 'Your title is invalid, it must start with "Task" followed by a number.' };
@@ -65,7 +64,6 @@ export class GridResizeByContentComponent implements OnInit {
   editedItems: any = {};
   isUsingDefaultResize = false;
   isGridEditable = true;
-  isCompositeDisabled = false;
   isMassSelectionDisabled = true;
   complexityLevelList = [
     { value: 0, label: 'Very Simple' },
@@ -344,7 +342,6 @@ export class GridResizeByContentComponent implements OnInit {
       rowHeight: 33,
       headerRowHeight: 35,
       editCommandHandler: (item, column, editCommand) => {
-        // composite editors values are saved as array, so let's convert to array in any case and we'll loop through these values
         const prevSerializedValues = Array.isArray(editCommand.prevSerializedValue) ? editCommand.prevSerializedValue : [editCommand.prevSerializedValue];
         const serializedValues = Array.isArray(editCommand.serializedValue) ? editCommand.serializedValue : [editCommand.serializedValue];
         const editorColumns = this.columnDefinitions.filter((col) => col.editor !== undefined);
@@ -365,8 +362,7 @@ export class GridResizeByContentComponent implements OnInit {
           }
         });
 
-        // queued editor only keeps 1 item object even when it's a composite editor,
-        // so we'll push only 1 change at the end but with all columns modified
+        // queued editor, so we'll push only 1 change at the end but with all columns modified
         // this way we can undo the entire row change (for example if user changes 3 field in the editor modal, then doing a undo last change will undo all 3 in 1 shot)
         this.editQueue.push({ item, columns: modifiedColumns, editCommand });
       },
@@ -477,7 +473,6 @@ export class GridResizeByContentComponent implements OnInit {
 
     // then change a single grid options to make the grid non-editable (readonly)
     this.isGridEditable = !this.isGridEditable;
-    this.isCompositeDisabled = !this.isGridEditable;
     if (!this.isGridEditable) {
       this.isMassSelectionDisabled = true;
     }
@@ -558,7 +553,7 @@ export class GridResizeByContentComponent implements OnInit {
   undoLastEdit(showLastEditor = false) {
     const lastEdit = this.editQueue.pop();
     const lastEditCommand = lastEdit?.editCommand;
-    if (lastEdit && lastEditCommand && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+    if (lastEdit && lastEditCommand && SlickGlobalEditorLock.cancelCurrentEdit()) {
       lastEditCommand.undo();
 
       // remove unsaved css class from that cell
@@ -578,7 +573,7 @@ export class GridResizeByContentComponent implements OnInit {
   undoAllEdits() {
     for (const lastEdit of this.editQueue) {
       const lastEditCommand = lastEdit?.editCommand;
-      if (lastEditCommand && Slick.GlobalEditorLock.cancelCurrentEdit()) {
+      if (lastEditCommand && SlickGlobalEditorLock.cancelCurrentEdit()) {
         lastEditCommand.undo();
 
         // remove unsaved css class from that cell

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

@@ -44,7 +44,7 @@ export class GridRowDetailComponent implements OnInit {
     // you can get the SlickGrid RowDetail plugin (addon) instance via 2 ways
 
     // option 1
-    return (this.angularGrid.extensions.rowDetailView.instance || {});
+    return (this.angularGrid.extensions.rowDetailView?.instance || {});
 
     // OR option 2
     // return this.angularGrid?.extensionService.getExtensionInstanceByName(ExtensionName.rowDetailView) || {};
@@ -132,7 +132,7 @@ export class GridRowDetailComponent implements OnInit {
 
   getData() {
     // mock a dataset
-    const tmpData = [];
+    const tmpData: any[] = [];
     for (let i = 0; i < NB_ITEMS; i++) {
       const randomYear = 2000 + Math.floor(Math.random() * 10);
       const randomMonth = Math.floor(Math.random() * 11);
@@ -157,7 +157,7 @@ export class GridRowDetailComponent implements OnInit {
   changeDetailViewRowCount() {
     if (this.angularGrid?.extensionService) {
       const options = this.rowDetailInstance.getOptions();
-      if (options && options.panelRows) {
+      if (options?.panelRows) {
         options.panelRows = this.detailViewRowCount; // change number of rows dynamically
         this.rowDetailInstance.setOptions(options);
       }