Localization

DevExtreme provides an easy way to localize UI widgets. It uses the globalize library and extends its cultures by translations of specific captions/messages such as 'Back', 'Cancel', 'Select', 'Loading', 'Search' and others to the corresponding languages. The DevExtreme culture extensions are provided by separate dictionary files. These dictionaries can be found in the [Sources]/Lib/js/localization folder within your DevExtreme package. You can customize these dictionaries and create new ones for other cultures. Read below to learn how to use, customize and create dictionaries in your applications.

Use Predefined Dictionaries

DevExtreme comes with ready-to-use predefined dictionaries. These dictionaries include all the captions, titles and messages that are used in DevExtreme UI widgets. Here is a list of the currently supplied dictionaries.

  • dx.webappjs.ru.js, dx.webappjs.ja.js and dx.webappjs.de.js
    Comes with the DevExtreme Web and DevExtreme Complete kits. Includes the localization of desktop and multi-purpose UI widgets for the ru, ja and de cultures, respectively.

  • dx.phonejs.ru.js, dx.phonejs.ja.js and dx.phonejs.de.js
    Comes with the DevExtreme Mobile and DevExtreme Complete kits. Includes localization of mobile and multi-purpose UI widgets for the ru, ja and de cultures, respectively.

  • dx.all.ru.js, dx.all.ja.js and dx.all.de.js
    Comes with the DevExtreme Complete kit. Includes the localization of desktop, mobile and multi-purpose UI widgets for the ru, ja and de cultures, respectively.

The predefined dictionaries are available in the [Sources]/Lib/js/localization folder within your DevExtreme package.

Modify Predefined Dictionaries

You can extend the predefined dictionaries by the key-value pairs to provide localization for custom captions/messages. For instance, you can provide localized grid column captions by using the keys that are specially added to predefined dictionaries.

JavaScript
Globalize.addCultureInfo("de", {messages: {
    //...
    "gridcolumn_name": "Vorname"
}});
JavaScript
var dataGridOptions = {
    dataSource: orders,
    columns: [
        {
            dataField: "Name",
            caption: Globalize.localize(gridcolumn_name);
        }, 
        //...
    ]
}

Create Dictionaries for Other Cultures

If the set of predefined dictionaries does not include a dictionary for a culture you need, do the following.

  • Make a copy of the required DevExtreme dictionary file (dx.phonejs.XX.js, dx.webappjs.XX.js or dx.all.XX.js) and rename it replacing XX with the identifier of the required culture.

  • Modify the addCultureInfo function call. Pass the culture's identifier as the first parameter, and pass an object with the messages field set to the object providing the corresponding translation for the keys.

NOTE: The suggested names for your dictionary files are not important. You can give them other names if required.

Link Dictionaries

Add the required DevExtreme localization files to your project. Add links to these files within the main page of your application.

Take a look below for an example of links in code.

HTML
<script type="text/javascript" src="js/globalize.min.js"></script> 
<script type="text/javascript" src="js/de/globalize.culture.de.js"></script>
<script type="text/javascript" src="js/de/dx.phonejs.de.js"></script>

NOTE: The globalize.culture.XX.js dictionary must be linked above the corresponding DevExtreme dictionary.

NOTE: All dictionary files must be linked above the DevExtreme scripts.

Set Application Locale

If you add several dictionaries to the application, specify which one of them is to be used when running this application. For this purpose, detect the language of the browser in which the application is running and set the appropriate culture as demonstrated in the code below.

JavaScript
Globalize.culture(navigator.language || navigator.browserLanguage);