You need not add an extra .scss-file as long as you can do this with existing variables in theme\custom-variables.scss. And there is one for you requirement: ‘grid-bg-striped’. So all you need to do is open theme\custom-variables.scss and change the value of “$grid-bg-striped;”

Change this:

to this:

Mind you, this is modifying all DG2’s in your app.

Mind you 2: using a mix of one of the base-colors, white and  a percentage is far better maintainable, so I would advice to change it like that.

Mind you 3: upon re-importing the theme or Atlas_Core, custom-variables.scss usualy does not get overwritten.

Hello Mr. Fleming,

I’m going to help you achieving the desired look.

You’ll need to utilize the Custom Styling feature.

You should also understand that DataGrid2’s look is constructed by html table tags.

Now to make changes to a table styling, it is advisable to create a new SCSS file (Don’t worry I’ll show you
how)

• Open Notepad > click File and > click Save As…
• Change the Save as type to “All files”
• Name it whatever you like (I named it “my-table-variables.scss”) and don’t forget the “.scss” part

The newly created file should be saved in your <app directory>/theme/web/ (You can get to the directory by clicking

App > Show App Directory in Explorer)

Now in Mendix Studio Pro:

• Go to App > Styling > Web > main.scss and add the following line:

@import “my-table-variables”;

• Go to App > Styling > Web > <your file>.scss and add the following lines:

.customTD .table .td
{
background-color: #D9E3F3;
}

.customStripe .table-striped .tr:nth-child(odd) > .td
{
    background-color:  mix(#D9E3F3, #fff, 50%);
}

*customTD and customStripe are custom classes, you can name them whatever you like

• Put your DataGrid2 in a Container and edit the properties of that Container
• Go to Appearance tab > Common section > Class field
• Add the custom classes names separated by spaces (“customTD customStripe” in my case)

Ta-Da!

*Don’t forget to save and apply the changes