How to highlight full row in angular slickgrid when frozen Column is enabled

Question

Requirement

I want to highlight the whole row when hovering over an Angular SlickGrid row with frozen columns. However, the usual CSS :hover selector doesn't work because the grid splits into Frozen Column and Non-Frozen Column slick-panes. I'm looking for another way to achieve row highlighting in this scenario.

I recently discovered ghiscode and attempted to highlight an entire row using the provided code snippet. Although this successfully fulfilled my row highlighting requirement, it made the checkbox unselectable. Is there an alternative method to achieve row highlighting in SlickGrid while hovering that doesn't interfere with checkbox functionality?

The output of Screenshot is attached below

Output screenshot

  angularGridReady(angularGrid: AngularGridInstance) {
    this.angularGrid = angularGrid;
    this.dataView = angularGrid.dataView;
    this.grid = angularGrid.slickGrid as SlickGrid;
    this.gridService = angularGrid.gridService;
  }

  /** Change the Duration Rows Background Color */
  changeDurationBackgroundColor() {
    this.dataView.getItemMetadata = this.updateItemMetadataForDurationOver40(this.dataView.getItemMetadata);

    // also re-render the grid for the styling to be applied right away
    this.grid.invalidate();
    this.grid.render();
  }

updateItemMetadataForDurationOver40(previousItemMetadata: any) {
    const newCssClass = 'duration-bg';

    return (rowNumber: number) => {
      const item = this.dataView.getItem(rowNumber);
      let meta = {
        cssClasses: ''
      };
      if (typeof previousItemMetadata === 'object') {
        meta = previousItemMetadata(rowNumber);
      }

      if (meta && item && item.duration) {
        const duration = +item.duration; // convert to number
        if (duration > 40) {
          meta.cssClasses = (meta.cssClasses || '') + ' ' + newCssClass;
        }
      }

      return meta;
    };
  }

Answer 1

It's not very clear what your question is, since highlight usually mean 2 things (1. flashing a cell with background color for a short period or 2. add permanent background color). However you seem to be looking for background color when hovering the row, is that what you're looking for? If it is, then that is already demoed in Angular-Slickgrid Example 20, as you found out a frozen section means a different div, you need to watch onMouseOver and onMouseLeave` from the grid object which again is pulled directly from Example 20

angularGridReady(angularGrid: AngularGridInstance) {
  this.angularGrid = angularGrid;
  this.gridObj = angularGrid.slickGrid;

  // with frozen (pinned) grid, in order to see the entire row being highlighted when hovering
  // we need to do some extra tricks (that is because frozen grids use 2 separate div containers)
  // the trick is to use row selection to highlight when hovering current row and remove selection once we're not
  this.slickEventHandler.subscribe(this.gridObj.onMouseEnter, (event: Event) => this.colorizeHoveringRow(event, true));
  this.slickEventHandler.subscribe(this.gridObj.onMouseLeave, (event: Event) => this.colorizeHoveringRow(event, false));
}

colorizeHoveringRow(event: Event, isMouseEnter: boolean) {
  const cell = this.gridObj.getCellFromEvent(event);
  const rows = isMouseEnter ? [cell?.row ?? 0] : [];
  this.gridObj.setSelectedRows(rows); // highlight current row
  event.preventDefault();
}