Localization - Use Globalize

DevExtreme allows you to localize date, number and currency values as well as messages using Globalize.

Link Dictionaries

First, link Globalize modules and DevExtreme localization files. 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/cldr.js"></script>
<script type="text/javascript" src="js/cldr/event.js"></script>
<script type="text/javascript" src="js/cldr/supplemental.js"></script>
<script type="text/javascript" src="js/globalize.js"></script>
<script type="text/javascript" src="js/globalize/message.js"></script>
<script type="text/javascript" src="js/globalize/number.js"></script>
<script type="text/javascript" src="js/globalize/currency.js"></script>
<script type="text/javascript" src="js/globalize/date.js"></script>
<script type="text/javascript" src="js/dx.web.js"></script>
<script type="text/javascript" src="js/localization/dx.messages.de.js"></script>

For information on dependencies between Globalize modules, refer to the Dependencies section of Globalize documentation.

NOTE
Dictionary scripts must be linked in the same order as those presented in the example above. DevExtreme scripts must be linked above dictionary scripts.

Also, you need to load the required CLDR data. Refer to the Globalize documentation to learn how to load CLDR data to Globalize. For example, you can load it using AJAX requests to load the required CLDR data.

JavaScript
$.when(
    $.getJSON("lib/js/cldr/main/de/ca-gregorian.json"),
    $.getJSON("lib/js/cldr/main/de/numbers.json"),
    $.getJSON("lib/js/cldr/main/de/currencies.json"),
    $.getJSON("lib/js/cldr/supplemental/likelySubtags.json"),
    $.getJSON("lib/js/cldr/supplemental/timeData.json"),
    $.getJSON("lib/js/cldr/supplemental/weekData.json"),
    $.getJSON("lib/js/cldr/supplemental/currencyData.json"),
    $.getJSON("lib/js/cldr/supplemental/numberingSystems.json")
).then(function () {
    //The following code converts the got results into an array
    return [].slice.apply( arguments, [0] ).map(function( result ) {
        return result[ 0 ];
    });
}).then(
    Globalize.load //loads data held in each array item to Globalize
).then(function(){
    //initialize your application here
})

You can download this data (stored in .json files) from the Unicode-CLDR repository.

To learn which .json data is required by each Globalize module, refer to the CLDR content section of the Globalize documentation.

Extend 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 using the keys that are specially added to predefined dictionaries.

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

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 locale as demonstrated in the code below.

JavaScript
Globalize.locale(navigator.language || navigator.browserLanguage);
NOTE
Set locale only after the DevExtreme library is loaded.

Localize Widgets

Use Globalize methods to localize date, number and currency values and messages.

var buttonOptions = {
    text: Globalize.formatMessage("Done");
    . . .
}

For the information on Globalize localization API, refer to the Globalize documentation.