Using Intl

DevExtreme ASP.NET MVC Controls can be localized using the Intl object. Follow the steps described in this topic to set up Intl localization.

Reference Source Files

Files that you need to reference include the devextreme-intl module and dictionaries for required locales. DevExtreme is shipped with several predefined dictionaries - dx.messages.[lang].js files. You can use them "as is" or as a base for your custom dictionary. They are located in your project's Scripts/localization or wwwroot/js/devextreme/localization folder. Reference the module and dictionaries in a section created on the view with the DevExtreme ASP.NET MVC Controls to be localized.

Razor C#
Razor VB
@section Localization {
    <script src="https://unpkg.com/devextreme-intl/dist/devextreme-intl.min.js"></script>
    <script src="~/Scripts/localization/dx.messages.de.js"></script>
    <script src="~/Scripts/localization/dx.messages.ru.js"></script>
}
@Section Localization
    <script src="https://unpkg.com/devextreme-intl/dist/devextreme-intl.min.js"></script>
    <script src="~/Scripts/localization/dx.messages.de.js"></script>
    <script src="~/Scripts/localization/dx.messages.ru.js"></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)

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 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 DevExpress.localization.locale method to set the current locale.

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

View Demo