How to capture the row hover event in ag-grid? - 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 the 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 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.
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

Answer 2

I would listen to cellMouseOver event emitted by the grid.
In your html: (cellMouseOver)="onCellMouseOver($event)"
In your component:
onCellMouseOver(params) {
console.log(params.rowIndex); // 0
}
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