Modify an ag-grid row after rendering

3
votes

I need to slightly modify a ag-grid row after it has been rendered. In ag-grid, the actual HTML elements are not necessarily persistent, so manually-set styles may fall off.

For one thing, I have to modify the selection checkbox to set its tabindex to -1. This can technically be done in the cellRenderer callback, although it looks quite hacky. (The checkbox can be found at params.eGridCell.children[0].children[0].wrappedElement.)

But I also have to add a CSS class to some rows to highlight them based on external criteria. I haven't found a way to do this at all.

The best solution would seem to be using some sort of after-rendering callback, but to my knowledge no such thing exists.

I found a couple of related questions, but they were both resolved via cellStyle, which would not suffice here:

1
ag-grid
Did you look here ? ag-grid.com/angular-grid-cell-styling/index.php you can use cellClassRules to adapt your class style to your needs. Use the eGridCell parameter has nothing off hacky, it was added in purpose you need it so i don't see any problem of doing it. - Walfrat
cellClassRules, understandably, puts classes on cells. - Thom Smith

1 Answers

4
votes

You have not 1 but 3 options:

getRowClass(params):

Callback version of property 'rowClass'. Function should return a string or an array of strings.

getRowStyle(params):

Callback version of property 'rowStyle'. Function should return an object of CSS values.

processRowPostCreate(params):

Allows you to process rows after they are created. So do final adding of custom attributes etc.

In this last one you have the row in params.eRow.

All taken from https://www.ag-grid.com/javascript-grid-callbacks/index.php