Ag-Grid tooltip not providing correct rowIndex and does not have rowdata

user_3203695 0
Viewed 128

On AG Grid version 22.1.1 I need to display a tooltip if the users are experiencing an error. In the application there is a custom component that references a tooltip as shown below.

gridOptions: {
  frameworkComponents: { customToolTip: CustomToolTip}
}

Initially I used api.getDisplayedRowAtIndex(this.props.rowIndex).data but the rowIndex was not correct after filtering the grid. As in https://github.com/ag-grid/ag-grid/issues/4007

What can be done to show a tooltip that displays calculated error messages using other fields on the hovered field.

I tried using the rowid from each of the data but I am unable to to see the row id in the prop of the custom tooltip even after implementing getRowNodeId on gridOptions.

I also tried using cell renderer to create a div with the the attribute title. In the title I’ve added the logic to display the correct error messages. This showed the browser tooltip but didn’t always show in the grid.

ag-grid-react ag-grid
1 Answers

Found out 2 ways to display a tooltip using cellRenderer or create a placeholder column on the data in the grid.

  1. CellRenderer With the cellrenderer I can have a method that details the message and call the method on a span with the title parameter.

  2. Data Update the data object by adding a placeholder object with the error message.

data[tooltipmessage] = 'error message'

Then set the tooltipField from coldef to use this placeholder object.

gridOptions: { tooltipField: tooltipmessage}
user_32036950
Related