How to conditionally format columns in an interactive grid using data from another column?

Zoie

Hello

I have an interactive grid with many columns of data, I want to make certain columns show a red/green background depending on the data to show whether or not the data is 'good' or 'bad'. I am using an interactive grid, but the main issue is I need to compare the celldata with another column's data.

For example, let's say I have a column called 'apples' and another column that is hidden called 'apple_target'. This determines the prices of apples for various stores and the average or target price. If apples is greater than(>) apple_target then the background to that cell would be red and so on.

I have been attempting this through the javascript under the function and global variable declaration by creating functions to color the backgrounds and calling them when the page loads with a dynamic action. My main problem stems from not being able to access the main target value. Here is an example of what I want to do:

function highlight_ig_apple_cells() {

  $(".all td.apple_column_color").each(function(){ 

    cellData = $(this).text();

    if (cellData <= $v('APPLETARGET') && cellData > 0) { 

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

    }

    else if(cellData > $v('APPLETARGET')) {

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

    }

     else {

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

    }

  });

};

The 'apple_target' column is not being accessed. How do I access this column to compare it with the apples column? Also, the columns are all within my sql query.

user7911366

I imagine that if you are using a query as a data source for the region, create in the query two columns named BCOLOR and FCOLOR with the corresponding colors that must be applied depending on the result of the calculation. You may be able to do this by using the DECODE, GREATEST, and LEAST functions to set the colors of these columns, or even a function created in the database for this.

Then in Column Formatting / HTML Expression of the desired column put:

<span style="color:#FCOLOR#;background-color:#BCOLOR#;">#YOUR_COLUMN_HERE#</td> 

I hope it helps.