Highlight edited cell based on the type of entered data

Dash Python
1

Hello Plotly community,
I have an ag grid table where the user enters data in the column ‘Value’. The idea is to implement controls related to the type of entered data, for example highlight the cells where data does not meet the expected type. I have an extra column that specifies the expected type per row. Please see screenshot for the desired outcome.
plotly_forum
I tried to use the conditional styling with cellstyle as follows, but it didn’t work:
cellstyle = {“styleConditions”: [
{
“condition”: “params.value != null && type(params.value) != params.data.type_cleaned”,
“style”: { “backgroundColor” : “red”}
}
}
I am novice both in dash and javascript. Any help would be much appreciated. Thank you.

2

Hello @enas,

Welcome to the community!

Did you know that cellDataTypes will automatically force people to enter text or numbers or date depending on what you put. If you do that, then by default they can’t enter anything else.

If you want it to be even further customized, you can enter your own valueParser to validate the user input, if it doesn’t pass you can return false and the value will revert to the original value.

If you want to color a bad input, I would use cellClassRules to do so.

The cellClassRules will automatically update and not just append styling or classes. If you have a bunch of different variables that affect the specific column, you can set up a function in the dagfuncs namespace.

All of these should be found in the documents. :grin:

3

Thank you @jinnyzor for your response! Your suggestion of using cellDataTypes is a viable solution, however I was struggling to make it work, especially that I have both modalities of text and number types in the type_cleaned variable (not visible in the screenshot). So the cellDataType should be defined differently based on the values of ‘type_cleaned’. I tried adding this to my columnDefs, probably I have some error at the javascript function level:
{‘field’: ‘Value’, ‘editable’: True, ‘cellDataType’: ‘function: params => params.data.type_cleaned’}.
Can you please point out what I am doing wrong?
Your help is much appreciated :blush:

4

@enas,

The cellDataType cannot be hooked up to a function.

What you can is create a function for the valueSetter and pass like this to the column:

“valueSetter”: {“function”:”customSetter(params)”}

The in a js file:

dagfuncs.customerSetter = (params) => {
     if (params.data.type_cleaned == “number”) {
        if (parseInt(params.newValue))
    }
    and so on
}

Here is the documentation to expand more: