fix: Draggable Grouping drop zone in preheader should take full width (…

…#1025)

- also use `auto` instead of `100%` to take full width but without being wider than its actual container

src/models/gridOption.interface.ts

@@ -251,6 +251,9 @@ export interface GridOption<C extends BaseColumn = BaseColumn> {
   /** Extra pre-header panel height (on top of column header) */
   preHeaderPanelHeight?: number;
 
+  /** Defaults to "auto", extra pre-header panel (on top of column header) width, it could be a number (pixels) or a string ("100%" or "auto") */
+  preHeaderPanelWidth?: number | string;
+
   /** Do we want to preserve copied selection on paste? */
   preserveCopiedSelectionOnPaste?: boolean;
 

src/slick.grid.ts

@@ -245,6 +245,7 @@ export class SlickGrid<TData = any, C extends Column<TData> = Column<TData>, O e
     preHeaderPanelHeight: 25,
     showTopPanel: false,
     topPanelHeight: 25,
+    preHeaderPanelWidth: 'auto', // mostly useful for Draggable Grouping dropzone to take full width
     formatterFactory: null,
     editorFactory: null,
     cellFlashingCssClass: 'flashing',
@@ -1230,7 +1231,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);
@@ -1257,7 +1258,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%');