Dynamic cell style on an editable table

Hi,

I'm trying to use a editable table where the user will evaluate a supplier. There are 4 classifications available, and I want the cell background color to change with the classification.

That works well when I choose the first time



If I try to correct the classification, the color stays de same

Why does it work very well on the first update of the cell, and doesn't work on the second?


Code from the Extended Properties

If(EvaluationTable2.List.Current.Evaluation.ClassificationId = IntegerToIdentifier(1), "background-color: #ffd900",
If(EvaluationTable2.List.Current.Evaluation.ClassificationId = IntegerToIdentifier(2), "background-color: #0417ef",
If(EvaluationTable2.List.Current.Evaluation.ClassificationId = IntegerToIdentifier(3), "background-color: #f20424",
If(EvaluationTable2.List.Current.Evaluation.ClassificationId = IntegerToIdentifier(4), "background-color: #3cb372",
If(EvaluationTable2.List.Current.Evaluation.ClassificationId = IntegerToIdentifier(5), "background-color: #fff", "")))))

Thank you


Hugo

Hi Hugo,

Try refreshing the EditableTable via Ajax Refresh in your respective action.

I am sure that will fix.

- Assif

Hi Assif,

Thank you for the reply

I tried that. But that refresh the data aswell. And at that point I haven't save the evaluation.

Hugo

Css gets load wuth the preparation & now after render you want to change style..that to without using ajax refresh coz that will reset the table again..

in this case try using the JS snipper:

Ex:

var myButtonClasses = document.getElementById("btn1").classList;
 
    myButtonClasses.remove("blue");
    myButtonClasses.add("blue");
 


You can apply the idea by passing cell id to the RunJS action n this will remove or add classes.

You can create css class for each color.