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