Migration to 1.x

@deprecated Code (removed)

• removed columns from Column Picker options, use visibleColumns instead.

• removed columns from Grid Menu options, use visibleColumns instead.

• removed findItemInHierarchicalStructure() method, use findItemInTreeStructure instead.

• controls/plugins (extensions)... read below for more info

  • replace Grid Menu customItems by commandItems, see here
  • remove all images in favor of css classes, see here

• CSS/SASS Styling Changes

Changes

SlickGrid Controls/Plugins (Extensions)

Since all SlickGrid controls/plugins were rewritten and moved into Slickgrid-Universal (prior to the new release, we were using them from SlickGrid repo and we had Extension bridges in Slickgrid-Universal but now all the code exist in Slickgrid-Universal), they were also rewritten as plain vanilla JS (basically there's no more jQuery code with exception of Draggable Grouping which still require jQueryUI).

Because of all the rewriting, it makes sense to rename the method getSlickgridAddonInstance to getExtensionInstanceByName and it now return the instance directly and it also automatically infers the correct return instance class as well.

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

 toggleGridMenu(e: Event) {
    if (this.sgb?.extensionService) {
-     const gridMenuInstance = this.sgb.extensionService.getSlickgridAddonInstance(ExtensionName.gridMenu); // return type was `any`
+     const gridMenuInstance = this.sgb.extensionService.getExtensionInstanceByName(ExtensionName.gridMenu); // return type now infers `SlickGridMenu` instance
      gridMenuInstance.showGridMenu(e);
    }
  }

Grid Menu customItems replaced by commandItems

Replace all custom properties to command properties to align with all other menu plugins (CellMenu, ContextMenu, GridMenu, HeaderMenu all use commands)

• replace customItems by commandItems
• replace customTitle by commandTitle
• replace customTitleKey by commandTitleKey

Images are removed in favor of CSS classes

Another change due to the rewrite, all images related code were removed in favor of css classes that already existed.

• removed deleteIconImage, use deleteIconCssClass instead.
• removed groupIconImage, use groupIconCssClass instead.
• removed buttonImage, use buttonCssClass instead.
• removed iconImage, use iconCssClass instead
• removed image, use cssClass instead

What if you still want images?

If you really want to use image, you can still do it but you'll have to create a CSS class similar to this: background-image: url(images/my-image.gif);

CSS/SASS Styling Changes

SASS variables were all renamed to include the $slick-...

• prefix to avoid conflicts with other frameworks (as for CSS variables they were already including this prefix, so no change there)

Simplify CSS

To simply and merge all menu styling together, all the following CSS class names got changed with what is shown below

• rename title to slick-menu-title (to avoid other framework conflicts)
• rename slick-cell-menu-command-list to slick-menu-command-list
• rename slick-cell-menu-option-list to slick-menu-option-list
• rename slick-cell-menu-item to slick-menu-item
• rename slick-cell-menu-content to slick-menu-content
• rename slick-context-menu-command-list to slick-menu-command-list
• rename slick-context-menu-option-list to slick-menu-option-list
• rename slick-context-menu-item to slick-menu-item
• rename slick-context-menu-content to slick-menu-content
• rename slick-header-menu-item to slick-menu-item
• rename slick-header-menu-content to slick-menu-content
• rename slick-grid-menu-item to slick-menu-item
• rename slick-grid-menu-content to slick-menu-content
• rename slick-grid-menu-command-list to slick-menu-command-list
• rename slick-grid-menu-option-list to slick-menu-option-list
• rename slick-grid-menu-list to slick-column-picker-list
• rename slick-columnpicker to slick-column-picker
• rename slick-columnpicker-list to slick-column-picker-list

NOTE: for simplification, it also means all SASS/CSS variables got merged as well (e.g.: $slick-cell-menu-item-disabled-color got merged to common $slick-menu-item-disabled-color), another change is for all the Grid Menu column picker variables also got merged and we kept the (e.g.: $slick-grid-menu-checkbox-icon-checked is now $slick-column-picker-checkbox-icon-checked for both extensions)