CSS in spreadsheet grid

 
1
0
-1

Hi, I have a task which I need to change the color of data input in spreadsheet grid based on certain condition.

For example:

I have 4 columns, Weight 1, Weight 2, Average of Weight, Result.

The Results are either Accepted / Rejected and it depends on the average of weight.

Then I have conditions which:

If (Average < 60){

Result == 'Accepted}

else{

Result == 'Rejected'}

If it Accepted, the color should change to green, and if it rejected, the color change to red. 

 

    CommentAdd your comment...

    1 answer

    1.  
      2
      1
      0

      Hi there,

      In your spreadsheet format type, choose "CUSTOM"

      Then use this code

      {{renderer:function(instance, td, row, col, prop, value, cellProperties){console.log(value);if(parseInt(value)<60){td.innerHTML="<span style='color: white; background-color: green;'>"+value+"</span>";}else{td.innerHTML="<span style='color: white; background-color: red;'>"+value+"</span>";}}}}

      Feel free to change the coding above to suit your specific needs. I think you should put this code in the "Result" column.

      The code above will change the background color to green when value is less than 60, otherwise, it will be red.

      Cheers.

       

      1. nurul afiqah

        thank you for the solution, but instead of coloured text can i make coloured column?

      CommentAdd your comment...