29
Views
6
Comments
Solved
[OutSystems Data Grid] Apply Row background color based on cell value
data-grid-reactive
Reactive icon
Forge component by Gonçalo Martins
Application Type
Reactive
Service Studio Version
11.54.24 (Build 62760)

Hi All,

How can we apply a background color to a row based on cell value. If Cell value contains "Yes" then it has to highlight entire row.

I referred to the fallowing link but couldn't get the result.

https://www.outsystems.com/forums/discussion/72629/outsystems-data-grid-set-row-background-depending-on-cell-value/

Regards,

Vinod

Solution

Hello @Vinod Kumar R 

Any particular reason why you're not using the conditional format instead?

Seems much easier to maintain and unlike custom code, it's supported by OutSystems.
In your high-code approach you have two issues:

  • you should be calling your Javascript on the Initialize event from the Grid block to make sure the lifecycle of the component is as correct as possible
  • if you have inspected the DOM as I mentioned before, you would find that the CSS class you're using (a utility class from OutSystems UI) doesn't have a specificity to override the classes that Wijmo Flexgrid adds out of the box (like mentioned here
    • create your specific class in the theme:
      .wj-cell.background-red-lighter {     
           background-color: var(--color-red-lighter); 
      }

With these changes, it seems to work as expected:

Cheers,
GM

SetRowBackground_Fix.oml
Champion

Helo

You need to pass the row number and grid widget ID and basis on thaat you can add a css class to be appliead over there

Hope this helps
Thanks
Tousif Khan

Hello @Tousif Khan , I tried using the Addclass as well but it needs to look for each row and highlight it.

Regards,

Vinod

Hello @Vinod Kumar R 

Without sharing a sample oml it's much harder for the community to help and takes more time for everyone.
Also, have you inspected the DOM in order to understand if the CSS class you're using is specific enough for its purpose (like mentioned here)?

Cheers,
GM

Hi, @Gonçalo Martins,

Sharing the OML for reference.

I tried the JS but result are not in expected output

Regards,

Vinod

SetRowBackground.oml
Solution

Hello @Vinod Kumar R 

Any particular reason why you're not using the conditional format instead?

Seems much easier to maintain and unlike custom code, it's supported by OutSystems.
In your high-code approach you have two issues:

  • you should be calling your Javascript on the Initialize event from the Grid block to make sure the lifecycle of the component is as correct as possible
  • if you have inspected the DOM as I mentioned before, you would find that the CSS class you're using (a utility class from OutSystems UI) doesn't have a specificity to override the classes that Wijmo Flexgrid adds out of the box (like mentioned here
    • create your specific class in the theme:
      .wj-cell.background-red-lighter {     
           background-color: var(--color-red-lighter); 
      }

With these changes, it seems to work as expected:

Cheers,
GM

SetRowBackground_Fix.oml

Thanks @Gonçalo Martins ,


 It is working as expect.

Any particular reason why you're not using the conditional format instead?  - Actully usecase is to apply the css on the ActionColumn

Regards,

Vinod

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