fix: add missing RowMoveManager containerCssClass option (#906)

* fix: add missing RowMoveManager `containerCssClass` option
6pac · Nov 2, 2023 · 5f85574 · 5f85574
1 parent fb0e4f5
commit 5f85574
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 5 deletions.
diff --git a/examples/example-drag-row-between-grids.html b/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 sgi-14px",
+    cssClass: "cell-drag-cross-grid dnd",
+    formatter: () => `<span class="sgi sgi-drag"></span>`
   },
   {
     id: "name",

diff --git a/examples/example-frozen-row-reordering.html b/examples/example-frozen-row-reordering.html
@@ -113,7 +113,8 @@ <h2>
     behavior: "selectAndMove",
     selectable: false,
     resizable: false,
-    cssClass: "cell-reorder dnd sgi sgi-drag sgi-14px",
+    cssClass: "cell-reorder dnd",
+    formatter: () => `<span class="sgi sgi-drag"></span>`
   },
   {
     id: "name",

diff --git a/examples/example9-row-reordering-simple.html b/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-14px"
+    cssClass: "slickgrid-cell-reorder",
+    formatter: () => `<span class="sgi sgi-drag"></span>`
   },
   {
     id: "name",

diff --git a/examples/example9-row-reordering.html b/examples/example9-row-reordering.html
@@ -113,7 +113,8 @@ <h2>View Source:</h2>
     behavior: "selectAndMove",
     selectable: false,
     resizable: false,
-    cssClass: "cell-reorder dnd sgi sgi-drag sgi-14px"
+    cssClass: "cell-reorder dnd",
+    formatter: () => `<span class="sgi sgi-drag"></span>`
   },
   {
     id: "name",

diff --git a/src/models/rowMoveManagerOption.interface.ts b/src/models/rowMoveManagerOption.interface.ts
@@ -21,6 +21,9 @@ export interface RowMoveManagerOption {
   /** 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;
 

diff --git a/src/plugins/slick.rowmovemanager.ts b/src/plugins/slick.rowmovemanager.ts
@@ -9,6 +9,7 @@ const Utils = IIFE_ONLY ? Slick.Utils : Utils_;
 
 /**
  * Row Move Manager options:
+ *    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)
@@ -250,7 +251,10 @@ export class SlickRowMoveManager {
     if (!this.checkUsabilityOverride(row, dataContext, grid)) {
       return '';
     } else {
-      return { addClasses: `cell-reorder dnd ${this._options.cssClass || ''}`.trim(), text: '' };
+      return {
+        addClasses: `cell-reorder dnd ${this._options.containerCssClass || ''}`,
+        text: `<div class="${this._options.cssClass}"></div>`
+      };
     }
   }