181
Views
6
Comments
Solved
[OutSystems Data Grid] Apply Row background color based on cell value
outsystems-data-grid
Reactive icon
Forge asset by OutSystems
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

2022-11-12 11-28-30
Gonçalo Martins
Staff
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
2023-10-21 19-42-11
Tousif Khan
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

2023-03-08 10-32-19
Vinod Kumar R

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

Regards,

Vinod

2022-11-12 11-28-30
Gonçalo Martins
Staff

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

2023-03-08 10-32-19
Vinod Kumar R

Hi, @Gonçalo Martins,

Sharing the OML for reference.

I tried the JS but result are not in expected output

Regards,

Vinod

SetRowBackground.oml
2022-11-12 11-28-30
Gonçalo Martins
Staff
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
2023-03-08 10-32-19
Vinod Kumar R

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.