[Data Grid] Conditional format one cell based on another cell in the same row

Forge Component
(38)
Published on 3 Aug (7 days ago) by OutSystems R&D
38 votes
Published on 3 Aug (7 days ago) by OutSystems R&D

Let's say I have two columns of numeric data, LastPeriod and ThisPeriod, with these values:

Row 1 - LastPeriod = 10, ThisPeriod = 11

Row 2 - LastPeriod = 10, ThisPeriod = 10

Row 3 - LastPeriod = 10, ThisPeriod = 9


I want to be able to do one of two things:

1) Compare the row's cell values of ThisPeriod to LastPeriod and conditionally format ThisPeriod to be Green if higher (Row 1), Yellow if equal (Row 2), and Red if lower (Row 3).

2) Return a third column that will render an icon of a green up arrow, yellow equals sign, or red down arrow accordingly.

 I have looked at the DataGridSample and tried to make the JS work, but have not been successful.

Hi Coy,

I hope that you're doing well.

1) Compare the row's cell values of ThisPeriod to LastPeriod

You need to create a JavaScript function and add it into the input parameter OSCellRenderer of the column.
When you add a function to this parameter, it should have the following signature:

function yourFunction(panel, row, column, cell)

And with these parameters, you can do the the comparisson you need. In the sample you can take a look to the function SampleGridFunctions.colorRenderer.

2) Return a third column that will render an icon

For this one, I need to think a little bit more. :/

Let me know if this helps you out.

Cheers,

RG