Angular-Slickgrid header menu is not visible even setting enableHeaderMenu option to true

Question

I am using Angular-Slickgrid in my angular application. Grid is working fine but I am facing issue with Headermenu. When I run the application unable to see Headermenu icon on mousehover in any header.

I am using below gridoptions :

this.gridOptions = {
  enableAutoResize: true,     
  enableCellNavigation: true,
  autoEdit: false,
  enableRowSelection: true,
  rowHeight: 30,
  editable: true,
  enableGrouping: true,
  forceFitColumns: true,
  enableHeaderButton: true,
  enableHeaderMenu: true,
  gridMenu: {
    hideExportCsvCommand: true,
    hideExportTextDelimitedCommand: true,
    hideExportExcelCommand: true,
    hideClearAllSortingCommand: true,
    hideForceFitButton: true,
    onBeforeMenuShow: (a, b) => {
    }
  }
};

As you can see I have set enableHeaderMenu: true, even after this unable to see the header menu. Below is the image my grid look like:

When I mousehover on any header unable to see header menu icon(on which I need to click to open the header menu)

I have added the reference of required css files also and I think css is working. Below is code of angular.json file:

"styles": [
          "src/styles.scss",              
          "./node_modules/font-awesome/css/font-awesome.css",
          "./node_modules/bootstrap/dist/css/bootstrap.css",
          "./node_modules/flatpickr/dist/flatpickr.css",
          "./node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",   
          "./node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
          "./node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
          "./node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css",
           "src/slickgrid-styles.scss",
          "./node_modules/angular-slickgrid/lib/multiple-select/multiple-select.css"
        ],
        "scripts": [
          "./node_modules/jquery/dist/jquery.js",
          "./node_modules/jquery-ui-dist/jquery-ui.min.js",
          "./node_modules/slickgrid/lib/jquery.event.drag-2.3.0.js",
          "./node_modules/bootstrap/dist/js/bootstrap.js",
          "./node_modules/angular-slickgrid/lib/multiple-select/multiple-select.js"
        ]

code of slickgrid-styles.scss file :

@import './node_modules/angular-slickgrid/styles/sass/slickgrid-theme-bootstrap.scss';

After investigatng my code finally I found the route cause for the issue. I am using 12 columns in my grid out of which I want to display only some columns on page load say 9 columns(user can the check the column from grid menu to make visible).For this purpose I am using below code:

setGridDefaultVisibleColumns() {
const visibleColumns = this.columnDefs.filter((c) => {
  return c['visible'] !== false;
});    
this.angularSilkGrid.slickGrid.setColumns(visibleColumns); }

I am calling this method in angularGridReady

angularGridReady(angularGrid: AngularGridInstance) {
this.dataGrid = angularGrid.slickGrid;
this.angularSilkGrid = angularGrid;
this.setGridDefaultVisibleColumns();
 }

After commenting the setGridDefaultVisibleColumns function call my issue is resolved

Answer 1

Below is the workaround for the issue.setColumns method of slick gird is also affecting the headermenu.

I can hide the column like below without affecting the headermenu.See the below code

setGridDefaultVisibleColumns() {
this.columnDefs.forEach(c => {
  if (c['visible'] === false) {
    this.angularSilkGrid.extensionService.hideColumn(c);
  }
 }); this.angularSilkGrid.slickGrid.setColumns(visibleColumns);     
}