feat: Drop jQuery requirement

controls/slick.gridmenu.js

@@ -401,7 +401,7 @@
       // notify of the onBeforeMenuShow only works when it's a jQuery event (as per slick.core code)
       // this mean that we cannot notify when the grid menu is attach to a button event
       if (typeof e.isPropagationStopped === "function") {
-        if (_self.onBeforeMenuShow.notify(callbackArgs, e, _self) == false) {
+        if (_self.onBeforeMenuShow.notify(callbackArgs, e, _self).getReturnValue() == false) {
           return;
         }
       }
@@ -490,7 +490,7 @@
       _isMenuOpen = true;
 
       if (typeof e.isPropagationStopped === "function") {
-        if (_self.onAfterMenuShow.notify(callbackArgs, e, _self) == false) {
+        if (_self.onAfterMenuShow.notify(callbackArgs, e, _self).getReturnValue() == false) {
           return;
         }
       }
@@ -549,7 +549,7 @@
           "allColumns": columns,
           "visibleColumns": getVisibleColumns()
         };
-        if (_self.onMenuClose.notify(callbackArgs, e, _self) == false) {
+        if (_self.onMenuClose.notify(callbackArgs, e, _self).getReturnValue() == false) {
           return;
         }
       }

cypress/integration/example-plugin-custom-tooltip.spec.js

@@ -33,7 +33,7 @@ describe('Example - Custom Tooltip', () => {
     cy.get('@checkbox0-cell').trigger('mouseover');
 
     cy.get('.slick-custom-tooltip').should('not.exist');
-    cy.get('@checkbox0-cell').trigger('mouseleave');
+    cy.get('@checkbox0-cell').trigger('mouseout');
   });
 
   it('should mouse over Task 1 cell and expect async tooltip to show', () => {
@@ -52,7 +52,7 @@ describe('Example - Custom Tooltip', () => {
     cy.get('.tooltip-2cols-row:nth(2)').find('div:nth(0)').contains('Ratio:');
     cy.get('.tooltip-2cols-row:nth(2)').find('div:nth(1)').contains(/\d+$/); // use regexp to make sure it's a number
 
-    cy.get('@task1-cell').trigger('mouseleave');
+    cy.get('@task1-cell').trigger('mouseout');
   });
 
   it('should mouse over Task 5 cell and expect async tooltip to show', () => {
@@ -71,7 +71,7 @@ describe('Example - Custom Tooltip', () => {
     cy.get('.tooltip-2cols-row:nth(2)').find('div:nth(0)').contains('Ratio:');
     cy.get('.tooltip-2cols-row:nth(2)').find('div:nth(1)').contains(/\d+$/); // use regexp to make sure it's a number
 
-    cy.get('@task5-cell').trigger('mouseleave');
+    cy.get('@task5-cell').trigger('mouseout');
   });
 
   it('should mouse over 6th row Description and expect full cell content to show in a tooltip because cell has ellipsis and is too long for the cell itself', () => {
@@ -83,7 +83,7 @@ describe('Example - Custom Tooltip', () => {
     cy.get('.slick-custom-tooltip').should('not.contain', `regular tooltip (from title attribute)\nTask 5 cell value:\nThis is a sample task description.\nIt can be multiline\n\nAnother line...`);
     cy.get('.slick-custom-tooltip').should('contain', `This is a sample task description.\nIt can be multiline\n\nAnother line...`);
 
-    cy.get('@desc5-cell').trigger('mouseleave');
+    cy.get('@desc5-cell').trigger('mouseout');
   });
 
   it('should mouse over 6th row Description 2 and expect regular tooltip title + concatenated full cell content when using "useRegularTooltipFromFormatterOnly: true"', () => {
@@ -94,7 +94,7 @@ describe('Example - Custom Tooltip', () => {
     cy.get('.slick-custom-tooltip').should('be.visible');
     cy.get('.slick-custom-tooltip').should('contain', `regular tooltip (from title attribute)\nTask 5 cell value:\nThis is a sample task description.\nIt can be multiline\n\nAnother line...`);
 
-    cy.get('@desc2-5-cell').trigger('mouseleave');
+    cy.get('@desc2-5-cell').trigger('mouseout');
   });
 
   it('should mouse over 6th row Duration and expect a custom tooltip shown with 4 label/value pairs displayed', () => {
@@ -118,7 +118,7 @@ describe('Example - Custom Tooltip', () => {
     cy.get('.tooltip-2cols-row:nth(3)').find('div:nth(1)')
       .find('img').invoke('attr', 'src').then(src => expect(src).to.contain('tick.png'));
 
-    cy.get('@duration5-cell').trigger('mouseleave');
+    cy.get('@duration5-cell').trigger('mouseout');
   });
 
   it('should mouse over % Complete cell of Task 5 and expect regular tooltip to show with content "x %" where x is a number', () => {
@@ -129,20 +129,20 @@ describe('Example - Custom Tooltip', () => {
     cy.get('.slick-custom-tooltip').should('be.visible');
     cy.get('.slick-custom-tooltip').contains(/\d+\%$/);
 
-    cy.get('@percentage-cell').trigger('mouseleave');
+    cy.get('@percentage-cell').trigger('mouseout');
   });
 
   it('should mouse over header-row (filter) 1st column checkbox and NOT expect any tooltip to show since it is disabled on that column', () => {
     cy.get(`.slick-headerrow-columns .slick-headerrow-column:nth(0)`).as('checkbox0-filter')
-    cy.get('@checkbox0-filter').trigger('mouseover');
+    cy.get('@checkbox0-filter').trigger('mouseenter');
 
     cy.get('.slick-custom-tooltip').should('not.exist');
     cy.get('@checkbox0-filter').trigger('mouseleave');
   });
 
   it('should mouse over header-row (filter) 2nd column Title and expect a tooltip to show rendered from an headerRowFormatter', () => {
     cy.get(`.slick-headerrow-columns .slick-headerrow-column:nth(1)`).as('checkbox0-filter')
-    cy.get('@checkbox0-filter').trigger('mouseover');
+    cy.get('@checkbox0-filter').trigger('mouseenter');
 
     cy.get('.slick-custom-tooltip').should('be.visible');
     cy.get('.slick-custom-tooltip').contains('Custom Tooltip - Header Row (filter)');
@@ -155,23 +155,23 @@ describe('Example - Custom Tooltip', () => {
 
   it('should mouse over header-row (filter) Finish column and NOT expect any tooltip to show since it is disabled on that column', () => {
     cy.get(`.slick-headerrow-columns .slick-headerrow-column:nth(7)`).as('finish-filter')
-    cy.get('@finish-filter').trigger('mouseover');
+    cy.get('@finish-filter').trigger('mouseenter');
 
     cy.get('.slick-custom-tooltip').should('not.exist');
     cy.get('@finish-filter').trigger('mouseleave');
   });
 
   it('should mouse over header title on 1st column with checkbox and NOT expect any tooltip to show since it is disabled on that column', () => {
     cy.get(`.slick-header-columns .slick-header-column:nth(0)`).as('checkbox-header')
-    cy.get('@checkbox-header').trigger('mouseover');
+    cy.get('@checkbox-header').trigger('mouseenter');
 
     cy.get('.slick-custom-tooltip').should('not.exist');
     cy.get('@checkbox-header').trigger('mouseleave');
   });
 
   it('should mouse over header title on 2nd column with Title name and expect a tooltip to show rendered from an headerFormatter', () => {
     cy.get(`.slick-header-columns .slick-header-column:nth(1)`).as('checkbox0-header')
-    cy.get('@checkbox0-header').trigger('mouseover');
+    cy.get('@checkbox0-header').trigger('mouseenter');
 
     cy.get('.slick-custom-tooltip').should('be.visible');
     cy.get('.slick-custom-tooltip').contains('Custom Tooltip - Header');
@@ -184,7 +184,7 @@ describe('Example - Custom Tooltip', () => {
 
   it('should mouse over header title on 2nd column with Finish name and NOT expect any tooltip to show since it is disabled on that column', () => {
     cy.get(`.slick-header-columns .slick-header-column:nth(7)`).as('finish-header')
-    cy.get('@finish-header').trigger('mouseover');
+    cy.get('@finish-header').trigger('mouseenter');
 
     cy.get('.slick-custom-tooltip').should('not.exist');
     cy.get('@finish-header').trigger('mouseleave');

examples/example-checkbox-header-row.html

@@ -118,12 +118,12 @@ <h3>Selected Ids (<span id="idsCount">0</span>) with index/id offset=<span id="i
 <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>
 <script src="../plugins/slick.checkboxselectcolumn.js"></script>
 <script src="../plugins/slick.rowselectionmodel.js"></script>
 <script src="../controls/slick.pager.js"></script>
 <script src="../controls/slick.columnpicker.js"></script>
 
-<script src="../slick.core.js"></script>
 <script src="../slick.dataview.js"></script>
 <script src="../slick.interactions.js"></script>
 <script src="../slick.grid.js"></script>

examples/example-column-group.html

@@ -94,46 +94,44 @@ <h2>View Source:</h2>
     {id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, field: "effortDriven", columnGroup:"Analysis"}
   ];
 
-  $(function () {
-    for (var i = 0; i < 50000; i++) {
-      var d = (data[i] = {});
+  for (var i = 0; i < 50000; i++) {
+    var d = (data[i] = {});
 
-      d["id"] = "id_" + i;
-      d["num"] = i;
-      d["title"] = "Task " + i;
-      d["duration"] = "5 days";
-      d["start"] = "01/01/2009";
-      d["finish"] = "01/05/2009";
-      d["percentComplete"] = Math.round(Math.random() * 100);
-      d["effortDriven"] = (i % 5 == 0);
-    }
+    d["id"] = "id_" + i;
+    d["num"] = i;
+    d["title"] = "Task " + i;
+    d["duration"] = "5 days";
+    d["start"] = "01/01/2009";
+    d["finish"] = "01/05/2009";
+    d["percentComplete"] = Math.round(Math.random() * 100);
+    d["effortDriven"] = (i % 5 == 0);
+  }
 
-    dataView = new Slick.Data.DataView();
-    grid = new Slick.Grid("#myGrid", dataView, columns, options);
+  dataView = new Slick.Data.DataView();
+  grid = new Slick.Grid("#myGrid", dataView, columns, options);
 
-    dataView.onRowCountChanged.subscribe(function (e, args) {
-      grid.updateRowCount();
-      grid.render();
-    });
+  dataView.onRowCountChanged.subscribe(function (e, args) {
+    grid.updateRowCount();
+    grid.render();
+  });
 
-    dataView.onRowsChanged.subscribe(function (e, args) {
-      grid.invalidateRows(args.rows);
-      grid.render();
-    });
+  dataView.onRowsChanged.subscribe(function (e, args) {
+    grid.invalidateRows(args.rows);
+    grid.render();
+  });
 
-    grid.init();
+  grid.init();
 
-    grid.onColumnsResized.subscribe(function (e, args) {
-      CreateAddlHeaderRow();
-    });
-
+  grid.onColumnsResized.subscribe(function (e, args) {
     CreateAddlHeaderRow();
-
-    // Initialise data
-    dataView.beginUpdate();
-    dataView.setItems(data);
-    dataView.endUpdate();    
-  })
+  });
+
+  CreateAddlHeaderRow();
+
+  // Initialise data
+  dataView.beginUpdate();
+  dataView.setItems(data);
+  dataView.endUpdate();    
 </script>
 </body>
 </html>

examples/example-composite-editor-item-details.html

@@ -157,11 +157,11 @@ <h2>View Source:</h2>
         .appendTo("body");
 
     $modal.keydown(function (e) {
-      if (e.which == $.ui.keyCode.ENTER) {
+      if (e.which == Slick.keyCode.ENTER) {
         grid.getEditController().commitCurrentEdit();
         e.stopPropagation();
         e.preventDefault();
-      } else if (e.which == $.ui.keyCode.ESCAPE) {
+      } else if (e.which == Slick.keyCode.ESCAPE) {
         grid.getEditController().cancelCurrentEdit();
         e.stopPropagation();
         e.preventDefault();
@@ -178,7 +178,7 @@ <h2>View Source:</h2>
 
 
     var containers = $.map(columns, function (c) {
-      return $modal.find("[data-editorid=" + c.id + "]");
+      return $modal.find("[data-editorid=" + c.id + "]")[0];
     });
 
     var compositeEditor = new Slick.CompositeEditor(

examples/example-composite-editor-modal-dialog.html

@@ -439,7 +439,7 @@ <h2>View Source:</h2>
         });
 
         var containers = $.map(modalColumns, function (c) {
-          return $modal.find("[data-editorid=" + c.id + "]");
+          return $modal.find("[data-editorid=" + c.id + "]")[0];
         });
 
         var compositeEditor = new Slick.CompositeEditor(

examples/example-explicit-initialization.html

@@ -72,7 +72,7 @@ <h2>View Source:</h2>
 
     // create a detached container element
     var myGrid = $("<div id='myGrid' style='width:600px;height:500px;position:relative;'></div>");
-    grid = new Slick.Grid(myGrid, data, columns, options);
+    grid = new Slick.Grid(myGrid[0], data, columns, options);
 
 
     // ... later on, append the container to the DOM and initialize SlickGrid

examples/example1-simple.html

@@ -26,8 +26,6 @@ <h2>View Source:</h2>
   </tr>
 </table>
 
-<script src="../lib/jquery-3.1.0.js"></script>
-<script src="../slick.interactions.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
 <script src="../slick.core.js"></script>
@@ -50,21 +48,19 @@ <h2>View Source:</h2>
     enableColumnReorder: false
   };
 
-  $(function () {
-    var data = [];
-    for (var i = 0; i < 500; i++) {
-      data[i] = {
-        title: "Task " + i,
-        duration: "5 days",
-        percentComplete: Math.round(Math.random() * 100),
-        start: "01/01/2009",
-        finish: "01/05/2009",
-        effortDriven: (i % 5 == 0)
-      };
-    }
+  var data = [];
+  for (var i = 0; i < 500; i++) {
+    data[i] = {
+      title: "Task " + i,
+      duration: "5 days",
+      percentComplete: Math.round(Math.random() * 100),
+      start: "01/01/2009",
+      finish: "01/05/2009",
+      effortDriven: (i % 5 == 0)
+    };
+  }
 
-    grid = new Slick.Grid("#myGrid", data, columns, options);
-  })
+  grid = new Slick.Grid("#myGrid", data, columns, options);
 </script>
 </body>
 </html>

examples/example2-formatters.html

@@ -49,7 +49,6 @@ <h2>View Source:</h2>
 
 <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>
@@ -99,10 +98,10 @@ <h2>View Source:</h2>
   var options = {
     editable: true,
     enableAddRow: false,
-    enableCellNavigation: true
+    enableCellNavigation: true,
+    createPreHeaderPanel: true
   };
 
-  $(function () {
     for (var i = 0; i < 5; i++) {
       var d = (data[i] = {});
 
@@ -115,7 +114,6 @@ <h2>View Source:</h2>
     }
 
     grid = new Slick.Grid("#myGrid", data, columns, options);
-  })
 </script>
 </body>
 </html>

examples/example3-editing.html

@@ -53,10 +53,10 @@ <h2>View Source:</h2>
 
 <script src="../lib/firebugx.js"></script>
 
-<script src="../lib/jquery-3.1.0.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
-  <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
+<script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
+<script src="../lib/jquery-3.1.0.js"></script>
 <script src="../slick.core.js"></script>
 <script src="../plugins/slick.cellrangedecorator.js"></script>
 <script src="../plugins/slick.cellrangeselector.js"></script>

examples/example3b-editing-with-undo.html

@@ -41,7 +41,6 @@ <h2>View Source:</h2>
 
 <script src="../lib/firebugx.js"></script>
 
-<script src="../lib/jquery-3.1.0.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
 <script src="https://cdn.jsdelivr.net/npm/sortablejs/Sortable.min.js"></script>
 
@@ -96,7 +95,6 @@ <h2>View Source:</h2>
     }
   }
 
-  $(function () {
     for (var i = 0; i < 500; i++) {
       var d = (data[i] = {});
 
@@ -110,7 +108,6 @@ <h2>View Source:</h2>
     }
 
     grid = new Slick.Grid("#myGrid", data, columns, options);
-  })
 </script>
 </body>
 </html>