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 @@
View Source:
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 @@ View Source:
});
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 @@ View Source:
});
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 @@ View Source:
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 {