By default, the app that is generated by Kendo UI Designer uses a US-style date, time, and number format. However, you can change the default culture and label in the Edit App dialog box. This allows you to create your application for a specific culture.
When the app is generated, a translation file--<webapp_directory>/artifacts/translations/translations.default.json--is created with all translatable strings in the application. It contains the default label and culture set in the Edit App dialog box.
After generation, you can add localization to the generated app to enable users to choose from two or more of the following language cultures:
German-Germany (de-DE)
English-UK (en-GB)
English-US (en-US)
Spanish-Spain (es-ES)
French-France (fr-FR)
When you set up localization for any of these language cultures, the date, time, and number formats are automatically localized by Kendo UI Builder. In addition, you can manually add culture-specific translations for all translatable strings such as module and view labels.
To begin, make a copy of the translations.default.json file located in <webapp_directory>/artifacts/translations and replace the suffix default in the filename with the language culture that you want to add. For example, replace default with de-DE or fr-FR as shown here:
You must create one file for each language culture that you want to add. The translations.default.json file provides a definition of all translatable properties in JSON format. This enables you to add culture-specific translations in the copies. However, note that Kendo UI Designer updates only the default translation file when changes are made to modules or views. It does not automatically update the copies that you make, so it is recommended that you hold off on making the translations until your app is close to being ready for production.
The next step is to edit the file and add culture-specific translations. You must modify the label and culture properties as shown in this example:
You can then add translations for any of the following properties:
All modules: label, description
Data Grid View: label, title, columns, toolbarButtonLabels, rowButtonLabels
Data Grid Form View: label, title, columns, newTitle, editTitle
Data Grid Separate Form View: label, title, columns, newTitle, editTitle
Hierarchical Data Grid View: label, parentTitle, childTitle, parentGridColumns, childGridColumns, childGridEditMessages
Stacked Data Grid View: label, parentTitle, childTitle, parentGridColumns, childGridColumns, childGridEditMessages
Blank View: label
Blank View Components:
Component
Translatable Properties
grid
toolbarButtonLabels, rowButtonLabels, columns
boolean-radio-button-list
trueText, falseText
currency-text-box
placeholder
email-text-box
placeholder
integer-text-box
placeholder
numeric-text-box
placeholder
password-text-box
placeholder
percent-text-box
placeholder
percent-value-text-box
placeholder
text-area
placeholder
text-box
placeholder
url-text-box
placeholder
label
text
button
content
area-charts
title text
bar-charts
title text
donut-charts
title text
line-charts
title text
pie-charts
title text
expander
text, subcomponents
tab-strip
tab text, subcomponents
toolbar
button text, splitButton text, subitem text, buttonGroup button text
After you have added the translations, you must regenerate the app's files by clicking Generate in the app design page in Kendo UI Designer.
At runtime, the header of the generated app displays a dropdown containing a choice for the default language and for each language culture that you have configured:
Choosing a different language culture automatically switches the date, time, and number formats, and displays localized labels:
German-Germany (de-DE)
