From 56a24db1627546d3ff11967af3cc943acba6de44 Mon Sep 17 00:00:00 2001
From: Ghislain B <gbeaulac@gmail.com>
Date: Sat, 11 May 2024 13:18:35 -0400
Subject: [PATCH] feat: add `iconButtonContainer` option to Grid Menu (#1018)

- 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'`
---
 .../example-frozen-columns-and-column-group-hidden-col.html  | 3 +--
 examples/example-frozen-columns-and-column-group.html        | 1 +
 src/controls/slick.gridmenu.ts                               | 4 +++-
 src/models/gridMenuOption.interface.ts                       | 5 ++++-
 src/styles/slick.gridmenu.scss                               | 3 +--
 5 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/examples/example-frozen-columns-and-column-group-hidden-col.html b/examples/example-frozen-columns-and-column-group-hidden-col.html
index 63df5879..a6a8be83 100644
--- a/examples/example-frozen-columns-and-column-group-hidden-col.html
+++ b/examples/example-frozen-columns-and-column-group-hidden-col.html
@@ -139,6 +139,7 @@ <h2>View Source:</h2>
       headerColumnValueExtractor: pickerHeaderColumnValueExtractor
     },
     gridMenu: {
+      iconButtonContainer: 'preheader', // we can display the grid menu icon in either the preheader or in the column header (default)
       iconCssClass: "sgi sgi-menu sgi-17px",
       headerColumnValueExtractor: pickerHeaderColumnValueExtractor,
       customTitle: "Commands",
@@ -208,7 +209,6 @@ <h2>View Source:</h2>
     });
 
   document.querySelector('#chkHideColumn1').addEventListener("change", function(e) {
-  //$("#chkHideColumn").change(function () {
     var hideCol = document.querySelector('#chkHideColumn1').checked || false;
     columns[2].hidden = hideCol;
     grid.updateColumns();
@@ -216,7 +216,6 @@ <h2>View Source:</h2>
  });
 
   document.querySelector('#chkHideColumn2').addEventListener("change", function(e) {
-  //$("#chkHideColumn").change(function () {
     var hideCol = document.querySelector('#chkHideColumn2').checked || false;
     columns[4].hidden = hideCol;
     grid.updateColumns();
diff --git a/examples/example-frozen-columns-and-column-group.html b/examples/example-frozen-columns-and-column-group.html
index 6e47d86d..bb72c6d7 100644
--- a/examples/example-frozen-columns-and-column-group.html
+++ b/examples/example-frozen-columns-and-column-group.html
@@ -133,6 +133,7 @@ <h2>View Source:</h2>
       headerColumnValueExtractor: pickerHeaderColumnValueExtractor
     },
     gridMenu: {
+      // iconButtonContainer: 'preheader', // we can display the grid menu icon in either the preheader or in the column header (default)
       iconCssClass: "sgi sgi-menu sgi-17px",
       headerColumnValueExtractor: pickerHeaderColumnValueExtractor,
       customTitle: "Commands",
diff --git a/src/controls/slick.gridmenu.ts b/src/controls/slick.gridmenu.ts
index aea0e880..b8995ffc 100644
--- a/src/controls/slick.gridmenu.ts
+++ b/src/controls/slick.gridmenu.ts
@@ -239,7 +239,9 @@ export class SlickGridMenu {
         this._buttonElm.appendChild(iconImageElm);
       }
 
-      this._headerElm!.parentElement!.insertBefore(this._buttonElm, this._headerElm!.parentElement!.firstChild);
+      // add the grid menu button in the preheader (when exists) or always in the column header (default)
+      const buttonContainerTarget = this._gridMenuOptions?.iconButtonContainer === 'preheader' ? 'firstChild' : 'lastChild';
+      this._headerElm!.parentElement!.insertBefore(this._buttonElm, this._headerElm!.parentElement![buttonContainerTarget]);
 
       // add on click handler for the Grid Menu itself
       this._bindingEventService.bind(this._buttonElm, 'click', this.showGridMenu.bind(this) as EventListener);
diff --git a/src/models/gridMenuOption.interface.ts b/src/models/gridMenuOption.interface.ts
index 986e9c5c..044c9b6b 100644
--- a/src/models/gridMenuOption.interface.ts
+++ b/src/models/gridMenuOption.interface.ts
@@ -34,10 +34,13 @@ export interface GridMenuOption {
   /** Defaults to false, show/hide 1 of the last 2 checkbox at the end of the picker list */
   hideSyncResizeButton?: boolean;
 
+  /** 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';
+
   /**  Grid Menu icon (hamburger icon) */
   iconImage?: string;
 
-  /** CSS class for the displaying the Grid menu icon (basically the hamburger menu) */
+  /** CSS class for the displaying the Grid menu icon (aka the hamburger menu button) */
   iconCssClass?: string;
 
   /** Defaults to False, which leads to leaving the menu open after a click */
diff --git a/src/styles/slick.gridmenu.scss b/src/styles/slick.gridmenu.scss
index f4857401..5fda326a 100644
--- a/src/styles/slick.gridmenu.scss
+++ b/src/styles/slick.gridmenu.scss
@@ -22,13 +22,12 @@
   cursor: pointer;
   right: 0;
   padding: 0 2px;
-  top: 0;
   background-color: transparent;
   cursor: pointer;
   border: 0;
   margin-top: 5px;
   width: 16px;
-  z-index: 1;
+  z-index: 9;
 }
 
 .slick-gridmenu > .close {