DevExtreme React - Localization
Static messages for any DevExtreme widget are defined in a locale-specific dictionary as key-value pairs. To localize the List widget, you need to redefine the following keys' values. To load the dictionaries, use the loadMessages(messages) method defined in the DevExpress.localization
namespace.
jQuery
DevExpress.localization.loadMessages({ // Replace "en" with the target locale of the dictionary "en": { "dxCollectionWidget-noDataText": "No data to display", "dxList-pullingDownText": "Pull down to refresh...", "dxList-pulledDownText": "Release to refresh...", "dxList-refreshingText": "Refreshing...", "dxList-pageLoadingText": "Loading...", "dxList-nextButtonText": "More", "dxList-selectAll": "Select All", "dxListEditDecorator-delete": "Delete", "dxListEditDecorator-more": "More" }, "de": { "dxCollectionWidget-noDataText": "Keine Daten verfügbar", // ... } }); // Sets the locale DevExpress.localization.locale(navigator.language || navigator.browserLanguage);
Angular
import { locale, loadMessages } from "devextreme/localization"; loadMessages({ // Replace "en" with the target locale of the dictionary "en": { "dxCollectionWidget-noDataText": "No data to display", "dxList-pullingDownText": "Pull down to refresh...", "dxList-pulledDownText": "Release to refresh...", "dxList-refreshingText": "Refreshing...", "dxList-pageLoadingText": "Loading...", "dxList-nextButtonText": "More", "dxList-selectAll": "Select All", "dxListEditDecorator-delete": "Delete", "dxListEditDecorator-more": "More" }, "de": { "dxCollectionWidget-noDataText": "Keine Daten verfügbar", // ... } }); // Sets the locale locale(navigator.language || navigator.browserLanguage);
Some messages can be defined by List options as well as keys. The following table illustrates the options and keys that define the same messages. Note that the options always take precedence over keys.
Option | Key | Description |
---|---|---|
noDataText | dxCollectionWidget-noDataText |
Displayed when the List is empty. |
pullingDownText | dxList-pullingDownText |
Displayed when the user begins pulling the List down. |
pulledDownText | dxList-pulledDownText |
Displayed when the user have pulled the List down. |
refreshingText | dxList-refreshingText |
Displayed while data in the List is being refreshed. |
pageLoadingText | dxList-pageLoadingText |
Displayed while another page is loading. |
nextButtonText | dxList-nextButtonText |
Displayed on the button that loads the next page. Appears only if the pageLoadMode option is "nextButton". |
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.