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