Set Color on Column of Interactive Grid based on Condition

Set Color on Column of Interactive Grid based on Condition 

1) Go to IG property --> Appearance --> CSS Classes : SetColor  (Define  Name of Class)

2) Go to IG -- Select any column of report --> (i am  selecting Status column) Status -- Proeprty -->Appearance --> CSS Classes : status  (Define Name of class)

3) Go to Function and Global Variable Declaration

  function SetColor() {

                          // for each cell in marked column

      $('.SetColor td.status').each(function() {

         

         // get cell text

          cellData = $(this).text();

          // rules for coloring

          if (cellData == 'C')

              this.style.backgroundColor = 'limegreen';

              or

               $(this).addClass('u-danger');

               or

              $(this).css("color","limegreen");  

          else if (cellData == 'A')

              this.style.backgroundColor = 'gold';

              or

              $(this).addClass('u-danger');

              or

              $(this).css("color","gold");  

          else if (cellData == 'N')

              this.style.backgroundColor = 'orange';

              or

              $(this).css("color","orange");  

          else if (cellData == 'X')

              this.style.backgroundColor = 'tomato';

              or

              $(this).css("color","tomato");  

         

      })

  };

4) Execute when Page Loads

  SetColor();

5) Set Dynamic Action of Interactive GRID