Vue List - Localization

Static messages for any DevExtreme UI component are defined in a locale-specific dictionary as key-value pairs. To localize the List UI component, you need to redefine the following keys' values. To load the dictionaries, use the loadMessages(messages) method defined in the DevExpress.localization namespace.

jQuery
index.js
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",
        // ...
    }
});

// Set the locale
DevExpress.localization.locale(navigator.language);

// ===== or when using modules =====
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",
        // ...
    }
});

// Set the locale
locale(navigator.language);
Angular
app.component.ts
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",
        // ...
    }
});

// Set the locale
locale(navigator.language);
Vue
App.vue
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",
        // ...
    }
});

// Set the locale
locale(navigator.language);
React
App.js
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",
        // ...
    }
});

// Set the locale
locale(navigator.language);
NOTE
DevExtreme ships several predefined dictionaries for most locales. See the Localization topic for more information.

Some messages can be defined by List properties as well as keys. The following table illustrates the properties and keys that define the same messages. Note that the properties always take precedence over keys.

Property 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 property is "nextButton".
See Also