How to capture the row hover event in ag-grid?

Question

I was going through the documentation of ag-grid and looks like there is no event to capture the row hover event for the grid. My requirement is to display the image on the first column when the user hovers on the row. It might be on any column of the row, not necessarily the first cell. I'm using a cell-renderer and cell-editor and performing certain actions. (For simplicity, I didn't post the cell editor code in the plunker link)How can I achieve this?

Please see the plunkr example: https://plnkr.co/edit/NfuGp3iVheuCqglz

app.component.ts

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'ag-grid-community/dist/styles/ag-grid.css';
import 'ag-grid-community/dist/styles/ag-theme-alpine.css';
import {KaboobMenuComponent} from './kaboob-menu.component';

@Component({
  selector: 'my-app',
  template: `
    <ag-grid-angular
      #agGrid
      style="width: 100%; height: 100%;"
      id="myGrid"
      class="ag-theme-alpine"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [rowData]="rowData"
      (gridReady)="onGridReady($event)"
       [frameworkComponents]="frameworkComponents"
    ></ag-grid-angular>
  `,
})
export class AppComponent {
  private gridApi;
  private gridColumnApi;

  private columnDefs;
  private defaultColDef;
  private rowData: [];
  public frameworkComponents;

  constructor(private http: HttpClient) {
    this.columnDefs = [
      {
        headerName: 'Participant',
        children: [
          {
        headerName: '',
        filter: false,
        sortable: false,
        editable: true,
        singleClickEdit: true,
        cellRenderer: 'kaboobRenderer',        
      },
          { field: 'athlete' },
          {
            field: 'age',
            maxWidth: 90,
          },
        ],
      },
      {
        headerName: 'Details',
        children: [
          { field: 'country' },
          {
            field: 'year',
            maxWidth: 90,
          },
          { field: 'date' },
          { field: 'sport' },
        ],
      }     
    ];
    this.defaultColDef = {
      flex: 1,
      minWidth: 150,
      resizable: true,
    };
    this.frameworkComponents = {
      kaboobRenderer: KaboobMenuComponent
    };
  }

  onGridReady(params) {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    this.http
      .get(
        'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/olympicWinners.json'
      )
      .subscribe(data => {
        this.rowData = data;
      });
  }
}

kaboob-menu.component.ts (My Custom Renderer)

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-kaboob-menu',
  template: `<img border="0" width="15" height="10" src="https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/images/smiley.png"/>`,  
})
export class KaboobMenuComponent implements OnInit {
  params: any;
  rowData: any;
  display = true;

  constructor() { }

  agInit(params) {
    this.params = params;
    this.rowData = params.data;    
  }

  ngOnInit() {
  }

  onClick($event) {
    if (this.params.onClick instanceof Function) {
      const params = {
        event: $event,
        rowData: this.params.node.data
      };
      this.params.onClick(params);
    }
  }
}

I'm using cellMouseOver event. But, this event is fired when we hover on the first column and not on any other columns. I want to capture the row hover event.

Any direction would be appreciated. Thanks in advance!!

Answer 1

I would listen to cellMouseOver event emitted by the grid.

in html : (cellMouseOver)="onCellMouseOver($event)"

in component:

  onCellMouseOver(params) {

    //do your stuff here
  }

The params object has a rowIndex to identify which row it is on regardless of the cell. You can manipulate your rowNode inside this onCellMouseOver

Answer 2

I also have similar requirement. I have used CSS styling and ag-grid class names to show the content of cell on row hover

• Initially hide the content of the cell by styling (display:none for that cell)
• On row hover, ag-grid adds ag-row-hover CSS class, use this class selector to show the content of the cell.

Sample code snippet:

Lets imagine your image class is my-image

so you have to define the styling as below:

.my-image {
  display: none;
}
/* ag-grid adds ag-row-hover class on row hover */
.ag-row-hover .my-image {
  display: initial;
}

For your example, you should define these styles in your kaboob-menu.component.ts (My Custom Renderer)

Working plunker