From 9ea0d9a7fa5a1c453e737a60cd0f1292f822ac3b Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Tue, 2 May 2023 21:50:30 -0400
Subject: [PATCH] feat(plugins): remove jQuery from ColumnPicker & GridMenu
 controls (#752)

* feat(plugins): remove jQuery from ColumnPicker & GridMenu controls

* tests: use input checked property instead of attr checked
- the previous code with `attr('checked')` was jQuery oriented and we are going away from jQuery
---
 controls/slick.columnpicker.js                | 196 +++++----
 controls/slick.gridmenu.js                    | 396 ++++++++++--------
 ...le-frozen-columns-and-column-group.spec.js |  18 -
 cypress/integration/example-grid-menu.spec.js |   2 +-
 .../example-multi-grid-basic.spec.js          |  16 +-
 examples/example-checkbox-header-row.html     |  43 +-
 examples/example-grid-menu.html               |  35 +-
 examples/example-multi-grid-basic.html        |   7 +-
 8 files changed, 406 insertions(+), 307 deletions(-)

diff --git a/controls/slick.columnpicker.js b/controls/slick.columnpicker.js
index 124bc9b6..3f50e70c 100644
--- a/controls/slick.columnpicker.js
+++ b/controls/slick.columnpicker.js
@@ -25,17 +25,18 @@
  * @constructor
  */
 
-(function ($) {
+(function (window) {
   'use strict';
   function SlickColumnPicker(columns, grid, options) {
     var _grid = grid;
     var _options = options;
     var _gridUid = (grid && grid.getUID) ? grid.getUID() : '';
-    var $columnTitleElm;
-    var $list;
-    var $menu;
+    var _columnTitleElm;
+    var _listElm;
+    var _menuElm;
     var columnCheckboxes;
     var onColumnsChanged = new Slick.Event();
+    var _bindingEventService = new Slick.BindingEventService();
 
     var defaults = {
       fadeSpeed: 250,
@@ -54,68 +55,91 @@
     function init(grid) {
       grid.onHeaderContextMenu.subscribe(handleHeaderContextMenu);
       grid.onColumnsReordered.subscribe(updateColumnOrder);
-      _options = $.extend({}, defaults, options);
-
-      $menu = $("<div class='slick-columnpicker " + _gridUid + "' style='display:none' />").appendTo(document.body);
-      $("<button type='button' class='close' data-dismiss='slick-columnpicker' aria-label='Close'><span class='close' aria-hidden='true'>&times;</span></button>").appendTo($menu);
+      _options = Slick.Utils.extend({}, defaults, options);
+
+      _menuElm = document.createElement('div');
+      _menuElm.className = `slick-columnpicker ${_gridUid}`;
+      _menuElm.style.display = 'none';
+      document.body.appendChild(_menuElm);
+
+      const buttonElm = document.createElement('button');
+      buttonElm.type = 'button';
+      buttonElm.className = 'close';
+      buttonElm.dataset.dismiss = 'slick-columnpicker';
+      buttonElm.ariaLabel = 'Close';
+
+      const spanCloseElm = document.createElement('span');
+      spanCloseElm.className = 'close';
+      spanCloseElm.ariaHidden = 'true';
+      spanCloseElm.innerHTML = '&times;';
+      buttonElm.appendChild(spanCloseElm);
+      _menuElm.appendChild(buttonElm);
 
       // user could pass a title on top of the columns list
       if (_options.columnPickerTitle || (_options.columnPicker && _options.columnPicker.columnTitle)) {
         var columnTitle = _options.columnPickerTitle || _options.columnPicker.columnTitle;
-        $columnTitleElm = $("<div class='title'/>").append(columnTitle);
-        $columnTitleElm.appendTo($menu);
+        _columnTitleElm = document.createElement('div');
+        _columnTitleElm.className = 'slick-gridmenu-custom';
+        _columnTitleElm.textContent = columnTitle;
+        _menuElm.appendChild(_columnTitleElm);
       }
 
-      $menu.on("click", updateColumn);
-      $list = $("<span class='slick-columnpicker-list' />");
+      _bindingEventService.bind(_menuElm, 'click', updateColumn);
+
+      _listElm = document.createElement('span');
+      _listElm.className = 'slick-columnpicker-list';
 
       // Hide the menu on outside click.
-      $(document.body).on("mousedown", handleBodyMouseDown);
+      _bindingEventService.bind(document.body, 'mousedown', handleBodyMouseDown);
 
       // destroy the picker if user leaves the page
-      $(window).on("beforeunload", destroy);
+      _bindingEventService.bind(document.body, 'beforeunload', destroy);
     }
 
     function destroy() {
       _grid.onHeaderContextMenu.unsubscribe(handleHeaderContextMenu);
       _grid.onColumnsReordered.unsubscribe(updateColumnOrder);
-      if ($list) {
-        $list.remove();
+      _bindingEventService.unbindAll();
+
+      if (_listElm) {
+        _listElm.remove();
       }
-      if ($menu) {
-        $menu.off("click").remove();
+      if (_menuElm) {
+        _menuElm.remove();
       }
-      $(document.body).off("mousedown", handleBodyMouseDown);
-      $(".slick-columnpicker." + _gridUid).hide(_options && _options.columnPicker && _options.columnPicker.fadeSpeed);
-      $columnTitleElm = null;
-      $list = null;
-      $menu = null;
-      $(window).off("beforeunload");
     }
 
     function handleBodyMouseDown(e) {
-      if (($menu && $menu[0] != e.target && !$.contains($menu[0], e.target)) || e.target.className == "close") {
-        $menu.hide(_options && _options.columnPicker && _options.columnPicker.fadeSpeed);
+      if ((_menuElm !== e.target && !_menuElm.contains(e.target)) || e.target.className === 'close') {
+        _menuElm.setAttribute('aria-expanded', 'false');
+        _menuElm.style.display = 'none';
       }
     }
 
     function handleHeaderContextMenu(e) {
       e.preventDefault();
-      $list.empty();
+      Slick.Utils.emptyElement(_listElm);
       updateColumnOrder();
       columnCheckboxes = [];
 
-      var $li, $input, columnId;
-      var columnLabel, excludeCssClass;
+      let columnId, columnLabel, excludeCssClass;
       for (var i = 0; i < columns.length; i++) {
         columnId = columns[i].id;
         excludeCssClass = columns[i].excludeFromColumnPicker ? "hidden" : "";
-        $li = $('<li class="' + excludeCssClass + '" />').appendTo($list);
-        $input = $("<input type='checkbox' id='" + _gridUid + "colpicker-" + columnId + "' />").data("column-id", columnId).appendTo($li);
-        columnCheckboxes.push($input);
+
+        const liElm = document.createElement('li');
+        liElm.className = excludeCssClass;
+
+        const checkboxElm = document.createElement('input');
+        checkboxElm.type = 'checkbox';
+        checkboxElm.id = `${_gridUid}colpicker-${columnId}`;
+        checkboxElm.dataset.columnid = columns[i].id;
+        liElm.appendChild(checkboxElm);
+
+        columnCheckboxes.push(checkboxElm);
 
         if (_grid.getColumnIndex(columnId) != null) {
-          $input.attr("checked", "checked");
+          checkboxElm.checked = true;
         }
 
         if (_options && _options.columnPicker && _options.columnPicker.headerColumnValueExtractor) {
@@ -124,44 +148,72 @@
           columnLabel = defaults.headerColumnValueExtractor(columns[i], _options);
         }
 
-        $("<label for='" + _gridUid + "colpicker-" + columnId + "' />")
-          .html(columnLabel)
-          .appendTo($li);
+        const labelElm = document.createElement('label');
+        labelElm.htmlFor = `${_gridUid}colpicker-${columnId}`;
+        labelElm.textContent = columnLabel;
+        liElm.appendChild(labelElm);
+        _listElm.appendChild(liElm);
       }
 
       if (_options.columnPicker && (!_options.columnPicker.hideForceFitButton || !_options.columnPicker.hideSyncResizeButton)) {
-        $("<hr/>").appendTo($list);
+        _listElm.appendChild(document.createElement('hr'));
       }
 
       if (!(_options.columnPicker && _options.columnPicker.hideForceFitButton)) {
-        var forceFitTitle = (_options.columnPicker && _options.columnPicker.forceFitTitle) || _options.forceFitTitle;
-        $li = $("<li />").appendTo($list);
-        $input = $("<input type='checkbox' id='" + _gridUid + "colpicker-forcefit' />").data("option", "autoresize").appendTo($li);
-        $("<label for='" + _gridUid + "colpicker-forcefit' />").text(forceFitTitle).appendTo($li);
+        let forceFitTitle = (_options.columnPicker && _options.columnPicker.forceFitTitle) || _options.forceFitTitle;
+
+        const liElm = document.createElement('li');
+        _listElm.appendChild(liElm);
+
+        const forceFitCheckboxElm = document.createElement('input');
+        forceFitCheckboxElm.type = 'checkbox';
+        forceFitCheckboxElm.id = `${_gridUid}colpicker-forcefit`;
+        forceFitCheckboxElm.dataset.option = 'autoresize';
+        liElm.appendChild(forceFitCheckboxElm);
+
+        const labelElm = document.createElement('label');
+        labelElm.htmlFor = `${_gridUid}colpicker-forcefit`;
+        labelElm.textContent = forceFitTitle;
+        liElm.appendChild(labelElm);
+
         if (_grid.getOptions().forceFitColumns) {
-          $input.attr("checked", "checked");
+          forceFitCheckboxElm.checked = true;
         }
       }
 
       if (!(_options.columnPicker && _options.columnPicker.hideSyncResizeButton)) {
-        var syncResizeTitle = (_options.columnPicker && _options.columnPicker.syncResizeTitle) || _options.syncResizeTitle;
-        $li = $("<li />").appendTo($list);
-        $input = $("<input type='checkbox' id='" + _gridUid + "colpicker-syncresize' />").data("option", "syncresize").appendTo($li);
-        $("<label for='" + _gridUid + "colpicker-syncresize' />").text(syncResizeTitle).appendTo($li);
+        let syncResizeTitle = (_options.columnPicker && _options.columnPicker.syncResizeTitle) || _options.syncResizeTitle;
+
+        const liElm = document.createElement('li');
+        _listElm.appendChild(liElm);
+
+        const syncResizeCheckboxElm = document.createElement('input');
+        syncResizeCheckboxElm.type = 'checkbox';
+        syncResizeCheckboxElm.id = `${_gridUid}colpicker-syncresize`;
+        syncResizeCheckboxElm.dataset.option = 'syncresize';
+        liElm.appendChild(syncResizeCheckboxElm);
+
+        const labelElm = document.createElement('label');
+        labelElm.htmlFor = `${_gridUid}colpicker-syncresize`;
+        labelElm.textContent = syncResizeTitle;
+        liElm.appendChild(labelElm);
+
         if (_grid.getOptions().syncColumnCellResize) {
-          $input.attr("checked", "checked");
+          syncResizeCheckboxElm.checked = true;
         }
       }
 
-      $menu
-        .css("top", e.pageY - 10)
-        .css("left", e.pageX - 10)
-        .css("max-height", $(window).height() - e.pageY - 10)
-        .fadeIn(_options && _options.columnPicker && _options.columnPicker.fadeSpeed);
+      repositionMenu(e);
+    }
 
-      $list.appendTo($menu);
-      $li = null;
-      $input = null;
+    function repositionMenu(event) {
+      const targetEvent = event && event.touches && event.touches[0] || event;
+      _menuElm.style.top = `${targetEvent.pageY - 10}px`;
+      _menuElm.style.left = `${targetEvent.pageX - 10}px`;
+      _menuElm.style.maxHeight = `${window.innerHeight - targetEvent.clientY}px`;
+      _menuElm.style.display = 'block';
+      _menuElm.setAttribute('aria-expanded', 'true');
+      _menuElm.appendChild(_listElm);
     }
 
     function updateColumnOrder() {
@@ -171,9 +223,9 @@
       // We create a new `columns` structure by leaving currently-hidden
       // columns in their original ordinal position and interleaving the results
       // of the current column sort.
-      var current = _grid.getColumns().slice(0);
-      var ordered = new Array(columns.length);
-      for (var i = 0; i < ordered.length; i++) {
+      let current = _grid.getColumns().slice(0);
+      let ordered = new Array(columns.length);
+      for (let i = 0; i < ordered.length; i++) {
         if (_grid.getColumnIndex(columns[i].id) === undefined) {
           // If the column doesn't return a value from getColumnIndex,
           // it is hidden. Leave it in this position.
@@ -188,13 +240,13 @@
 
     /** Update the Titles of each sections (command, customTitle, ...) */
     function updateAllTitles(gridMenuOptions) {
-      if ($columnTitleElm && $columnTitleElm.text) {
-        $columnTitleElm.text(gridMenuOptions.columnTitle);
+      if (_columnTitleElm && _columnTitleElm.textContent) {
+        _columnTitleElm.textContent = gridMenuOptions.columnTitle;
       }
     }
 
     function updateColumn(e) {
-      if ($(e.target).data("option") == "autoresize") {
+      if (e.target.dataset.option === 'autoresize') {
         // when calling setOptions, it will resize with ALL Columns (even the hidden ones)
         // we can avoid this problem by keeping a reference to the visibleColumns before setOptions and then setColumns after
         var previousVisibleColumns = getVisibleColumns();
@@ -204,7 +256,7 @@
         return;
       }
 
-      if ($(e.target).data("option") == "syncresize") {
+      if (e.target.dataset.option === 'syncresize') {
         if (e.target.checked) {
           _grid.setOptions({ syncColumnCellResize: true });
         } else {
@@ -213,18 +265,18 @@
         return;
       }
 
-      if ($(e.target).is(":checkbox")) {
-        var isChecked = e.target.checked;
-        var columnId = $(e.target).data("column-id") || "";
-        var visibleColumns = [];
-        $.each(columnCheckboxes, function (i) {
-          if ($(this).is(":checked")) {
-            visibleColumns.push(columns[i]);
+      if (e.target.type === 'checkbox') {
+        const isChecked = e.target.checked;
+        const columnId = e.target.dataset.columnid || '';
+        let visibleColumns = [];
+        columnCheckboxes.forEach((columnCheckbox, idx) => {
+          if (columnCheckbox.checked) {
+            visibleColumns.push(columns[idx]);
           }
         });
 
         if (!visibleColumns.length) {
-          $(e.target).attr("checked", "checked");
+          e.target.checked = true;
           return;
         }
 
@@ -255,5 +307,5 @@
   }
 
   // Slick.Controls.ColumnPicker
-  $.extend(true, window, { Slick: { Controls: { ColumnPicker: SlickColumnPicker } } });
-})(jQuery);
+  Slick.Utils.extend(true, window, { Slick: { Controls: { ColumnPicker: SlickColumnPicker } } });
+})(window);
diff --git a/controls/slick.gridmenu.js b/controls/slick.gridmenu.js
index ae88dfe7..997216eb 100644
--- a/controls/slick.gridmenu.js
+++ b/controls/slick.gridmenu.js
@@ -77,14 +77,14 @@
  * The plugin exposes the following events:
  *
  *    onAfterMenuShow:   Fired after the menu is shown.  You can customize the menu or dismiss it by returning false.
- *      * ONLY works with a jQuery event (as per slick.core code), so we cannot notify when it's a button event (when grid menu is attached to an external button, not the hamburger menu)
+ *      * ONLY works with a JS event (as per slick.core code), so we cannot notify when it's a button event (when grid menu is attached to an external button, not the hamburger menu)
  *        Event args:
  *            grid:     Reference to the grid.
  *            column:   Column definition.
  *            menu:     Menu options.  Note that you can change the menu items here.
  *
  *    onBeforeMenuShow:   Fired before the menu is shown.  You can customize the menu or dismiss it by returning false.
- *      * ONLY works with a jQuery event (as per slick.core code), so we cannot notify when it's a button event (when grid menu is attached to an external button, not the hamburger menu)
+ *      * ONLY works with a JS event (as per slick.core code), so we cannot notify when it's a button event (when grid menu is attached to an external button, not the hamburger menu)
  *        Event args:
  *            grid:     Reference to the grid.
  *            column:   Column definition.
@@ -116,9 +116,9 @@
 
 'use strict';
 
-(function ($) {
+(function (window) {
   // register namespace
-  $.extend(true, window, {
+  Slick.Utils.extend(true, window, {
     "Slick": {
       "Controls": {
         "GridMenu": SlickGridMenu
@@ -133,13 +133,13 @@
     var _isMenuOpen = false;
     var _options = options;
     var _self = this;
-    var $customTitleElm;
-    var $columnTitleElm;
-    var $customMenu;
-    var $header;
-    var $list;
-    var $button;
-    var $menu;
+    var _columnTitleElm;
+    var _customTitleElm;
+    var _customMenuElm;
+    var _headerElm;
+    var _listElm;
+    var _buttonElm;
+    var _menuElm;
     var columnCheckboxes;
     var _defaults = {
       showButton: true,
@@ -156,6 +156,7 @@
         return columnDef.name;
       }
     };
+    var _bindingEventService = new Slick.BindingEventService();
 
     // when a grid optionally changes from a regular grid to a frozen grid, we need to destroy & recreate the grid menu
     // we do this change because the Grid Menu is on the left container for a regular grid, it is however on the right container for a frozen grid
@@ -178,53 +179,79 @@
     }
 
     function setOptions(newOptions) {
-      options = $.extend({}, options, newOptions);
+      options = Slick.Utils.extend({}, options, newOptions);
     }
 
     function createGridMenu() {
       var gridMenuWidth = (_options.gridMenu && _options.gridMenu.menuWidth) || _defaults.menuWidth;
       if (_gridOptions && _gridOptions.hasOwnProperty('frozenColumn') && _gridOptions.frozenColumn >= 0) {
-        $header = $('.' + _gridUid + ' .slick-header-right');
+        _headerElm = document.querySelector(`.${_gridUid} .slick-header-right`);
       } else {
-        $header = $('.' + _gridUid + ' .slick-header-left');
+        _headerElm = document.querySelector(`.${_gridUid} .slick-header-left`);
       }
-      $header.attr('style', 'width: calc(100% - ' + gridMenuWidth + 'px)');
+      _headerElm.style.width = `calc(100% - ${gridMenuWidth}px)`;
 
-      // if header row is enabled, we need to resize it's width also
+      // if header row is enabled, we need to resize its width also
       var enableResizeHeaderRow = (_options.gridMenu && _options.gridMenu.resizeOnShowHeaderRow != undefined) ? _options.gridMenu.resizeOnShowHeaderRow : _defaults.resizeOnShowHeaderRow;
       if (enableResizeHeaderRow && _options.showHeaderRow) {
-        $('.' + _gridUid + '.slick-headerrow').attr('style', 'width: calc(100% - ' + gridMenuWidth + 'px)');
+        const headerRow = document.querySelector(`.${_gridUid}.slick-headerrow`);
+        if (headerRow) {
+          headerRow.style.width = `calc(100% - ${gridMenuWidth}px)`;
+        }
       }
 
       var showButton = (_options.gridMenu && _options.gridMenu.showButton !== undefined) ? _options.gridMenu.showButton : _defaults.showButton;
       if (showButton) {
-        $button = $('<button class="slick-gridmenu-button"/>');
+        _buttonElm = document.createElement('button');
+        _buttonElm.className = 'slick-gridmenu-button';
+
         if (_options.gridMenu && _options.gridMenu.iconCssClass) {
-          $button.addClass(_options.gridMenu.iconCssClass);
+          _buttonElm.classList.add(_options.gridMenu.iconCssClass);
         } else {
-          var iconImage = (_options.gridMenu && _options.gridMenu.iconImage) ? _options.gridMenu.iconImage : "../images/drag-handle.png";
-          $('<img src="' + iconImage + '"/>').appendTo($button);
+          const iconImageElm = document.createElement('img');
+          iconImageElm.src = (_options.gridMenu && _options.gridMenu.iconImage) ? _options.gridMenu.iconImage : "../images/drag-handle.png";
+          _buttonElm.appendChild(iconImageElm);
+        }
+        if (options.iconCssClass) {
+          _buttonElm.classList.add(...options.iconCssClass.split(' '));
         }
-        $button.insertBefore($header);
+        _headerElm.parentElement.insertBefore(_buttonElm, _headerElm.parentElement.firstChild);
+
         // add on click handler for the Grid Menu itself
-        $button.on("click." + _gridUid, showGridMenu);
+        _bindingEventService.bind(_buttonElm, 'click', showGridMenu);
       }
 
-      $menu = $('<div class="slick-gridmenu ' + _gridUid + '" style="display: none" />').appendTo(document.body);
-      $('<button type="button" class="close" data-dismiss="slick-gridmenu" aria-label="Close"><span class="close" aria-hidden="true">&times;</span></button>').appendTo($menu);
+      _menuElm = document.createElement('div');
+      _menuElm.className = `slick-gridmenu ${_gridUid}`;
+      _menuElm.style.display = 'none';
+      document.body.appendChild(_menuElm);
+
+      const buttonElm = document.createElement('button');
+      buttonElm.type = 'button';
+      buttonElm.className = 'close';
+      buttonElm.dataset.dismiss = 'slick-gridmenu';
+      buttonElm.ariaLabel = 'Close';
 
-      $customMenu = $('<div class="slick-gridmenu-custom" />');
-      $customMenu.appendTo($menu);
+      const spanCloseElm = document.createElement('span');
+      spanCloseElm.className = 'close';
+      spanCloseElm.ariaHidden = 'true';
+      spanCloseElm.innerHTML = '&times;';
+      buttonElm.appendChild(spanCloseElm);
+      _menuElm.appendChild(buttonElm);
 
-      populateCustomMenus(_options, $customMenu);
+      _customMenuElm = document.createElement('div');
+      _customMenuElm.className = 'slick-gridmenu-custom';
+
+      _menuElm.appendChild(_customMenuElm);
+
+      populateCustomMenus(_options, _customMenuElm);
       populateColumnPicker();
 
       // Hide the menu on outside click.
-      $(document.body).on("mousedown." + _gridUid, handleBodyMouseDown);
+      _bindingEventService.bind(document.body, 'mousedown', handleBodyMouseDown);
 
       // destroy the picker if user leaves the page
-      $(window).on("beforeunload", destroy);
-
+      _bindingEventService.bind(document.body, 'beforeunload', destroy);
     }
 
     /** Destroy the plugin by unsubscribing every events & also delete the menu DOM elements */
@@ -237,37 +264,28 @@
       _grid.onColumnsReordered.unsubscribe(updateColumnOrder);
       _grid.onBeforeDestroy.unsubscribe();
       _grid.onSetOptions.unsubscribe();
-      $("div.slick-gridmenu." + _gridUid).remove();
+      _bindingEventService.unbindAll();
+      if (_menuElm && _menuElm.remove) {
+        _menuElm.remove();
+      }
       deleteMenu();
-      $(window).off("beforeunload");
     }
 
     /** Delete the menu DOM element but without unsubscribing any events */
     function deleteMenu() {
-      $(document.body).off("mousedown." + _gridUid, handleBodyMouseDown);
-      $("div.slick-gridmenu." + _gridUid).hide();
-      if ($button) {
-        $button.remove();
-      }
-      if ($menu) {
-        $menu.remove();
-      }
-      if ($customMenu) {
-        $customMenu.remove();
-      }
-      if ($header) {
-        $header.attr('style', 'width: 100%'); // put back original width
-      }
-      $customTitleElm = null;
-      $columnTitleElm = null;
-      $customMenu = null;
-      $header = null;
-      $list = null;
-      $button = null;
-      $menu = null;
+      _bindingEventService.unbindAll();
+      const gridMenuElm = document.querySelector(`div.slick-gridmenu.${_gridUid}`);
+      if (gridMenuElm) {
+        gridMenuElm.style.display = 'none';
+      }
+      if (_headerElm) {
+        // put back original width (fixes width and frozen+gridMenu on left header)
+        _headerElm.style.width = '100%';
+      }
+      _menuElm && _menuElm.remove();
     }
 
-    function populateCustomMenus(options, $customMenu) {
+    function populateCustomMenus(options, customMenuElm) {
       // Construct the custom menu items.
       if (!options.gridMenu || !options.gridMenu.customItems) {
         return;
@@ -275,22 +293,25 @@
 
       // user could pass a title on top of the custom section
       if (_options.gridMenu && _options.gridMenu.customTitle) {
-        $customTitleElm = $('<div class="title"/>').append(_options.gridMenu.customTitle);
-        $customTitleElm.appendTo($customMenu);
+        _customTitleElm = document.createElement('div');
+        _customTitleElm.className = 'title';
+        _customTitleElm.textContent = _options.gridMenu.customTitle;
+        customMenuElm.appendChild(_customTitleElm);
       }
 
-      for (var i = 0, ln = options.gridMenu.customItems.length; i < ln; i++) {
-        var item = options.gridMenu.customItems[i];
-        var callbackArgs = {
+      for (let i = 0, ln = options.gridMenu.customItems.length; i < ln; i++) {
+        let addClickListener = true;
+        let item = options.gridMenu.customItems[i];
+        let callbackArgs = {
           "grid": _grid,
-          "menu": $menu,
+          "menu": _menuElm,
           "columns": columns,
           "visibleColumns": getVisibleColumns()
         };
 
         // run each override functions to know if the item is visible and usable
-        var isItemVisible = runOverrideFunctionWhenExists(item.itemVisibilityOverride, callbackArgs);
-        var isItemUsable = runOverrideFunctionWhenExists(item.itemUsabilityOverride, callbackArgs);
+        let isItemVisible = runOverrideFunctionWhenExists(item.itemVisibilityOverride, callbackArgs);
+        let isItemUsable = runOverrideFunctionWhenExists(item.itemUsabilityOverride, callbackArgs);
 
         // if the result is not visible then there's no need to go further
         if (!isItemVisible) {
@@ -303,69 +324,76 @@
           item.disabled = isItemUsable ? false : true;
         }
 
-        var $li = $("<div class='slick-gridmenu-item'></div>")
-          .data("command", item.command !== undefined ? item.command : "")
-          .data("item", item)
-          .on("click", handleMenuItemClick)
-          .appendTo($customMenu);
+        const liElm = document.createElement('div');
+        liElm.className = 'slick-gridmenu-item';
 
         if (item.divider || item === "divider") {
-          $li.addClass("slick-gridmenu-item-divider");
-          continue;
+          liElm.classList.add("slick-gridmenu-item-divider");
+          addClickListener = false;
         }
         if (item.disabled) {
-          $li.addClass("slick-gridmenu-item-disabled");
+          liElm.classList.add("slick-gridmenu-item-disabled");
         }
 
         if (item.hidden) {
-          $li.addClass("slick-gridmenu-item-hidden");
+          liElm.classList.add("slick-gridmenu-item-hidden");
         }
 
         if (item.cssClass) {
-          $li.addClass(item.cssClass);
+          liElm.classList.add(item.cssClass);
         }
 
         if (item.tooltip) {
-          $li.attr("title", item.tooltip);
+          liElm.title = item.tooltip;
         }
 
-        var $icon = $("<div class='slick-gridmenu-icon'></div>")
-          .appendTo($li);
+        const iconElm = document.createElement('div');
+        iconElm.className = 'slick-gridmenu-icon';
+
+        liElm.appendChild(iconElm);
 
         if (item.iconCssClass) {
-          $icon.addClass(item.iconCssClass);
+          iconElm.classList.add(item.iconCssClass);
         }
 
         if (item.iconImage) {
-          $icon.css("background-image", "url(" + item.iconImage + ")");
+          iconElm.style.backgroundImage = "url(" + item.iconImage + ")";
         }
 
-        var $text = $("<span class='slick-gridmenu-content'></span>")
-          .text(item.title)
-          .appendTo($li);
+        const textElm = document.createElement('span');
+        textElm.className = 'slick-gridmenu-content';
+        textElm.textContent = item.title;
+
+        liElm.appendChild(textElm);
 
         if (item.textCssClass) {
-          $text.addClass(item.textCssClass);
+          textElm.classList.add(item.textCssClass);
+        }
+
+        customMenuElm.appendChild(liElm);
+
+        if (addClickListener) {
+          _bindingEventService.bind(liElm, 'click', handleMenuItemClick.bind(this, item));
         }
-        $icon = null;
-        $li = null;
-        $text = null;
       }
     }
 
     /** Build the column picker, the code comes almost untouched from the file "slick.columnpicker.js" */
     function populateColumnPicker() {
       _grid.onColumnsReordered.subscribe(updateColumnOrder);
-      _options = $.extend({}, _defaults, _options);
+      _options = Slick.Utils.extend({}, _defaults, _options);
 
       // user could pass a title on top of the columns list
       if (_options.gridMenu && _options.gridMenu.columnTitle) {
-        $columnTitleElm = $('<div class="title"/>').append(_options.gridMenu.columnTitle);
-        $columnTitleElm.appendTo($menu);
+        _columnTitleElm = document.createElement('div');
+        _columnTitleElm.className = 'title';
+        _columnTitleElm.textContent = _options.gridMenu.columnTitle;
+        _menuElm.appendChild(_columnTitleElm);
       }
 
-      $menu.on("click", updateColumn);
-      $list = $('<span class="slick-gridmenu-list" />');
+      _bindingEventService.bind(_menuElm, 'click', updateColumn);
+      _listElm = document.createElement('span');
+      _listElm.className = 'slick-gridmenu-list';
     }
 
     /** Delete and then Recreate the Grid Menu (for example when we switch from regular to a frozen grid) */
@@ -379,16 +407,16 @@
       e.preventDefault();
 
       // empty both the picker list & the command list
-      $list.empty();
-      $customMenu.empty();
+      Slick.Utils.emptyElement(_listElm);
+      Slick.Utils.emptyElement(_customMenuElm);
 
-      populateCustomMenus(_options, $customMenu);
+      populateCustomMenus(_options, _customMenuElm);
       updateColumnOrder();
       columnCheckboxes = [];
 
       var callbackArgs = {
         "grid": _grid,
-        "menu": $menu,
+        "menu": _menuElm,
         "allColumns": columns,
         "visibleColumns": getVisibleColumns()
       };
@@ -398,27 +426,34 @@
         return;
       }
 
-      // notify of the onBeforeMenuShow only works when it's a jQuery event (as per slick.core code)
+      // notify of the onBeforeMenuShow only works when 
       // this mean that we cannot notify when the grid menu is attach to a button event
-      if (typeof e.isPropagationStopped === "function") {
+      if (typeof e.stopPropagation === "function") {
         if (_self.onBeforeMenuShow.notify(callbackArgs, e, _self).getReturnValue() == false) {
           return;
         }
       }
 
-      var $li, $input, columnId, columnLabel, excludeCssClass;
-      for (var i = 0; i < columns.length; i++) {
+      let columnId, columnLabel, excludeCssClass;
+      for (let i = 0; i < columns.length; i++) {
         columnId = columns[i].id;
         excludeCssClass = columns[i].excludeFromGridMenu ? "hidden" : "";
-        $li = $('<li class="' + excludeCssClass + '" />').appendTo($list);
 
-        $input = $("<input type='checkbox' id='" + _gridUid + "-gridmenu-colpicker-" + columnId + "' />").data("column-id", columns[i].id).appendTo($li);
-        columnCheckboxes.push($input);
+        const liElm = document.createElement('li');
+        liElm.className = excludeCssClass;
+
+        const checkboxElm = document.createElement('input');
+        checkboxElm.type = 'checkbox';
+        checkboxElm.id = `${_gridUid}-gridmenu-colpicker-${columnId}`;
+        checkboxElm.dataset.columnid = columns[i].id;
+        liElm.appendChild(checkboxElm);
 
         if (_grid.getColumnIndex(columns[i].id) != null) {
-          $input.attr("checked", "checked");
+          checkboxElm.checked = true;
         }
 
+        columnCheckboxes.push(checkboxElm);
+
         // get the column label from the picker value extractor (user can optionally provide a custom extractor)
         if (_options && _options.gridMenu && _options.gridMenu.headerColumnValueExtractor) {
           columnLabel = _options.gridMenu.headerColumnValueExtractor(columns[i], _gridOptions);
@@ -426,86 +461,113 @@
           columnLabel = _defaults.headerColumnValueExtractor(columns[i], _gridOptions);
         }
 
-        $("<label for='" + _gridUid + "-gridmenu-colpicker-" + columnId + "' />")
-          .html(columnLabel)
-          .appendTo($li);
+        const labelElm = document.createElement('label');
+        labelElm.htmlFor = `${_gridUid}-gridmenu-colpicker-${columnId}`;
+        labelElm.textContent = columnLabel;
+        liElm.appendChild(labelElm);
+        _listElm.appendChild(liElm);
       }
 
       if (_options.gridMenu && (!_options.gridMenu.hideForceFitButton || !_options.gridMenu.hideSyncResizeButton)) {
-        $("<hr/>").appendTo($list);
+        _listElm.appendChild(document.createElement('hr'));
       }
 
       if (!(_options.gridMenu && _options.gridMenu.hideForceFitButton)) {
-        var forceFitTitle = (_options.gridMenu && _options.gridMenu.forceFitTitle) || _defaults.forceFitTitle;
-        $li = $("<li />").appendTo($list);
-        $input = $("<input type='checkbox' id='" + _gridUid + "-gridmenu-colpicker-forcefit' />").data("option", "autoresize").appendTo($li);
-        $("<label for='" + _gridUid + "-gridmenu-colpicker-forcefit' />").text(forceFitTitle).appendTo($li);
+        let forceFitTitle = (_options.gridMenu && _options.gridMenu.forceFitTitle) || _defaults.forceFitTitle;
+
+        const liElm = document.createElement('li');
+        _listElm.appendChild(liElm);
+
+        const forceFitCheckboxElm = document.createElement('input');
+        forceFitCheckboxElm.type = 'checkbox';
+        forceFitCheckboxElm.id = `${_gridUid}-gridmenu-colpicker-forcefit`;
+        forceFitCheckboxElm.dataset.option = 'autoresize';
+        liElm.appendChild(forceFitCheckboxElm);
+
+        const labelElm = document.createElement('label');
+        labelElm.htmlFor = `${_gridUid}-gridmenu-colpicker-forcefit`;
+        labelElm.textContent = forceFitTitle;
+        liElm.appendChild(labelElm);
 
         if (_grid.getOptions().forceFitColumns) {
-          $input.attr("checked", "checked");
+          forceFitCheckboxElm.checked = true;
         }
       }
 
       if (!(_options.gridMenu && _options.gridMenu.hideSyncResizeButton)) {
-        var syncResizeTitle = (_options.gridMenu && _options.gridMenu.syncResizeTitle) || _defaults.syncResizeTitle;
-        $li = $("<li />").appendTo($list);
-        $input = $("<input type='checkbox' id='" + _gridUid + "-gridmenu-colpicker-syncresize' />").data("option", "syncresize").appendTo($li);
-        $("<label for='" + _gridUid + "-gridmenu-colpicker-syncresize' />").text(syncResizeTitle).appendTo($li);
+        let syncResizeTitle = (_options.gridMenu && _options.gridMenu.syncResizeTitle) || _defaults.syncResizeTitle;
+
+        const liElm = document.createElement('li');
+        _listElm.appendChild(liElm);
+
+        const syncResizeCheckboxElm = document.createElement('input');
+        syncResizeCheckboxElm.type = 'checkbox';
+        syncResizeCheckboxElm.id = `${_gridUid}-gridmenu-colpicker-syncresize`;
+        syncResizeCheckboxElm.dataset.option = 'syncresize';
+        liElm.appendChild(syncResizeCheckboxElm);
+
+        const labelElm = document.createElement('label');
+        labelElm.htmlFor = `${_gridUid}-gridmenu-colpicker-syncresize`;
+        labelElm.textContent = syncResizeTitle;
+        liElm.appendChild(labelElm);
 
         if (_grid.getOptions().syncColumnCellResize) {
-          $input.attr("checked", "checked");
+          syncResizeCheckboxElm.checked = true;
         }
       }
 
-      var menuIconOffset = $(e.target).prop('nodeName') == "button" ? $(e.target).offset() : $(e.target).parent("button").offset(); // get button offset position
-      if (!menuIconOffset) {
-        menuIconOffset = $(e.target).offset(); // external grid menu might fall in this last case
+      let buttonElm = e.target.nodeName === 'BUTTON' ? e.target : e.target.querySelector('button'); // get button element
+      if (!buttonElm) {
+        buttonElm = e.target.parentElement; // external grid menu might fall in this last case if wrapped in a span/div
       }
-      var menuWidth = $menu.width();
-      var useClickToRepositionMenu = (_options.gridMenu && _options.gridMenu.useClickToRepositionMenu !== undefined) ? _options.gridMenu.useClickToRepositionMenu : _defaults.useClickToRepositionMenu;
-      var gridMenuIconWidth = (_options.gridMenu && _options.gridMenu.menuWidth) || _defaults.menuWidth;
-      var contentMinWidth = (_options.gridMenu && _options.gridMenu.contentMinWidth) ? _options.gridMenu.contentMinWidth : _defaults.contentMinWidth;
-      var currentMenuWidth = (contentMinWidth > menuWidth) ? contentMinWidth : (menuWidth + gridMenuIconWidth);
-      var nextPositionTop = (useClickToRepositionMenu && targetEvent.pageY > 0) ? targetEvent.pageY : menuIconOffset.top + 10;
-      var nextPositionLeft = (useClickToRepositionMenu && targetEvent.pageX > 0) ? targetEvent.pageX : menuIconOffset.left + 10;
-      var menuMarginBottom = (_options.gridMenu && _options.gridMenu.marginBottom !== undefined) ? _options.gridMenu.marginBottom : _defaults.marginBottom;
 
-      $menu
-        .css("top", nextPositionTop + 10)
-        .css("left", nextPositionLeft - currentMenuWidth + 10);
+      // we need to display the menu to properly calculate its width but we can however make it invisible
+      _menuElm.style.display = 'block';
+      _menuElm.style.opacity = '0';
+
+      let menuIconOffset = Slick.Utils.offset(buttonElm); // get button offset position
+      let menuWidth = _menuElm.offsetWidth;
+      let useClickToRepositionMenu = (_options.gridMenu && _options.gridMenu.useClickToRepositionMenu !== undefined) ? _options.gridMenu.useClickToRepositionMenu : _defaults.useClickToRepositionMenu;
+      let contentMinWidth = (_options.gridMenu && _options.gridMenu.contentMinWidth) ? _options.gridMenu.contentMinWidth : _defaults.contentMinWidth;
+      let currentMenuWidth = (contentMinWidth > menuWidth) ? contentMinWidth : menuWidth + 5;
+      let nextPositionTop = (useClickToRepositionMenu && targetEvent.pageY > 0) ? targetEvent.pageY : menuIconOffset.top + 10;
+      let nextPositionLeft = (useClickToRepositionMenu && targetEvent.pageX > 0) ? targetEvent.pageX : menuIconOffset.left + 10;
+      let menuMarginBottom = (_options.gridMenu && _options.gridMenu.marginBottom !== undefined) ? _options.gridMenu.marginBottom : _defaults.marginBottom;
+
+      _menuElm.style.top = `${nextPositionTop + 10}px`;
+      _menuElm.style.left = `${nextPositionLeft - currentMenuWidth + 10}px`;
 
       if (contentMinWidth > 0) {
-        $menu.css("min-width", contentMinWidth);
+        _menuElm.style.minWidth = `${contentMinWidth}px`;
       }
 
       // set "height" when defined OR ELSE use the "max-height" with available window size and optional margin bottom
       if (_options.gridMenu && _options.gridMenu.height !== undefined) {
-        $menu.css("height", _options.gridMenu.height);
+        _menuElm.style.height = `${_options.gridMenu.height}px`;
       } else {
-        $menu.css("max-height", $(window).height() - targetEvent.clientY - menuMarginBottom);
+        _menuElm.style.maxHeight = `${window.innerHeight - targetEvent.clientY - menuMarginBottom}px`;
       }
 
-      $menu.show();
-      $list.appendTo($menu);
+      _menuElm.style.display = 'block';
+      _menuElm.style.opacity = '1'; // restore menu visibility
+      _menuElm.appendChild(_listElm);
       _isMenuOpen = true;
 
-      if (typeof e.isPropagationStopped === "function") {
+      if (typeof e.stopPropagation === "function") {
         if (_self.onAfterMenuShow.notify(callbackArgs, e, _self).getReturnValue() == false) {
           return;
         }
       }
-      $input = null;
     }
 
-    function handleBodyMouseDown(e) {
-      if (($menu && $menu[0] != e.target && !$.contains($menu[0], e.target) && _isMenuOpen) || e.target.className == "close") {
-        hideMenu(e);
+    function handleBodyMouseDown(event) {
+      if ((_menuElm !== event.target && !(_menuElm && _menuElm.contains(event.target)) && _isMenuOpen) || event.target.className === 'close') {
+        hideMenu(event);
       }
     }
 
-    function handleMenuItemClick(e) {
-      var command = $(this).data("command");
-      var item = $(this).data("item");
+    function handleMenuItemClick(item, e) {
+      const command = item.command || '';
 
       if (item.disabled || item.divider || item === "divider") {
         return;
@@ -529,7 +591,7 @@
 
       // does the user want to leave open the Grid Menu after executing a command?
       var leaveOpen = (_options.gridMenu && _options.gridMenu.leaveOpen) ? true : false;
-      if (!leaveOpen && !e.isDefaultPrevented()) {
+      if (!leaveOpen && !e.defaultPrevented) {
         hideMenu(e);
       }
 
@@ -539,13 +601,13 @@
     }
 
     function hideMenu(e) {
-      if ($menu) {
-        $menu.hide();
+      if (_menuElm) {
+        Slick.Utils.hide(_menuElm);
         _isMenuOpen = false;
 
         var callbackArgs = {
           "grid": _grid,
-          "menu": $menu,
+          "menu": _menuElm,
           "allColumns": columns,
           "visibleColumns": getVisibleColumns()
         };
@@ -557,11 +619,11 @@
 
     /** Update the Titles of each sections (command, customTitle, ...) */
     function updateAllTitles(gridMenuOptions) {
-      if ($customTitleElm && $customTitleElm.text) {
-        $customTitleElm.text(gridMenuOptions.customTitle);
+      if (_customTitleElm && _customTitleElm.textContent) {
+        _customTitleElm.textContent = gridMenuOptions.customTitle;
       }
-      if ($columnTitleElm && $columnTitleElm.text) {
-        $columnTitleElm.text(gridMenuOptions.columnTitle);
+      if (_columnTitleElm && _columnTitleElm.textContent) {
+        _columnTitleElm.textContent = gridMenuOptions.columnTitle;
       }
     }
 
@@ -588,7 +650,7 @@
     }
 
     function updateColumn(e) {
-      if ($(e.target).data("option") == "autoresize") {
+      if (e.target.dataset.option === 'autoresize') {
         // when calling setOptions, it will resize with ALL Columns (even the hidden ones)
         // we can avoid this problem by keeping a reference to the visibleColumns before setOptions and then setColumns after
         var previousVisibleColumns = getVisibleColumns();
@@ -598,31 +660,27 @@
         return;
       }
 
-      if ($(e.target).data("option") == "syncresize") {
-        if (e.target.checked) {
-          _grid.setOptions({ syncColumnCellResize: true });
-        } else {
-          _grid.setOptions({ syncColumnCellResize: false });
-        }
+      if (e.target.dataset.option === 'syncresize') {
+        _grid.setOptions({ syncColumnCellResize: !!(e.target.checked) });
         return;
       }
 
-      if ($(e.target).is(":checkbox")) {
-        var isChecked = e.target.checked;
-        var columnId = $(e.target).data("column-id") || "";
-        var visibleColumns = [];
-        $.each(columnCheckboxes, function (i) {
-          if ($(this).is(":checked")) {
-            visibleColumns.push(columns[i]);
+      if (e.target.type === 'checkbox') {
+        const isChecked = e.target.checked;
+        const columnId = e.target.dataset.columnid || '';
+        let visibleColumns = [];
+        columnCheckboxes.forEach((columnCheckbox, idx) => {
+          if (columnCheckbox.checked) {
+            visibleColumns.push(columns[idx]);
           }
         });
 
         if (!visibleColumns.length) {
-          $(e.target).attr("checked", "checked");
+          e.target.checked = true;
           return;
         }
 
-        var callbackArgs = {
+        const callbackArgs = {
           "columnId": columnId,
           "showing": isChecked,
           "grid": _grid,
@@ -658,7 +716,7 @@
       return true;
     }
 
-    $.extend(this, {
+    Slick.Utils.extend(this, {
       "init": init,
       "getAllColumns": getAllColumns,
       "getVisibleColumns": getVisibleColumns,
@@ -677,4 +735,4 @@
       "onColumnsChanged": new Slick.Event()
     });
   }
-})(jQuery);
+})(window);
diff --git a/cypress/integration/example-frozen-columns-and-column-group.spec.js b/cypress/integration/example-frozen-columns-and-column-group.spec.js
index 0e664cb6..1c0a55fe 100644
--- a/cypress/integration/example-frozen-columns-and-column-group.spec.js
+++ b/cypress/integration/example-frozen-columns-and-column-group.spec.js
@@ -100,22 +100,4 @@ describe('Example - Row Grouping Titles', () => {
             .children()
             .each(($child, index) => expect($child.text()).to.eq(fullTitles[index]));
     });
-
-    it('should click on the Grid Menu command "Clear Frozen Columns" to switch to a regular grid without frozen columns and expect 7 columns on the left container', () => {
-        cy.get('#myGrid')
-            .find('button.slick-gridmenu-button')
-            .click({ force: true });
-
-        cy.contains('Clear Frozen Columns')
-            .click({ force: true });
-
-        cy.get('[style="top:0px"]').should('have.length', 1);
-        cy.get('.grid-canvas-left > [style="top:0px"]').children().should('have.length', 7);
-
-        cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(0)').should('contain', '0');
-        cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(1)').should('contain', 'Task 0');
-        cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(2)').should('contain', '5 days');
-        cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(3)').should('contain', '01/01/2009');
-        cy.get('.grid-canvas-left > [style="top:0px"] > .slick-cell:nth(4)').should('contain', '01/05/2009');
-    });
 });
diff --git a/cypress/integration/example-grid-menu.spec.js b/cypress/integration/example-grid-menu.spec.js
index b4db09ef..11548ca5 100644
--- a/cypress/integration/example-grid-menu.spec.js
+++ b/cypress/integration/example-grid-menu.spec.js
@@ -259,7 +259,7 @@ describe('Example - Grid Menu', () => {
     cy.get('#myGrid')
       .find('.slick-pane-left')
       .find('.slick-headerrow')
-      .should('not.be.hidden');
+      .should('be.hidden');
   });
 
   it('should expect "Clear Sorting" command to become hidden from Grid Menu when disabling feature', () => {
diff --git a/cypress/integration/example-multi-grid-basic.spec.js b/cypress/integration/example-multi-grid-basic.spec.js
index c2239d04..08b1b228 100644
--- a/cypress/integration/example-multi-grid-basic.spec.js
+++ b/cypress/integration/example-multi-grid-basic.spec.js
@@ -1,6 +1,6 @@
 /// <reference types="Cypress" />
 
-describe('Example - Grid Menu', () => {
+describe('Example - Multi Grid on a Page', () => {
   const fullTitles = ['Title', 'Duration', '% Complete', 'Start', 'Finish', 'Effort Driven'];
 
   beforeEach(() => {
@@ -48,7 +48,7 @@ describe('Example - Grid Menu', () => {
             if (index <= 5) {
               const $input = $child.children('input');
               const $label = $child.children('label');
-              expect($input.attr('checked')).to.eq('checked');
+              expect($input.prop('checked')).to.eq(true);
               expect($label.text()).to.eq(fullTitles[index]);
             }
           });
@@ -96,7 +96,7 @@ describe('Example - Grid Menu', () => {
             if (index <= 5) {
               const $input = $child.children('input');
               const $label = $child.children('label');
-              expect($input.attr('checked')).to.eq('checked');
+              expect($input.prop('checked')).to.eq(true);
               expect($label.text()).to.eq(fullTitles[index]);
             }
           });
@@ -136,9 +136,9 @@ describe('Example - Grid Menu', () => {
           const $input = $child.children('input');
           const $label = $child.children('label');
           if ($label.text() === 'Title') {
-            expect($input.attr('checked')).to.eq(undefined);
+            expect($input.prop('checked')).to.eq(false);
           } else {
-            expect($input.attr('checked')).to.eq('checked');
+            expect($input.prop('checked')).to.eq(true);
           }
           expect($label.text()).to.eq(fullTitles[index]);
         }
@@ -226,7 +226,7 @@ describe('Example - Grid Menu', () => {
             if (index <= 5) {
               const $input = $child.children('input');
               const $label = $child.children('label');
-              expect($input.attr('checked')).to.eq('checked');
+              expect($input.prop('checked')).to.eq(true);
               expect($label.text()).to.eq(fullTitles[index]);
             }
           });
@@ -263,9 +263,9 @@ describe('Example - Grid Menu', () => {
               const $input = $child.children('input');
               const $label = $child.children('label');
               if ($label.text() === 'Title' || $label.text() === 'Start') {
-                expect($input.attr('checked')).to.eq(undefined);
+                expect($input.prop('checked')).to.eq(false);
               } else {
-                expect($input.attr('checked')).to.eq('checked');
+                expect($input.prop('checked')).to.eq(true);
               }
               expect($label.text()).to.eq(fullTitles[index]);
             }
diff --git a/examples/example-checkbox-header-row.html b/examples/example-checkbox-header-row.html
index 94a49cba..62514e46 100644
--- a/examples/example-checkbox-header-row.html
+++ b/examples/example-checkbox-header-row.html
@@ -113,8 +113,6 @@ <h3>Selected Ids (<span id="idsCount">0</span>) with index/id offset=<span id="i
   </div>
 </div>
 
-<script src="../lib/firebugx.js"></script>
-
 <script src="../lib/jquery-3.1.0.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
@@ -146,7 +144,7 @@ <h3>Selected Ids (<span id="idsCount">0</span>) with index/id offset=<span id="i
 
   // add an offset so that the IDs are not equal to the row number, to fully validate that DataView selected IDs work as intended
   var idOffset = 8;
-  $('#idOffset').text(idOffset);
+  document.querySelector('#idOffset').textContent = idOffset;
 
   checkboxSelector = new Slick.CheckboxSelectColumn({
     cssClass: "slick-cell-checkboxsel",
@@ -178,7 +176,8 @@ <h3>Selected Ids (<span id="idsCount">0</span>) with index/id offset=<span id="i
   }
 
   function clearFilters() {
-    $('.slick-headerrow-column').children().val('');
+    const filterInputs = document.querySelectorAll('.slick-headerrow-column input');
+    filterInputs.forEach(input => input.value = '');
     for (var columnId in columnFilters) {
       columnFilters[columnId] = "";
     }
@@ -223,7 +222,7 @@ <h3>Selected Ids (<span id="idsCount">0</span>) with index/id offset=<span id="i
     });
   }
 
-  $(function () {
+  (function () {
     for (var i = 0; i < 150; i++) {
       var d = (data[i] = {});
       d["id"] = i + idOffset;
@@ -257,32 +256,38 @@ <h3>Selected Ids (<span id="idsCount">0</span>) with index/id offset=<span id="i
 
       console.log("Previously Selected Rows: " + previousSelectedRows.toString());
       console.log("Selected Rows: " + sortedSelectedRows.toString());
-      $('#selectedRows').text(sortedSelectedRows.toString());
-      $('#rowsCount').text(sortedSelectedRows.length); 
+      document.querySelector('#selectedRows').textContent = sortedSelectedRows.toString();
+      document.querySelector('#rowsCount').textContent = sortedSelectedRows.length; 
     });
     
     dataView.onSelectedRowIdsChanged.subscribe(function(e, args) {
       var sortedSelectedIds = args.filteredIds.sort(function (a, b) { return a - b });
       // console.log('sortedSelectedIds', args.selectedRowIds);
-      $('#selectedIds').text(sortedSelectedIds.toString());
-      $('#idsCount').text(sortedSelectedIds.length); 
+      document.querySelector('#selectedIds').textContent = sortedSelectedIds.toString();
+      document.querySelector('#idsCount').textContent = sortedSelectedIds.length; 
     });
 
-    $(grid.getHeaderRow()).on("change keyup", ":input", function (e) {
-      var columnId = $(this).data("columnId");
+    const headerRowElm = grid.getHeaderRow();
+    headerRowElm.addEventListener('change', filterKeyup);
+    headerRowElm.addEventListener('keyup', filterKeyup);
+    
+    function filterKeyup(e) {
+      const inputFilter = e.target;
+      const columnId = inputFilter.dataset.columnid;
       if (columnId != null) {
-        columnFilters[columnId] = $.trim($(this).val());
+        columnFilters[columnId] = (e.target.value || '').trim();
         dataView.refresh();
       }
-    });
+    };
 
     grid.onHeaderRowCellRendered.subscribe(function(e, args) {
       if (args.column.field !== "sel") {
-        $(args.node).empty();
-        $("<input type='text'>")
-           .data("columnId", args.column.id)
-           .val(columnFilters[args.column.id])
-           .appendTo(args.node);
+        args.node.innerHTML = ''; // empty it
+        const inputElm = document.createElement('input');
+        inputElm.dataset.columnid = args.column.id;
+        inputElm.value = columnFilters[args.column.id] || '';
+
+        args.node.appendChild(inputElm);
       }
     });
 
@@ -301,7 +306,7 @@ <h3>Selected Ids (<span id="idsCount">0</span>) with index/id offset=<span id="i
     dataView.setItems(data);
     dataView.setFilter(filter);
     dataView.endUpdate();
-  })
+  })();
 </script>
 </body>
 </html>
diff --git a/examples/example-grid-menu.html b/examples/example-grid-menu.html
index 7c9a7fc0..25848e1e 100644
--- a/examples/example-grid-menu.html
+++ b/examples/example-grid-menu.html
@@ -125,9 +125,6 @@ <h2>View Source:</h2>
   </div>
 </div>
 
-<script src="../lib/firebugx.js"></script>
-
-<script src="../lib/jquery-3.1.0.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../slick.core.js"></script>
@@ -309,7 +306,7 @@ <h2>View Source:</h2>
       });
   }
 
-  $(function () {
+  (function () {
     dataView = new Slick.Data.DataView();
     grid = new Slick.Grid("#myGrid", dataView, columns, options);
     columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
@@ -325,21 +322,26 @@ <h2>View Source:</h2>
       grid.render();
     });
 
-
-    $(grid.getHeaderRow()).on("change keyup", ":input", function (e) {
-      var columnId = $(this).data("columnId");
+    const headerRowElm = grid.getHeaderRow();
+    headerRowElm.addEventListener('change', filterKeyup);
+    headerRowElm.addEventListener('keyup', filterKeyup);
+    
+    function filterKeyup(e) {
+      const inputFilter = e.target;
+      const columnId = inputFilter.dataset.columnid;
       if (columnId != null) {
-        columnFilters[columnId] = $.trim($(this).val());
+        columnFilters[columnId] = (e.target.value || '').trim();
         dataView.refresh();
       }
-    });
+    };
 
     grid.onHeaderRowCellRendered.subscribe(function(e, args) {
-        $(args.node).empty();
-        $("<input type='text'>")
-           .data("columnId", args.column.id)
-           .val(columnFilters[args.column.id])
-           .appendTo(args.node);
+      args.node.innerHTML = ''; // empty it
+      const inputElm = document.createElement('input');
+      inputElm.dataset.columnid = args.column.id;
+      inputElm.value = columnFilters[args.column.id] || '';
+
+      args.node.appendChild(inputElm);
     });
 
     grid.init();
@@ -362,7 +364,8 @@ <h2>View Source:</h2>
         grid.setTopPanelVisibility(!grid.getOptions().showTopPanel);
       }
       else if(args.command === "clear-filter") {
-        $('.slick-headerrow-column').children().val('');
+        const filterInputs = document.querySelectorAll('.slick-headerrow-column input');
+        filterInputs.forEach(input => input.value = '');
         for (var columnId in columnFilters) {
           columnFilters[columnId] = "";
         }
@@ -403,7 +406,7 @@ <h2>View Source:</h2>
       sortcol = args.sortCol.field;
       dataView.sort(comparer, args.sortAsc);
     });
-  })
+  })();
 </script>
 </body>
 </html>
diff --git a/examples/example-multi-grid-basic.html b/examples/example-multi-grid-basic.html
index f5736851..1618d7cd 100644
--- a/examples/example-multi-grid-basic.html
+++ b/examples/example-multi-grid-basic.html
@@ -38,7 +38,6 @@ <h2>View Source:</h2>
   </tr>
 </table>
 
-<script src="../lib/jquery-3.1.0.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../slick.core.js"></script>
@@ -78,7 +77,7 @@ <h2>View Source:</h2>
 	return data;
   }
   
-  $(function () {
+  (function () {
     // Create 1st Grid with its own ColumnPicker/GridMenu
     var data01 = CreateData();
     grid01 = new Slick.Grid("#myGrid01", data01, columns, options);
@@ -88,11 +87,11 @@ <h2>View Source:</h2>
     // Create 2nd Grid with its own ColumnPicker/GridMenu
     var data02 = CreateData();
     var columns02 = columns.slice(0);
-    var options02 = jQuery.extend({}, options);
+    var options02 = Slick.Utils.extend({}, options);
     grid02 = new Slick.Grid("#myGrid02", data02, columns02, options02);
     new Slick.Controls.ColumnPicker(columns02, grid02, options02);
     new Slick.Controls.GridMenu(columns02, grid02, options02);
-  })
+  })();
 </script>
 </body>
 </html>