fix(plugin): Grid Menu shouldn't be displayed in preheader by default (…

…#1523) - add `iconButtonContainer: 'preheader' | 'header'` grid option (default to 'header'). For example, the Grid Menu is shown in the Draggable Grouping drop zone but it should really be in the Column Header section, we'll change the default to 'header' but let's add a grid option to let the user choose either 'preheader' or 'header'
ghiscoding · May 11, 2024 · 7e0cdc9 · 7e0cdc9
1 parent dc5d402
commit 7e0cdc9
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/examples/vite-demo-vanilla-bundle/src/examples/example08.ts b/examples/vite-demo-vanilla-bundle/src/examples/example08.ts
@@ -68,6 +68,9 @@ export default class Example08 {
         exportWithFormatter: true,
         sanitizeDataExport: true
       },
+      gridMenu: {
+        iconButtonContainer: 'preheader' // we can display the grid menu icon in either the preheader or in the column header (default)
+      },
       externalResources: [new TextExportService(), new ExcelExportService()],
       enableCellNavigation: true,
       enableColumnReorder: false,

diff --git a/packages/common/src/extensions/slickGridMenu.ts b/packages/common/src/extensions/slickGridMenu.ts
@@ -212,7 +212,9 @@ export class SlickGridMenu extends MenuBaseClass<GridMenu> {
         if (this._addonOptions?.iconCssClass) {
           this._gridMenuButtonElm.classList.add(...classNameToList(this._addonOptions.iconCssClass));
         }
-        this._headerElm.parentElement!.insertBefore(this._gridMenuButtonElm, this._headerElm.parentElement!.firstChild);
+        // add the grid menu button in the preheader (when exists) or always in the column header (default)
+        const buttonContainerTarget = this._addonOptions.iconButtonContainer === 'preheader' ? 'firstChild' : 'lastChild';
+        this._headerElm.parentElement!.insertBefore(this._gridMenuButtonElm, this._headerElm.parentElement![buttonContainerTarget]);
 
         // show the Grid Menu when hamburger menu is clicked
         this._bindEventService.bind(this._gridMenuButtonElm, 'click', this.showGridMenu.bind(this) as EventListener);

diff --git a/packages/common/src/interfaces/gridMenuOption.interface.ts b/packages/common/src/interfaces/gridMenuOption.interface.ts
@@ -79,7 +79,10 @@ export interface GridMenuOption {
   /** Defaults to true, which will hide the "Toggle Pre-Header Row" (used by draggable grouping) command in the Grid Menu (Grid Option "showPreHeaderPanel: true" has to be enabled) */
   hideTogglePreHeaderCommand?: boolean;
 
-  /** CSS class for the displaying the Grid menu icon (basically the hamburger menu) */
+  /** Defaults to "header", where should we display the grid menu button? Should it be inside the "preheader" (when exists) or always inside the column "header" (default). */
+  iconButtonContainer?: 'preheader' | 'header';
+
+  /** CSS class for the displaying the Grid menu icon (aka the hamburger menu button) */
   iconCssClass?: string;
 
   /** icon for the "Clear all Filters" command */