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

• upgrade aurelia-i18n to major version >=4.0.0
• replaced jQueryUI with SortableJS
  • follow changes to Kraaden Autocomplete
• Why replace jQueryUI with SortableJS?

---

Removed Code

1. Since we removed jQueryUI and we were using jQueryUI Slider for the Filters.SliderRange, we had to remove the Slider Range and we don't currently have a replacement at the moment, though it might come in the future. The alternative would be to use a regular text filter and .. for example: 5..15 (between 5 and 15).
2. BsDropdownService was also removed, the alternative is simply to use the built-in Cell Menu

@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

angular.json config

Since we removed jQueryUI, you need to remove it from your angular.json and anywhere else that it might reference it

# angular.json
{ 
   // ...
    "allowedCommonJsDependencies": [
      "assign-deep",
+     "autocompleter",
      "dompurify",
      "excel-builder-webpacker",
      "flatpickr",
      "jquery",
-     "jquery-ui",
      "stream"
    ],
 
  // ...
     "scripts": [
         "node_modules/jquery/dist/jquery.min.js",
-        "node_modules/jquery-ui/dist/jquery-ui.min.js",
-        "node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js",
         "node_modules/bootstrap/dist/js/bootstrap.min.js",
         "node_modules/multiple-select-modified/src/multiple-select.js"
     ],

### Text Export Service

Here's an example of the code change that you need to do
```diff
this.gridOptions = {
- enableExport: true,
- exportOptions: {
+ enableTextExport: true,
+ textExportOptions: {
    sanitizeDataExport: true
  },

Replaced JqueryUI Autocomplete with Kraaden Autocomplete

Since we removed, and no longer use jQueryUI, we had to find an alternative to the AutoComplete Editor/Filter 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 (see below). We also have a new Autocomplete Editor (Kraaden) Wiki.

You will notice that the Editor/Filter model change is nearly the same, there are 2 chars that are different (a lower c and a r at the end of the word which is forming the new word model: Editors.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
      }
    }
  }
}

Why replace jQueryUI with SortableJS?

Prior to this new version, jQueryUI had to be installed, that was even for a basic grid, but the fact was that the only jQueryUI feature we needed in SlickGrid was jQueryUI - Sortable for column reordering. Considering that SlickGrid required jQueryUI at 281Kb (js+css) just to get column reordering, we figured it was a rather large request, don't you think? We did use jQueryUI Autocomplete & Slider as well but the jQueryUI lib is rather large, is barely maintained and is now quite outdated. SortableJS is now the dependency used by SlickGrid and is a lot smaller and more up to date in the JS world.

jQueryUI Cons

• old and outdated, barely supported and rather large (probably because it was written when IE5 was a thing)
• it does not support Touch that well (mobile devices)
• it is rather large at 250Kb (min.js) + 31Kb (min.css)

SortableJS Pros

• much smaller at 44Kb (min.js doesn't require any css)
• touch friendly (mobile devices)
• much smoother UX and better performance
• written in pure JS without any dependencies