0

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:

enter image description here

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

Suresh Negi
  • 372
  • 2
  • 6
  • 19
  • by the look at your UI, you're completely missing the grid styling, which explain why you don't see it since it needs proper css styling to work. You can use CSS or SASS (.scss) to load the styling, refer to the Step by Step wiki. – ghiscoding Nov 27 '19 at 14:34
  • Thanks, but I have added the reference for css also and I think it is working.I have updated the question with code – Suresh Negi Nov 27 '19 at 14:52
  • Well if your grid still looks like the print screen you posted, then the styling is still not working, it's not supposed to look like that and without the correct styling then the header menu won't work properly. – ghiscoding Nov 27 '19 at 15:12
  • other features like filter,sorting,gridmenu are working but headermenu is not working – Suresh Negi Nov 27 '19 at 15:46
  • I got the reason for the issue. In angularGridReady function I need to hide some columns from default display for that I am using this.angularSilkGrid.slickGrid.setColumns method.On not calling the setColumns method headermenu icon is visible – Suresh Negi Nov 28 '19 at 09:30

1 Answers1

0

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);     
}
Suresh Negi
  • 372
  • 2
  • 6
  • 19
  • visible is the custumize property added to each column.Column to which I want to hide on default view , for those columns visible is set to false – Suresh Negi Nov 28 '19 at 10:02