How to Translating Data Grid 2, filters

Great!!!! 

Created 2025-07-12

RAJU PATEL

html[lang="nl-NL"] {

.widget-dropdown-filter[data-empty="true"]{

//Translate Select for default filter

span.widget-dropdown-filter-toggle{

visibility: hidden;

position: relative;

&:after {

visibility: visible;

position: absolute;

top: 0;

left: 0;

min-width: 175px;

content: "Selecteer";

}

}

}

//Translate None in dropdown

.variant-select.widget-dropdown-filter[data-empty="true"][data-expanded="true"] {

.widget-dropdown-filter-menu-item:first-child {

visibility: hidden;

position: relative;

&:after {

visibility: visible;

position: absolute;

min-width: 175px;

content: "Geen selectie";

}

}

}

}

 

html[lang="nl-NL"] {

.widget-dropdown-filter{

//Hide placeholder "Search"

.widget-dropdown-filter-input::placeholder {

visibility: hidden;

}

.widget-dropdown-filter-toggle{

overflow: unset;

}

}

}

 

For new dropdown filters

Created 2025-07-01

Coen Pijpers

Perfect, I can confirm this works, thank you!

Created 2025-07-11

Lukáš Tomek

To anyone seeing this message, please up-vote this idea from Vojtěch Marek

https://community.mendix.com/link/space/widgets/ideas/4808

 

This may help us to have fix from Mendix.

Created 2025-03-28

Patrick Lathion

Done!

Created 2025-07-11

Lukáš Tomek

After upgrade to Mendix 10.18 this stopped working, so I made a refactored version:

 

html[lang="sv-SE"] .filter-listitem {

.filter-label {

visibility: hidden; // Hide the original text without removing the space

&::before {

visibility: visible;

content: ""; // Default empty content

}

}

 

// Replace English text with Swedish

.between + .filter-label::before { content: "Mellan"; }

.contains + .filter-label::before { content: "Innehåller"; }

.startsWith + .filter-label::before { content: "Börjar med"; }

.endsWith + .filter-label::before { content: "Slutar med"; }

.greater + .filter-label::before { content: "Större än"; }

.greaterEqual + .filter-label::before { content: "Större eller lika med"; }

.equal + .filter-label::before { content: "Lika med"; }

.notEqual + .filter-label::before { content: "Inte lika med"; }

.smaller + .filter-label::before { content: "Mindre än"; }

.smallerEqual + .filter-label::before { content: "Mindre eller lika med"; }

.empty + .filter-label::before { content: "Tom"; }

.notEmpty + .filter-label::before { content: "Inte tom"; }

}

Created 2025-02-05

Niklas Häggström

Thanks, I hadn't noticed the new classes for the filter items yet. The width of the filter selector menu is now the width of the English label plus the width of the translation. Provided your translations have no entries longer than the longest English one, you could add position: absolute to the &:before part.

Created 2025-07-24

Martin Koelewijn

Amazing refactored version :)

Created 2025-07-23

Patrick Sebazungu

This works, thanks!

Created 2025-07-11

Lukáš Tomek

@Andries

 

Is there also a CSS hack to translate the DataGrid2 pagination?

 

It seems that the pagination text: 1 to 2 of 2 is hardcoded in the sources!!!

 

 

 

 

 

maybe it is possible to hack the class paging-status:

 

 

I know just a little of CSS... 

My attempt would be change the source code by itself to translate the text to the desired language, but this would be the most laborious solution.

 

I asked Mendix support about this, and it seems they are not considering a short-term solution...

So that we have to use these workarounds...

Created 2024-02-08

Vinicius Strugata Ambrosio

Thank you!! This will help me a lot!

 

Created 2024-02-01

Leandro Dias

Thanks all, nice solution :)

Created 2024-01-04

Lourens Akkerman

Nice, works for me. The CSS contained some small errors and didn't work with date and dropdown filter.

 

Here's the adjusted version:

 

html[lang="nl-NL"] .filter-selectors .filter-label {

visibility: hidden;

font-size: 0;

line-height: initial;

}

 

html[lang="nl-NL"] [id^='TextFilter'].filter-selectors {

.filter-label:before{

visibility: visible;

font-size: 14px;

}

li:nth-child(1) .filter-label:before {

content: "Bevat";

}

li:nth-child(2) .filter-label:before {

content: "Start";

}

li:nth-child(3) .filter-label:before {

content: "Eindigt";

}

li:nth-child(4) .filter-label:before {

content: "Groter";

}

li:nth-child(5) .filter-label:before {

content: "Groter of gelijk";

}

li:nth-child(6) .filter-label:before {

content: "Gelijk";

}

li:nth-child(7) .filter-label:before {

content: "Niet gelijk";

}

li:nth-child(8) .filter-label:before {

content: "Kleiner";

}

li:nth-child(9) .filter-label:before {

content: "Kleiner of gelijk";

}

li:nth-child(10) .filter-label:before {

content: "Leeg";

}

li:nth-child(11) .filter-label:before {

content: "Niet leeg";

}

}

 

html[lang="nl-NL"] [id^='DateFilter'].filter-selectors {

.filter-label:before{

visibility: visible;

font-size: 14px;

}

li:nth-child(1) .filter-label:before {

content: "Tussen";

}

li:nth-child(2) .filter-label:before {

content: "Groter";

}

li:nth-child(3) .filter-label:before {

content: "Groter of gelijk";

}

li:nth-child(4) .filter-label:before {

content: "Gelijk";

}

li:nth-child(5) .filter-label:before {

content: "Niet gelijk";

}

li:nth-child(6) .filter-label:before {

content: "Kleiner";

}

li:nth-child(7) .filter-label:before {

content: "Kleiner of gelijk";

}

li:nth-child(8) .filter-label:before {

content: "Leeg";

}

li:nth-child(9) .filter-label:before {

content: "Niet leeg";

}

}

Created 2023-11-21

Ramón Frigge

Thanks Chris. Aangepast.

Created 2023-11-24

Ramón Frigge

Hey Ramon, small typo: Kleinern ;)

Created 2023-11-24

Chris de Gelder

Great solution! I customized the widgets to achieve this, but this is a better solution as long as it's not fixed by Mendix.

Created 2023-11-09

Roel Koops

Sweet! This is a great little hack. Love how CSS is getting more sophisticated by the minute :)

Created 2023-11-04

Tim Maurer