[OutSystems Data Grid] How to change color of one cell depending on other cell value in Data Grid [React]
data-grid-reactive
Reactive icon
Forge component by Platform Maintenance

Hello,

How can we change the color of one cell depending on value of other cell. 

I already achieved of changing the cell color depending on its current value using TextConditionalFormat.

Now I want to achieve something like below image:  If the value of Test 2 column is Yes then need to change the color of cell value of Test 1 column

image 


Thanks 

Prajakta 


Solution

Hi @Prajakta Roshankhede 

To achieve that you can follow the same approach mentioned here.
Something like this (adapted to your use case) in the initialize event from the Data Grid:

GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider.updatingView.addHandler(function(grid) {
    grid.rows.forEach(function(x) {
        if (x.dataItem.Player !== undefined && 
            x.dataItem.Player.OriginalDate !== undefined &&
            x.dataItem.Player.CurrentDate !== undefined &&
            x.dataItem.Player.OriginalDate.getTime() !== x.dataItem.Player.CurrentDate.getTime()) {
            GridAPI.GridManager.GetGridById($parameters.GridWidgetId).features.cellStyle.addClass( $parameters.Binding, x.index, 'YOUR CSS CLASS', false);
        }
    });
});

GridAPI.GridManager.GetGridById($parameters.GridWidgetId).provider.refresh();

Hope it helps.

Cheers,
GM

Thanks GM, provided solution worked for me!!

Hi @Prajakta Roshankhede ,

I wanted to do similar thing you can check it here 

So can you provide some sample .oml 

thanks....

Hi Prajakta, 

Check this - https://www.outsystems.com/forums/discussion/75709/find-the-duplicate-element-in-the-column-of-table-using-if-condition/

also attaching oml below.

this might help you.

HighLightDuplicate_v33 (1).oml

Hello Shriyash,

I want to apply CSS on DataGrid and not on simple OutSystems table.

Thanks for the efforts. 


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.