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
-
@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