How to Translating Data Grid 2, filters

Question

How to Translating Data Grid 2, filters

11

When implementing the Data Grid 2 in languages other than English, filters are still shown in English.

Of course, I agree Mendix should solve this, but until then, "CSS comes to the rescue."

You can use CSS to replace content.

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

visibility: hidden;

font-size: 0;

line-height: initial;

}

html[lang="nl-NL"] .filter-selectors li:nth-child(1) .filter-label:before {

visibility: visible;

content: "Bevat";

font-size: 14px;

}

html[lang="nl-NL"] .filter-selectors li:nth-child(2) .filter-label:before {

visibility: visible;

content: "Start met";

font-size: 14px;

}

html[lang="nl-NL"] .filter-selectors li:nth-child(3) .filter-label:before {

visibility: visible;

content: "Eindigd met";

}

html[lang="nl-NL"] .filter-selectors li:nth-child(4) .filter-label:before {

visibility: visible;

content: "Meer dan";

font-size: 14px;

}

html[lang="nl-NL"] .filter-selectors li:nth-child(5) .filter-label:before {

visibility:visible;

content: "Meer dan of gelijk";

font-size: 14px;

}

html[lang="nl-NL"] .filter-selectors li:nth-child(6) .filter-label:before {

visibility: visible;

content: "Gelijk";

font-size: 14px;

}

html[lang="nl-NL"] .filter-selectors li:nth-child(7) .filter-label:before {

visibility:visible;

content: "Niet gelijk";

font-size: 14px;

}

html[lang="nl-NL"] .filter-selectors li:nth-child(8) .filter-label:before {

visibility:visible;

content: "Kleinder dan";

font-size: 14px;

}

html[lang="nl-NL"] .filter-selectors li:nth-child(9) .filter-label:before {

visibility:visible;

content: "Kleinder dan of gelijk";

font-size: 14px;

}

html[lang="nl-NL"] .filter-selectors li:nth-child(10) .filter-label:before {

visibility:visible;

content: "Leeg";

font-size: 14px;

}

html[lang="nl-NL"] .filter-selectors li:nth-child(11) .filter-label:before {

visibility: visible;

content: "Niet leeg";

font-size: 14px;

}

You can support multiple languages, by providing translation for each lang tag

Please share your translation in other languages too

Posted 2023-10-21

Andries Smit

11 comments

For the ones who need German filter options, here is the German translation:

html[lang="de-DE"] .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 German
.between + .filter-label::before { content: "Zwischen"; }
.contains + .filter-label::before { content: "Enthält"; }
.startsWith + .filter-label::before { content: "Beginnt mit"; }
.endsWith + .filter-label::before { content: "Endet mit"; }
.greater + .filter-label::before { content: "Großer als"; }
.greaterEqual + .filter-label::before { content: "Großer oder gleich"; }
.equal + .filter-label::before { content: "Gleich"; }
.notEqual + .filter-label::before { content: "Nicht gleich"; }
.smaller + .filter-label::before { content: "Kleiner als"; }
.smallerEqual + .filter-label::before { content: "Kleiner oder gleich"; }
.empty + .filter-label::before { content: "Leer"; }
.notEmpty + .filter-label::before { content: "Nicht leer"; }
}

Created 2025-08-06

René Kop

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

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

@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

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

Lukáš Tomek · Answer 1 · 2025-07-11

Perfect, I can confirm this works, thank you!

Martin Koelewijn · Answer 2 · 2025-07-24

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.

Patrick Sebazungu · Answer 3 · 2025-07-23

Amazing refactored version :)

Lukáš Tomek · Answer 4 · 2025-07-11

This works, thanks!

Ramón Frigge · Answer 5 · 2023-11-24

Thanks Chris. Aangepast.

Chris de Gelder · Answer 6 · 2023-11-24

Hey Ramon, small typo: Kleinern ;)