[Data Grid Reactive] AddColumnCssClass API does not work
Question
Forge component by OutSystems R&D

Hi,

I used the "AddColumnCssClass" API, but it does not work as expected.

The style is applied or not applied to each row.



AddColumnCssClassNotWork.png

Hello Shohei Nakata,

Can you please check if the following code helps you to solve your problem?


.wj-cell.wj-alt.editable-cell,

.wj-cell.editable-cell,

.wj-cell.wj-state-active.editable-cell,

.wj-cell.wj-state-multi-selected.editable-cell{

    background: red;

}


Best regards,

Tiago Pereira

Hello Shokei,


Could you show us the class you're trying to add? 

I think I know what's going on. Can you follow the information on the conditional format sample page and see if it works?


Thank you,

Gabriel Lundgren

Hi,

The background-color setting for the even numbered columns does not seem to be working.

The borders, etc. seem to be applied. Why is that? 

I am going to set the CSS for this Grid without using any conditions.


thank you

cssclass.png

mvp_badge
MVP

Hi @Shohei Nakata,

The documentation is not explicit enough. For your class to be applied to the cell, you're required to add the class .wj-cell to your css class definition.

.wj-cell.wj-alt.editable-cell,
.wj-cell.editable-cell {
    /*your css attributes*/
}

This is the only way to be sure for your css to be applied.

Let me know if this helps you.

Cheers,
RG

Thank you for your help. 

It worked correctly.


However, I encountered one problem.

The background of the odd-numbered lines will change to white when you single-click on them.


The background of even-numbered lines will not change.


Regards,

Nakata

Hello Shohei Nakata,

Can you please check if the following code helps you to solve your problem?


.wj-cell.wj-alt.editable-cell,

.wj-cell.editable-cell,

.wj-cell.wj-state-active.editable-cell,

.wj-cell.wj-state-multi-selected.editable-cell{

    background: red;

}


Best regards,

Tiago Pereira

Hello Tiago,


Thanks for your advice.


It's almost perfect.

There is only one problem left.


When multiple selections are made, the color of the previously selected background changes.

This image is the result of Alt+click on 2, 3, 4, and 5.

The background of 2, 3, and 4 will change.

Is there any way to avoid this?



Best regards,

Nakata

Hello Shohei Nakata,

I couldn't reproduce the problem you mentioned. There seems to be an issue with CSS specificity regarding the classes that you might be using. 

Can you send me a sample, please?

Best regards,

Tiago Pereira

Hi Tiago,

I had made a mistake in setting the CSS class name.

I tried copying and pasting and got the correct result.


This solved the problem completely.

Thanks for your help.


Best regards,

Nakata

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