如何通过单击 ag-grid 中的按钮来更改行样式/类？

Question

Is there any way to make row change background by clicking on button? I have the following code:

 rowClassRules: { "a-grade": params => params.api.getValue("Grade", params.node) == 'A', "b-grade": params => params.api.getValue("Grade", params.node) == 'B', "c-grade": params => params.api.getValue("Grade", params.node) == 'C', },

It changes row color based on value in the column Grade. But I want to do the same only after pressing a button, and also other button should turn it off (like Turn On/Off highlighting). I have no idea how to turn this code into a function which I can use in the button's onclick.

Answer 1

if you want to have actions like mouse-click in ag-grid you should use a component renderer:

https://www.ag-grid.com/javascript-data-grid/component-cell-renderer/

There you can set a hidden property like 'isHighlighting' in row data using params.api with any proper method like: setData(), applyTransaction(), or applyTransactionAsync().

Also, consider using a simpler way to write your rowClassRules:

https://ag-grid.com/angular-data-grid/row-styles/#row-class-rules

The final code should be something like this:

 rowClassRules: { 'a-grade': function(params) { return params.data.isHighlighting && params.data.Grade === 'A'; }, 'b-grade': function(params) { return params.data.isHighlighting && params.data.Grade === 'B'; }, 'c-grade': function(params) { return params.data.isHighlighting && params.data.Grade === 'C'; } };

If the button is not inside the grid you can use this code:

 isHighlighting = false; onClick() { isHighlighting =;isHighlighting. gridApi;redrawRows() }

and

'a-grade': function(params) { return isHighlighting && params.data.Grade === 'A'; }