Change color of selected row(s) in a data grid.

0
Hi, I need to change the color of the selected row(s) in a data grid because it is not clear enough for the users of my app. Is there an easy way to do this? I found a previous question on the forum (https://community.mendix.com/link/questions/94634) but I had no success in implementing this.  Maybe because of the new atlas or maybe because of the lack of knowledge of CSS.  I use Studio Pro 8.1.0.  thank you. 
asked
3 answers
2

Lukas’ version is fine, but since you hickupped somewhere, let’s do the simpler version:

In Studio Pro go to Project->Show project directory in explorer.

Go down to /theme/styles/web/sass/app.

Open your favorite texteditor (here visualbasiccode, notepad will do fine as well)

Since copy paste is easier, here is the code once more:

.mx-grid tr.selected{
    background-color: "#FFFFFF" ; // set it to the color of your choice
    border: 5px solid #EFF23A;
}

This will get you a yellow line around the selected row.

Now follow this manual which involves installing Visualstudio code, Node.js, npm and gulp (not realy lowcode): https://docs.mendix.com/howto/front-end/set-up-sass. Especially pay no attention to the first line of the manual claiming that it is “easy”. It is a frustrating process of installing one tiny tool after another tiny tool and a third tiny tool and then hoping ‘gulp dev’ will run. Probably it won’t.

If you followed Lucas’ tips you are likely to have gulp installed on your system. Check by opening the commandline in the <projectdir>/theme/styles/web/ and type “gulp”. If it responds in a second or two, you’re good to go.  If not type npm install gulp” 

Still in comandline in /theme/styles/web type

gulp --watch sass:css

 

answered
7

Hi Jacob,

Gulp is the weapon of choice for styling. There is a good documentation for the setup and usage https://docs.mendix.com/howto7/front-end/style-with-gulp-and-sass in case you did not set it up yet.

Depending on which component to style you are looking for, the structure can be found in eg. [APP]\theme\styles\sass\lib\components file _datagrids.scss . All basic components have such a base styling defined somewhere. But this is not where you would like to edit the styling. Instead, duplicate that file and copy it to \theme\styles\sass\custom . Here you can apply changes in the styling, search for “selected” in the copy of _datagrid.scss  you out in your custom folder.

to apply the change, you just have to add the impot to the other file that is also in the custom folder (custom.scss) like this:

@import "_datagrids";

Best would be to remove all the redundant / not required lines beside the ones you changed as they are still applied by the original file. Make sure to keep the structure itself, eg. for the example used:

 

.mx-datagrid-body-table {
        border-width: 0;
        /* Table Body */
        .mx-datagrid-body tr {
            &.selected td,
            &.selected:hover td {
                color: [yourstyling];
                background-color: [yourstyling] !important;
            }
        }
}

 

Best

answered
4

Where did you add your changes? They should be in some .scss file. Did you compile it using gulp or koala?

answered