fix: add containerCssClass to RowMove to fix cell styling issue wit…

…h icons (#865)

* fix: add `cellContainerCssClass` to fix cell styling issue with icons
- prior to this PR we only had a `cssClass` option but that was adding the CSS classes directly on the `.slick-cell` container and this was maybe ok before we added SlickGrid icons (SVG) but it's causing issue now as per attached printscreens. To address this, let's add a `cellContainerCssClass` that will keep "cell-reorder dnd" CSS classes on the cell container, but let's use the `cssClass` as a new <div> inside the slick-cell container, so this way our icon is separate from the container and won't affect/conflict with its styling

* chore: rename to simpler `containerCssClass` option

---------

examples/example-drag-row-between-grids.html

@@ -109,7 +109,8 @@ <h2>View Source:</h2>
     behavior: "selectAndMove",
     selectable: false,
     resizable: false,
-    cssClass: "cell-drag-cross-grid dnd sgi sgi-drag"
+    cssClass: "cell-drag-cross-grid dnd",
+    formatter: () => `<span class="sgi sgi-drag"></span>`
   },
   {
     id: "name",

examples/example-frozen-row-reordering.html

@@ -8,6 +8,9 @@
   <link rel="stylesheet" href="../dist/styles/css/slick-alpine-theme.css" type="text/css"/>
   <link rel="stylesheet" href="../dist/styles/css/slick-icons.css" type="text/css"/>
   <style>
+    .slick-cell {
+      user-select: none;
+    }
     .cell-title {
       zfont-weight: bold;
     }
@@ -110,7 +113,8 @@ <h2>
     behavior: "selectAndMove",
     selectable: false,
     resizable: false,
-    cssClass: "cell-reorder dnd sgi sgi-drag sgi-12px"
+    cssClass: "cell-reorder dnd",
+    formatter: () => `<span class="sgi sgi-drag"></span>`
   },
   {
     id: "name",
@@ -213,7 +217,6 @@ <h2>
   });
 
   moveRowsPlugin.onMoveRows.subscribe(function (e, args) {
-    console.log(args)
     var extractedRows = [], left, right;
     var rows = args.rows;
     var insertBefore = args.insertBefore;
@@ -328,13 +331,13 @@ <h2>
 
   $.drop({mode: "mouse"});
   $("#dropzone")
-    .bind("dropstart", function (e, dd) {
+    .on("dropstart", function (e, dd) {
       $(this).css("background", "yellow");
     })
-    .bind("dropend", function (e, dd) {
+    .on("dropend", function (e, dd) {
       $(dd.available).css("background", "pink");
     })
-    .bind("drop", function (e, dd) {
+    .on("drop", function (e, dd) {
       var rowsToDelete = (dd.rows || []).sort().reverse();
       for (var i = 0; i < rowsToDelete.length; i++) {
         data.splice(rowsToDelete[i], 1);

examples/example-row-detail-selection-and-move.html

@@ -256,7 +256,7 @@ <h3>Selected Titles:</h3>
       columns.splice(columnIndex, 0, checkboxSelectorPlugin.getColumnDefinition());
 
       rowMovePlugin = new Slick.RowMoveManager({
-        cssClass: 'sgi sgi-drag sgi-10px',
+        cssClass: 'sgi sgi-drag',
         cancelEditOnDrag: true,
         singleRowMove: true,
         disableRowSelection: true,

examples/example9-row-reordering-simple.html

@@ -66,7 +66,8 @@ <h2>View Source:</h2>
     behavior: "selectAndMove",
     selectable: false,
     resizable: false,
-    cssClass: "slickgrid-cell-reorder sgi sgi-drag sgi-12px"
+    cssClass: "slickgrid-cell-reorder",
+    formatter: () => `<span class="sgi sgi-drag"></span>`
   },
   {
     id: "name",

examples/example9-row-reordering.html

@@ -8,6 +8,9 @@
   <link rel="stylesheet" href="../dist/styles/css/example-demo.css" type="text/css"/>
   <link rel="stylesheet" href="../dist/styles/css/slick-alpine-theme.css" type="text/css"/>
   <style>
+    .slick-cell {
+      user-select: none;
+    }
     .cell-effort-driven {
       justify-content: center;
     }
@@ -110,7 +113,8 @@ <h2>View Source:</h2>
     behavior: "selectAndMove",
     selectable: false,
     resizable: false,
-    cssClass: "cell-reorder dnd sgi sgi-drag sgi-12px"
+    cssClass: "cell-reorder dnd",
+    formatter: () => `<span class="sgi sgi-drag"></span>`
   },
   {
     id: "name",

src/models/formatterResultObject.interface.ts

@@ -1,13 +1,13 @@
 export interface FormatterResultObject {
-  /** Optional CSS classes to add to the cell div */
+  /** Optional CSS classes to add to the cell div container. */
   addClasses?: string;
 
-  /** Optional CSS classes to remove from the cell div */
+  /** Optional CSS classes to remove from the cell div container. */
   removeClasses?: string;
 
-  /** Text to be displayed in the cell, basically the formatter output */
+  /** Text to be displayed in the cell, basically the formatter output. */
   text: string;
 
-  /** Optional tooltip text */
+  /** Optional tooltip text when hovering the cell div container. */
   toolTip?: string;
 }

src/models/rowMoveManagerOption.interface.ts

@@ -18,9 +18,12 @@ export interface RowMoveManagerOption {
    */
   cellRangeSelector?: SlickCellRangeSelector;
 
-  /**  A CSS class to be added to the menu item container. */
+  /** A CSS class to be added to the div of the cell formatter. */
   cssClass?: string;
 
+  /** A CSS class to be added to the cell container. */
+  containerCssClass?: string;
+
   /**  Column definition id(defaults to "_move") */
   columnId?: string;
 

src/plugins/slick.rowmovemanager.ts

@@ -9,7 +9,8 @@ const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
 
 /**
  * Row Move Manager options:
- *    cssClass:                 A CSS class to be added to the menu item container.
+ *    containerCssClass:        A CSS class to be added to the cell container.
+ *    cssClass:                 A CSS class to be added to the div of the cell formatter.
  *    columnId:                 Column definition id (defaults to "_move")
  *    cancelEditOnDrag:         Do we want to cancel any Editing while dragging a row (defaults to false)
  *    disableRowSelection:      Do we want to disable the row selection? (defaults to false)
@@ -250,7 +251,10 @@ export class SlickRowMoveManager {
     if (!this.checkUsabilityOverride(row, dataContext, grid)) {
       return '';
     } else {
-      return { addClasses: `cell-reorder dnd ${this._options.cssClass || ''}`, text: '' };
+      return {
+        addClasses: `cell-reorder dnd ${this._options.containerCssClass || ''}`,
+        text: `<div class="${this._options.cssClass}"></div>`
+      };
     }
   }