DevExtreme React - Using Globalize

You can use Globalize to localize DevExtreme ASP.NET MVC Controls. Its modules and CLDR scripts must already be linked in your project. If in doubt, do one of the following:

  • Open App_Start/DevExtremeBundleConfig.cs(.vb) and make sure that Globalize and CLDR files are included in the DevExtreme bundle. Then, open the shared layout view - Views/Shared/_Layout.csthml(.vbhtml) - and check that the <head> tag includes a command similar to this:

    @Scripts.Render("~/Scripts/DevExtremeBundle")

  • Open the shared layout view and check that the <head> tag includes the links to Globalize and CLDR files directly.

If everything is correct, see the following subtopics for further steps:

Get and Load CLDR Data

Certain Globalize modules require specific CLDR data. DevExtreme ASP.NET MVC Controls use only five Globalize modules: core, number, currency, date, and message. Consult the CLDR Content topic to learn which CLDR data in the JSON format you need for these modules, and then see the Package Organization topic for information on where to get them.

Once you added the CLDR JSON files to your project, create an action method in your controller that loads them using CldrDataScriptBuilder(). The following is an example of an action method that loads CLDR JSONs for Deutsch and Russian locales from the Content/cldr-data project folder and sets the Deutsch as the default:

C#
VB
public ActionResult CldrData() {
    return new CldrDataScriptBuilder()
        .SetCldrPath("~/Content/cldr-data")
        .SetInitialLocale("de")
        .UseLocales("de", "ru")
        .Build();
}
Public Function CldrData() As ActionResult
    Return New CldrDataScriptBuilder() _
        .SetCldrPath("~/Content/cldr-data") _
        .SetInitialLocale("de") _
        .UseLocales("de", "ru") _
        .Build()
End Function

Execute this action method in a section created on the view with DevExtreme ASP.NET MVC Controls to be localized. Use the @Url.Action helper to do that. The third argument passed to it ensures that the browser caches the CLDR data. In the following example, this section is called Localization:

Razor C#
Razor VB
@section Localization {
    <script src="@Url.Action('CldrData', 'ControllerName', new { t = CldrDataScriptBuilder.GetCacheParam() })"></script>
}
@Section Localization
    <script src="@Url.Action('CldrData', 'ControllerName', New With { .t = CldrDataScriptBuilder.GetCacheParam() }))"></script>
End Section

After that, add the command rendering this section to the <head> tag of the shared layout view - Views/Shared/_Layout.csthml(.vbhtml).

Razor C#
Razor VB
@RenderSection("Localization", false)
@RenderSection("Localization", false)

Reference Dictionaries

DevExtreme is shipped with several predefined dictionaries - dx.messages.[lang].js files - that you can use "as is" or as a base for your custom dictionary. You can find them in your project's Scripts/localization or wwwroot/js/devextreme/localization folder.

Reference a predefined dictionary in the Localization section after the CldrData() action method's call to use it.

Razor C#
Razor VB
@section Localization {
    <script src="@Url.Action('CldrData', 'ControllerName', new { t = CldrDataScriptBuilder.GetCacheParam() })"></script>
    <script src="~/Scripts/localization/dx.messages.de.js"></script>
    <script src="~/Scripts/localization/dx.messages.ru.js"></script>
}
@Section Localization
    <script src="@Url.Action('CldrData', 'ControllerName', New With { .t = CldrDataScriptBuilder.GetCacheParam() }))"></script>
    <script src="~/Scripts/localization/dx.messages.de.js"></script>
    <script src="~/Scripts/localization/dx.messages.ru.js"></script>
End Section

To create a custom dictionary, copy one of the predefined dictionaries and give it an appropriate name, for example, dx.messages.es.js for Spanish translation. Then, translate messages in the dictionary to the required language. Finally, reference the custom dictionary in the Localization section like a predefined one.

Set the Locale On the Fly

Open the view with controls to localize, add a <script> tag to the bottom, and call the Globalize.locale method to set the current locale.

Razor C#
Razor VB
<script>
    Globalize.locale(navigator.languages && navigator.languages[0] ||
        navigator.language ||
        navigator.userLanguage);
</script>
<script>
    Globalize.locale(navigator.languages && navigator.languages[0] ||
        navigator.language ||
        navigator.userLanguage);
</script>

View Demo