In my current project, I am utilizing ag-grid to create a dynamic web-application that combines tools from various Excel files into one cohesive platform.
One of the Excel features I am currently working on involves displaying a description when hovering over a column header. This functionality can be seen in the image provided at the following link:
https://i.stack.imgur.com/Nj1Uz.png
I have explored the ag-grid documentation in search of a way to access individual HTML elements of ag-grid column headers so that I can bind each one to a listener.
Unfortunately, I have not yet found a suitable solution.
Below is an example of the component's HTML file. It is quite basic with an added on-mouseover listener for testing purposes.
<ag-grid-angular
style="width: 3000px ; height: 1000px;"
class="ag-theme-balham"
[rowData]="rowData"
[columnDefs]="columnDefs"
pagination
(cellValueChanged)="onCellValueChanged($event)"
(gridReady)="onGridReady($event)"
on-mouseover="over()"
>
Here is the relevant TypeScript code snippet:
columnDefs = [
{
headerName: 'Rattachement',
field: 'rattachement',
editable: true,
cellEditor: 'agSelectCellEditor',
cellEditorParams: {
values: ['Audit', 'RA', 'Consulting', 'FA', 'Tax&Legal', 'ICS', 'Taj'],
},
Currently, the "mouseover" event triggers the over() method whenever the mouse moves above the grid.
However, my goal is to execute the over() method only when hovering over a SPECIFIC column header based on its ID.
I hope this explanation is clear.
Any assistance would be greatly appreciated.