fix(plugin): Draggable Grouping drop zone should always be 100% wide (#…

…1524)
ghiscoding · May 11, 2024 · a6dbf2c · a6dbf2c
1 parent 7e0cdc9
commit a6dbf2c
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 4 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example03.ts b/examples/vite-demo-vanilla-bundle/src/examples/example03.ts
@@ -291,6 +291,12 @@ export default class Example03 {
       dataView: {
         useCSPSafeFilter: true
       },
+      headerMenu: {
+        hideFreezeColumnsCommand: false,
+      },
+      gridMenu: {
+        hideClearFrozenColumnsCommand: false
+      },
       enableAutoSizeColumns: true,
       enableAutoResize: true,
       enableCellNavigation: true,

diff --git a/packages/common/src/core/slickGrid.ts b/packages/common/src/core/slickGrid.ts
@@ -1201,7 +1201,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
           Utils.width(this._footerRowR, this.canvasWidthR);
         }
         if (this._options.createPreHeaderPanel) {
-          Utils.width(this._preHeaderPanel, this.canvasWidth);
+          Utils.width(this._preHeaderPanel, this._options.preHeaderPanelWidth ?? this.canvasWidth);
         }
         Utils.width(this._viewportTopL, this.canvasWidthL);
         Utils.width(this._viewportTopR, this.viewportW - this.canvasWidthL);
@@ -1228,7 +1228,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
         }
 
         if (this._options.createPreHeaderPanel) {
-          Utils.width(this._preHeaderPanel, this.canvasWidth);
+          Utils.width(this._preHeaderPanel, this._options.preHeaderPanelWidth ?? this.canvasWidth);
         }
         Utils.width(this._viewportTopL, '100%');
 

diff --git a/packages/common/src/global-grid-options.ts b/packages/common/src/global-grid-options.ts
@@ -248,6 +248,7 @@ export const GlobalGridOptions: Partial<GridOption> = {
   headerRowHeight: 35,
   rowHeight: 35,
   topPanelHeight: 30,
+  preHeaderPanelWidth: '100%', // mostly useful for Draggable Grouping dropzone to take full width
   translationNamespaceSeparator: ':',
   resetFilterSearchValueAfterOnBeforeCancellation: true,
   resizeByContentOnlyOnFirstLoad: true,

diff --git a/packages/common/src/interfaces/gridOption.interface.ts b/packages/common/src/interfaces/gridOption.interface.ts
@@ -656,6 +656,9 @@ export interface GridOption<C extends Column = Column> {
   /** Extra pre-header panel height (on top of column header) */
   preHeaderPanelHeight?: number;
 
+  /** Extra pre-header panel (on top of column header) width, it could be a number (pixels) or a string ("100%") */
+  preHeaderPanelWidth?: number | string;
+
   /** Do we want to preserve copied selection on paste? */
   preserveCopiedSelectionOnPaste?: boolean;
 

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -670,7 +670,7 @@ $slick-draggable-group-drop-bgcolor:                        #ffffff !default;
 $slick-draggable-group-drop-height:                         35px !default;
 $slick-draggable-group-drop-padding:                        5px 10px !default;
 $slick-draggable-group-drop-radius:                         4px !default;
-$slick-draggable-group-drop-width:                          calc(100% - 25px) !default;
+$slick-draggable-group-drop-width:                          100% !default;
 $slick-draggable-group-droppable-active-bgcolor:            #fafafa !default;
 $slick-draggable-group-droppable-hover-bgcolor:             #ffffff !default;
 $slick-draggable-group-placeholder-font-style:              italic !default;

diff --git a/packages/common/src/styles/slick-plugins.scss b/packages/common/src/styles/slick-plugins.scss
@@ -903,7 +903,7 @@ input.search-filter {
     border-left: var(--slick-draggable-group-drop-border-left, $slick-draggable-group-drop-border-left);
     border-right: var(--slick-draggable-group-drop-border-right, $slick-draggable-group-drop-border-right);
     border-bottom: var(--slick-draggable-group-drop-border-bottom, $slick-draggable-group-drop-border-bottom);
-    width: var(--slick-draggable-group-drop-width, $slick-draggable-group-drop-width) !important;
+    width: var(--slick-draggable-group-drop-width, $slick-draggable-group-drop-width);
     border-radius: var(--slick-draggable-group-drop-radius, $slick-draggable-group-drop-radius);
     background-color: var(--slick-draggable-group-drop-bgcolor, $slick-draggable-group-drop-bgcolor);