[DataGrid Reactive Dynamic Columns] How to apply css to cell/s depending on other cell value in Dynamic Datagrid
Reactive icon
Forge component by Henrique Silva


My concern is the same in here and I tried to implement the solution but maybe because I also use the dynamic column forge that it's not working? No error or such thing. I want to be able to apply a CSS to only cells that has P value depending on days prior eta. I attached my sample oml here. Please some advice. Thank you.



First, thanks for using the Asset!

So, I did some investigation on this issue. I tried publishing your module and testing the API by my self, and after a few attempts, I was able to make it work! Just be aware that i changed your currentdate - ETA condition to > 2 days.

The fix I performed was to change the Java Script code on "GridOnInitialyze" with this one:

id = $parameters.GridWidgetId

OutSystems.GridAPI.GridManager.GetGridById(id).provider.updatingView.addHandler(function(grid) {

    grid.rows.forEach(function(x) {

        if (x.dataItem !== undefined && 

            x.dataItem.ETA !== undefined &&

            (new Date(x.dataItem.CurrentDate)) !== undefined &&

            (new Date(x.dataItem.CurrentDate)).getTime() - (new Date(x.dataItem.ETA)).getTime() > 2) {

                OutSystems.GridAPI.GridManager.GetGridById(id).features.cellStyle.addClass($parameters.Binding, x.index, 'background-red', false);







Thank you it works! But I have other question. Will I be able to use a dynamic parameter for dataitem condition like this x.dataItem.$parameter.taskname == 'C' please note that the parameter can have spaces and special chars. Thank you.

Yes, you are able to access object attributes using a different syntax. To access "Consol No" for example, you can use: x.dataItem['Consol No'] to access the value on Consol No

So, you could have:

x.dataItem[$parameter.pname] == 'C' to dynamically change your attributes

I hope this answer your questions :)


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