How to modify CSS for datagrid columns conditionally?
Application Type
Reactive

Hi ,

I have used DataGrid Reactive component for reporting in my application, I want to conditionally change the cell color based on the value. Please refer to the attached image- for the cell which says green I want to highlight the particular cell with green. please suggest how to change CSS conditionally for data grid.

Hi Malvika, 

Try editing the css of the elements inside with pedefined classes with defined colors

To refer the elements to redefine CSS use inspector, here it is for Selected Element

need to apply conditional css on cells based on cell value. eg: if cell value is green apply bkg color Green, else check for other color.


upload a sample oml so that I can make changes and reupload it for you to understand how it can be done.

Hi Malvika,

I don't think you can do that from within Service Studio, but will have to write some javascript.

See this.

I didn't look into it, but I think for reactive apps you can look at React example, for traditional app at Javascript example.

Dorine

Hello Malvika,

Please find it below here is an easy way to apply conditional CSS on cells.  Community staff
Daniel Martins has been explained in simple way please refer it and resolved your issue. Also he has given sample OML there in solution. You can take reference of that OML to resolve your query.

https://www.outsystems.com/forums/discussion/63882/howto-conditional-highlight-rows-based-input-value/

I hope it helps you.

Kind Regards,

Ajit kurane.

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