Migration to 6.x

SlickGrid is now jQuery free 🌊

In our previous v5.0 release (see Migration to v5.0), we dropped jQueryUI and now in v6.0 we are going even further and are now dropping jQuery entirely. You can still use jQuery but it's no longer a dependency. There are multiple benefits in dropping jQuery and go the vanilla route, the biggest advantages are:

1. it should provide better performance (browser native)
2. build size should be smaller (see table below)

Major Changes - Quick Summary

• minimum requirements
  • Angular >=16.0.0
  • RxJS >=8.7.1
• we dropped jQuery requirement
  • it also required us to rewrite the multiple-select-modified (jQuery based lib) into a new multiple-select-vanilla lib which is native and has no dependencies

---

NOTE: if you come from an earlier version other than 5.x, please make sure to follow each migration in their respected order

Changes

Dynamically Loading Component via AngularUtilService

as shown in (Example 21 - Row Detail / Example 22 - Angular Components)

In our AngularUtilService we were dynamically creating component by using ComponentFactoryResolver but that got removed in Angular 16 and so we had to replace it with ViewContainerRef and for that to work you might need to use providers to provide it as a singleton

When using AngularUtilService, you now need to add providers

@Component({
  // ...
+  providers: [AngularUtilService]
})
export class GridComponent

replaced multiple-select-modified with multiple-select-vanilla

This change was required because the previous library was a jQuery based lib, so I rewrote the lib as a new native lib to drop jQuery. However with this change, there were a couple of options that were dropped and/or modified.

// you can load `MultipleSelectOption` from either the new Multiple-Select-Vanilla lib or from Angular-Slickgrid (which is a re-export)
  import { MultipleSelectOption } from 'angular-slickgrid';       // still works, but is a re-export of the import shown below
+ import { MultipleSelectOption } from 'multiple-select-vanilla'; // preferred

filterOptions: { 
-  autoDropWidth: true, // removed, no longer required
} as MultipleSelectOption

The new lib also offers a bunch of new options as well, you can see the full interface at MultipleSelectOption

Slickgrid-Universal

If you use any of the Slickgrid-Universal extra dependencies then make sure to upgrade them to the new major 3.0.0 version so that they work with Angular-Slickgrid 6.0.0

  "dependencies": {
-   "@slickgrid-universal/excel-export": "^2.6.4",
+   "@slickgrid-universal/excel-export": "^3.0.0",
-   "angular-slickgrid": "^5.6.4",
+   "angular-slickgrid": "^6.0.0",
}

angular.json config

Since we dropped jQuery, you also need to remove it from your angular.json as well and anywhere else that might reference it. Also the multiple-select-modified now uses SASS and is now imported directly in Slickgrid-Universal, you no longer need to import any CSS anymore

# angular.json
{ 
   // ...
    "allowedCommonJsDependencies": [
      "assign-deep",
      "autocompleter",
      "dompurify",
      "excel-builder-webpacker",
      "flatpickr",
-     "jquery",
      "stream"
    ],
 
   // ...
   "styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "node_modules/flatpickr/dist/flatpickr.min.css",
-   "node_modules/multiple-select-modified/src/multiple-select.css",
     "src/styles.scss"
   ],
   "scripts": [
     "node_modules/bootstrap/dist/js/bootstrap.min.js",
-    "node_modules/jquery/dist/jquery.min.js",
-    "node_modules/multiple-select-modified/src/multiple-select.js",
     "node_modules/sortablejs/Sortable.min.js"
   ],

Editor/Filter params should be using editorOptions/filterOptions

For better TypeScript support, we now recommend to use either editorOptions or filterOptions depending if it's an Editor or a Filter.

this.columnDefinitions = [{
  id: 'cost', name: 'Cost', field: 'cost',
  editor: {
    model: Editors.slider,
-    params: { hideSliderNumber: false }
+    editorOptions: { hideSliderNumber: false } as SliderOption
  },
  filter: {
    model: Filters.slider,
-    params: { hideSliderNumber: false }
+    filterOptions: { hideSliderNumber: false } as SliderOption
  },

Final Note

and that's about it, the migration should be quick to complete