[Data Grid Reactive] [Data Grid Reactive] Can I change a cell's style depending on enable or disable
Question
Forge component by OutSystems R&D

Hi All,


I can't tell a enable cell from a disable cell on Data Grid Reactive.


How can I change a cell's style depending on enable or disable?

I want to turning style for certain cells in a row.

Hello @Shohei Nakata,

Regarding the question about the client variables, unfortunately, the conditional format doesn't support such configurations. We are planning to create an API to allow removing rules from the conditional format in runtime, as well as adding rules which will be following the correct structure that we are already using. This way, there will be a way of removing rules depending on service studio variables (edit mode, for instance). That might end up helping you to achieve what you need.


Best regards,

Tiago Pereira

Thank you.

I understood that.

Regards,


Hello @Shohei Nakata,

Thanks for bringing this subject to the discussion.

Could you please provide us a sample or an image illustrating the current behavior?


Also, have you tried using the new API method - AddCellCssClass

Check out the documentation about the Data Grid APIs here.

Can you confirm if that method helps you to achieve what you need?

Best regards,

Tiago Pereira  

Hi Tiago,

Thanks for the reply. 

I provide a image.(asis and todo)


I don't think AddCellCssClass   is available.

Because it dynamically changes whether it is editable or not.

Sample.png

Hello @Shohei Nakata,

Thank you for providing the image. 

If I'm right you want to use the conditional format feature - more info. By using that feature and the AddColumnCssClass API method - more info, you will be able to change the style of specific cells by matching the CSS class of specific columns with the CSS class of specific conditions that affect the styling of the rows.

By changing the value of the Price Column you will trigger the addition of the CSS class "more-100" to the row where the changes occurred. The column Product Name already had the class "product-name" applied. Finally, the outcome changes according to the CSS that was configured on the page as you can see from the image below.

Make sure to check the file (.oml) attached to this reply.

1) Create an action - OnReady to the sample and drag and drop the API method AddColumnCssClass and add the class name for the column (in this case, we want to have the class product-name on the column Product Name)

2) Create an action - OnInitialize to the sample and create the condition that you want to use on your conditional format using OS logic and the structures NumberConditionalFormatRule and NumberFormatCondition.


3) After the previous steps, make sure to associate the created conditional format to the column that you want (in this case the Price column)


Hope this answer is useful.

Best regards,

Tiago Pereira

ConditionalFormat.oml

Thank you very much. I will give it a try.


I have an additional question.

Can I use multiple conditions or combine client variables?

For example, changing the CSS if the client variable "Edit Mode" is True and Price is 100 or more.

In my project, I need to use client variables for conditions.

I got a problem.

AddColumnCssClass API method does not work.

https://www.outsystems.com/forums/discussion/71732/data-grid-reactive-addcolumncssclass-api-does-not-work/

mvp_badge
MVP

Hi @Shohei Nakata,

Please check the answer given in the post that you've created.

Let us know if you're able to manage.

Cheers,
RG

Thank you.

I'll check it out.

Regards,



Hello @Shohei Nakata,

Regarding the question about the client variables, unfortunately, the conditional format doesn't support such configurations. We are planning to create an API to allow removing rules from the conditional format in runtime, as well as adding rules which will be following the correct structure that we are already using. This way, there will be a way of removing rules depending on service studio variables (edit mode, for instance). That might end up helping you to achieve what you need.


Best regards,

Tiago Pereira

Thank you.

I understood that.

Regards,


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