Style conditions AG Grid

Dash Python
1

I have an AG grid in my dash app. I want to set the background color of a cell based on a certain condition. It works just fine on initial page load. However, when the data changes in the background and I refresh the page, the styling is not applied even though I see that the data has changed. Example:

columnDefs = [ {'field': 'production_order', 'headerName': 'Production Order', 'headerCheckboxSelection': True, }, {'field': 'reason', 'headerName': 'Missing Data', 'width': 390, 'suppressSizeToFit': True, }, {'field': 'checked', 'headerName': 'Checked?', 'width': 110, 'suppressSizeToFit': True, 'cellStyle': { 'styleConditions': [ { 'condition': "params.data.checked == 'Yes'", 'style': {'backgroundColor': '#90EE90'}, } ] }}, ]

When the checked value changes in the background this is reflected on the page, but the cell is not colored. Also, if the cell was colored green on page load but the checked value is changed to No, the cell remains colored. It seems that the styling is only applied for the original data and not regenerated on page refresh, even though I do regenerate the entire grid. How can I fix this?

2

Hello @rob_cl,

This is due to how your conditions are written, if you are applying them to the same column you are referencing, then you need to be using params.value.

If you are not referencing the same column, then you should be using cellClassRules instead, the grid saves effort by only rerendering the components that actually get touched when you are editing or updating from a callback.

The cellClassRules is an exception to this, if I remember correctly.

Also, could you please provide a full example if you need more help.

3

Thank you @jinnyzor, indeed the cellClassRules are applied every time the data is refreshed. This is also clearly stated in the docs here so my bad :upside_down_face:.

1 Like