Question

How to change the background color using the Dynamic row class

1

About Dynamic row class that can be set in DataGrid2 Here's what we want to achieve. If the checkbox is yes, the background color of the row will be changed to blue. If the checkbox is no, the background color of the row will remain unchanged. I'm using the Dynamic row class, but it doesn't work as expected. If you have any knowledge, please help me. Execution Result ↓ Text thickness changes, but background color does not change. css settings ↓ Dynamic row class settings ↓

asked 2021-12-16

Ryoya Watanabe

6 answers

Ryoya Watanabe · Answer 1 · 2022-03-03

Hi Mark

I have solved the problem in the following way.

1. edit the file

"\Documents\Mendix\hoge\themesource\datawidgets\web\datagrid.scss"

Create a class as shown in the image and reference the parent class.

2. Editing Dynamic Row Class Properties

3. Execution Result

Forgotten User EHRVVWg25O · Answer 2 · 2021-12-16

You can try something like this.

.datagrid2{

    &:hover,&:focus,&:active{
        background-color: lightblue;
	    font-weight: bold;
    }
}

Mohammed Siddiqui · Answer 3 · 2022-03-02

Hi Ryoya,

I had similar requirement recently and ended up in same situation as you. Adding ‘dynamic row class’ to change the background will not work due to ‘display:contents’ style. If you add your logic to ‘dynamic cell class’ instead then it will work (you will need to add it to all the columns) but this worked for me. This is a quick way I found to get around this as I did not had much time to look into this.

Note: If you enabled hiding for columns feature than you will find the last column cell not having the required background, to fix this I added below custom styles.

.column-selector {
  background-color: $brand-success;
}

Hope this helps!

Lenny Puente · Answer 4 · 2021-12-16

If the text thickness changes the class is applied and should work. The only thing I could think of right now why the background doesn’t change is because it was set before in a styling sheet more important than yours.

Have you tried using “!important” for the background? (background-color: lightblue !important;) Maybe this works

Marc Scheil · Answer 5 · 2022-03-02

hi i have the same problem. have you been able to find a solution in the meantime?

Wenkang Cheng · Answer 6 · 2024-09-18

The CSS display property causes the element itself not to generate any bounding box, and therefore it will not render its background, border, or padding. This means that when an element is styled with the display property, it will not have its own background color or other background styles; instead, it relies on its child elements to display the background.

So you can style the child elements to change the row color. etc: