DevExtreme jQuery/JS - 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.
Our project templates use Globalize as default means of localization. To prevent possible conflicts with Intl, remove the load of Globalize and CLDR resources by doing one of the following:
Open App_Start/DevExtremeBundleConfig.cs(.vb) and remove code lines that add Globalize and CLDR files to the DevExtreme bundle.
Open the shared layout view and remove links to Globalize and CLDR files from the
<head>
tag.
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.
@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).
@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.
<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>
If you have technical questions, please create a support ticket in the DevExpress Support Center.