Data grid styling - columns

Hello,   How can I apply styling to all columns for data grids across my app?   I need to apply borders to all my data grid columns using: border: 1px solid #ddd;   Is there a class I can use in the custom-variables file?   I have tried things such as the class: .mx-datagrid{ }   This doesn’t seem to work however.   Any pointers will be really helpful thank you.
2 answers

Hi Alex,

You can find the class yourself by inspecting the data grid and selecting a column and checking the class.


There are two ways you can Override the style :


Way 1. Create a custom class and target the Mendix class and add  ! important at the end ( Add your custom class in the custom sass file.


Way 2. copy the class name and add your border style to the class and add !important.( Add the class in your custom sass file )


Never Change or override in Mendix Default style sheets. Instead, create your own style sheet and override there, and do not forget to import your new style sheet in main.scss


The above 2 steps have a single difference,

Step 1 will work only if you add your custom class to the data grid. 

Step 2 will override all the Data grids in your project.



Update :  If you just want Border you can use the default class by clicking Grid properties → Appearance ->DesignProperties->style->Bordered  ( As mentioned by Wojciech Machniak)


I you want to add more Styles you should follow the method i have mentioned above.


Hi, you can use the built-in CSS class .datagrid-bordered or choose the style bordered from Style in the Design properties panel.


A more advanced option is to overwrite global styles for all data grids using your own custom class.