Migration to 5.x

Bye Bye jQueryUI... welcome SortableJS

NOTE: if you come from an earlier version, it is very important that you follow the migrations in order

Major Changes - Quick Summary

• bump aurelia-i18n mininmum to >=4.0.0
• replaced jQueryUI with SortableJS
  • follow changes to Kraaden Autocomplete

---

Removed Code

Since we removed jQueryUI and we were using jQueryUI Slider for the Filters.SliderRange, we had to remove the Slider Range since we don't have a replacement at the moment, though it might come in the future.

@deprecated Code

Text Export Service

• exportOptions was renamed to textExportOptions
• enableExport was renamed to enableTextExport

SASS - Autocomplete

Since we replaced the jQueryUI Autocomplete with Kraaden Autocomplete (see below) and for that reason we removed a few unnecessary SASS/CSS variables that are no longer necessary and were removed.

variables removed

• $slick-autocomplete-box-shadow
• $slick-autocomplete-border-radius
• $slick-autocomplete-hover-color
• $slick-autocomplete-hover-border-color
• $slick-autocomplete-loading-input-bg-color
• $slick-autocomplete-min-width
• $slick-autocomplete-overflow-x
• $slick-autocomplete-overflow-y
• $slick-autocomplete-text-color
• $slick-autocomplete-text-overflow
• $slick-autocomplete-text-padding

Changes

Aurelia-i18n

We now require aurelia-i18n with a version >=4.0.0

  "dependencies": {
-   "aurelia-i18n": "^3.1.4",
+   "aurelia-i18n": "^4.0.3",
+   "i18next": "^21.8.10",
    "i18next-xhr-backend": "^3.2.2",
  },
  "devDependencies": {
+   "@types/i18next-xhr-backend": "^1.4.2"
  }

Slickgrid-Universal

If you use any of the Slickgrid-Universal extra dependencies then make sure to upgrade them to 2.0.0 so that they work with Aurelia-Slickgrid 5.0.0

  "dependencies": {
-   "@slickgrid-universal/excel-export": "^1.4.0",
+   "@slickgrid-universal/excel-export": "^2.0.0",
-   "aurelia-slickgrid": "^4.3.0",
+   "aurelia-slickgrid": "^5.0.0",
}

Text Export Service

Here's an example of the code change that you need to do

this.gridOptions = {
- enableExport: true,
- exportOptions: {
+ enableTextExport: true,
+ textExportOptions: {
    sanitizeDataExport: true
  },

Replace JqueryUI Autocomplete with Kraaden Autocomplete

Since we removed and no longer use jQueryUI, we had to replace the AutoComplete Editor/Filter with another library and we settled on the 3rd party lib Kraaden Autocomplete which does everything that the jQueryUI one was doing. There are subtle changes which only requires couple line of changes.

You will notice that the model change is nearly the same, there are 2 chars that are different (a lower c and a r at the end forms the new word autocompleter)

If you were using the Autocomplete onSelect callback, it got renamed to onSelectItem. If you were using openSearchListOnFocus, then that is now simply showOnFocus with the Kraaden Autocomplete (refer to Kraaden Autocomplete options, to use them in editorOptions or filterOptions)

import {
-  AutocompleteOption,
+  AutocompleterOption,
} from '@slickgrid-universal/common';

prepareGrid() {
  this.columnDefinitions = [{
    id: 'cityOfOrigin', name: 'City of Origin', field: 'cityOfOrigin',
    filterable: true,
    editor: {
-     model: Editors.autoComplete,
+     model: Editors.autocompleter,
      editorOptions: {
        minLength: 3,
        forceUserInput: true,
-       source: (request, response) => {
+       fetch: (searchText, updateCallback) => {
          $.ajax({
            url: 'http://gd.geobytes.com/AutoCompleteCity',
            dataType: 'jsonp',
            data: {
-             q: request.term
+             q: searchText
            },
            success: (data) => {
-             response(data);
+             updateCallback(data);
            }
          });
        }
-     } as AutocompleteOption,
+     } as AutocompleterOption,
    filter: {
-     model: Filters.autoComplete,
+     model: Filters.autocompleter,
      filterOptions: {
        // ... the rest is the same as the Editor
      }
    }
  }
}

Aurelia-CLI (RequireJS)

If you use Aurelia-CLI and RequireJS, you probably needed an entry in aurelia.json for jQueryUI, you can now safely remove it

# aurelia.json
"bundles": [
  "dependencies": [
      "aurelia-bootstrapper",
      "aurelia-loader-default",
      "aurelia-pal-browser",
      {
          "name": "aurelia-testing",
          "env": "dev"
       },
       "text",
       {
          "name": "multiple-select-modified",
          "path": "../node_modules/multiple-select-modified/src",
          "main": "multiple-select",
          "resources": ["multiple-select.css"]
        },
        {
          "name": "dequal-lite",
          "path": "../node_modules/dequal/dist",
          "main": "index.min"
        }
-       {
-          "name": "jquery-ui",
-          "path": "../node_modules/jquery-ui",
-          "main": "dist/jquery-ui",
-          "deps": ["jquery"],
-          "exports": "$"
-        },
   ]
]