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'`

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,15 +209,13 @@ <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();
     CreateAddlHeaderRow();
  });
 
   document.querySelector('#chkHideColumn2').addEventListener("change", function(e) {
-  //$("#chkHideColumn").change(function () {
     var hideCol = document.querySelector('#chkHideColumn2').checked || false;
     columns[4].hidden = hideCol;
     grid.updateColumns();

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",

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);

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 */

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 {