How to customize a Data Grid Boolean column to show a checkmark/hide “No” or highlight “No” in red?

0
  Hi,In my Mendix Data Grid I have a Boolean column that displays “Yes” and “No”. Is there a way to: Replace “Yes” with a checkmark and hide “No”? Or keep “Yes/No” but change the background of “No” cells to red? Thanks for any guidance!
asked
1 answers
1

Hi Jeff

 

If you are using DataGrid 1, you can do it by giving a css class to the specific column, e.g. isactive-column and you can write css like this. Example: 

 

.isactive-column {
    &[title=No] {
        &::before {
            content: "\f111";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            width: 15px;
            height:15px;
            font-size: 15px;
            margin-bottom: 4px;
            color: $gray-dark;
        }
        div {
            display: none;
        }
    }

    &[title=Yes] {
        &::before {
            content: "\f111";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            width: 15px;
            height:15px;
            font-size: 15px;
            margin-bottom: 4px;
            color: $green;
        }
        div {
            display: none;
        }
    }
}

 

This will give Green color for "Yes" and Grey color for "No", you can easily change it to color of your liking.

It will look like this:

 

image.png

 

 

 

 

The second way, which is the easier way I would say.

Use Datgrid2 and use that boolean attribute to set custom visibility, like the picture below:

 

image.png

 

Use icons of your liking and set visibility by attributue, if it is TRUE, show checkmark, if it is FALSE, show x

 

Hope this helps

answered