How to Translating Data Grid 2, filters
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
-
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"; }
}
CreatedNiklas 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...
CreatedVinicius Strugata Ambrosio -
Thank you!! This will help me a lot!
CreatedLeandro Dias -
Thanks all, nice solution :)
CreatedLourens 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";
}
}
CreatedRamón Frigge-
Thanks Chris. Aangepast.CreatedRamón Frigge
-
Hey Ramon, small typo: Kleinern ;)CreatedChris 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.
CreatedRoel Koops -
Sweet! This is a great little hack. Love how CSS is getting more sophisticated by the minute :)
CreatedTim Maurer