[Data Grid Reactive] [Data Grid Reactive] Conditional format cell on loading
data-grid-reactive
Forge component by OutSystems R&D
Application Type
Reactive
Service Studio Version
11.11.8 (Build 45664)

Hi,

I have a question regarding Data Grid Reactive.
So - I need to conditionally format cells depending on their values (highlighting empty cells to be specific).
What is also specific - scenario of when it should happen. What I need is to have those cells highlighted right after loading the data to the grid, so the user sees it right away.

It's important and I saw some solutions that were checking cells' values but only after user edited them and unfortunately this won't do in my case.

Big thanks in advance for any help!

Solution

Hello @WK,

We could define Conditional Formatting for text columns but it will take a while. 

If your use is to have the columns that are empty to be highlighted you can do the following:

  1. On Page ready, use the client action AddColumnCssClass and set a class name, for example, mark-empty
  2. In the page CSS, add:
.wj-cell.mark-empty:empty {
    background: lightpink;
}

The result will be:

Please keep in mind that this hasn't been tested for all possible use cases or that it cover all of your requirements, so we cannot assure that it will work for all use cases.

Please let us know if this helps.

Bruno Martinho

Hello WK,

The Data Grid currently supports conditional format, you can check the documentation in this page.

This works for Number, Currency, Date and DateTime columns.

Can this help your use case?

Thanks,

Bruno Martinho

Hi Bruno,

Thanks for your answer - yes, I checked those. Few issues though:
- unfortunately fields I have to check are of Text Type,
- looks like I don't have these options available not only for Currency but also for Number columns (version 2.1.1 is the one I have available).

I was thinking about somehow forcing it with JS but not sure how to do it.
As a last resort was even thinking about somehow triggering 'OnCellChange' event for all rows but this would be poor workaround as this table contains over 40k lines.


Solution

Hello @WK,

We could define Conditional Formatting for text columns but it will take a while. 

If your use is to have the columns that are empty to be highlighted you can do the following:

  1. On Page ready, use the client action AddColumnCssClass and set a class name, for example, mark-empty
  2. In the page CSS, add:
.wj-cell.mark-empty:empty {
    background: lightpink;
}

The result will be:

Please keep in mind that this hasn't been tested for all possible use cases or that it cover all of your requirements, so we cannot assure that it will work for all use cases.

Please let us know if this helps.

Bruno Martinho

Hi,

This works great! Bummer is it seems this action is not available in DataGrid 2.1.1 version (the one I have available for me).
But I tested this solution in my personal environment where I have latest version (2.3.1 I think) and it works exactly as I needed.

Big thanks for your help!

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