Globalization

The globalization process combines the translation of component messages with adapting them to specific locales.

The following example demonstrates how to use the Spanish date format and month names, and localize the built-in messages of the Grid. For the complete example, refer to the demo on Stackblitz.

<div id="vueapp" class="vue-app">
     <localization-provider :language="'es-ES'">
        <intl-provider :locale="'es'" >
            <grid
                :style="{height: '420px'}"
                :data-items="dataResult"
                :sortable="true"
                :groupable="true"
                :filterable="true"
                :pageable="{ pageSizes: [ 5, 7, 10 ] }"
                :skip="skip"
                :take="take"
                :columns = "columns"
                @datastatechange = "dataStateChange">
            </grid>
        </intl-provider>
    </localization-provider>
</div>
import { Grid } from '@progress/kendo-vue-grid';
import { IntlProvider, load, LocalizationProvider, loadMessages }
 from '@progress/kendo-vue-intl';
import { process } from '@progress/kendo-data-query';

import likelySubtags from 'cldr-core/supplemental/likelySubtags.json';
import currencyData from 'cldr-core/supplemental/currencyData.json';
import weekData from 'cldr-core/supplemental/weekData.json';

import numbers from 'cldr-numbers-full/main/es/numbers.json';
import currencies from 'cldr-numbers-full/main/es/currencies.json';
import caGregorian from 'cldr-dates-full/main/es/ca-gregorian.json';
import dateFields from 'cldr-dates-full/main/es/dateFields.json';
import timeZoneNames from 'cldr-dates-full/main/es/timeZoneNames.json';

load(
    likelySubtags,
    currencyData,
    weekData,
    numbers,
    currencies,
    caGregorian,
    dateFields,
    timeZoneNames
);

const esMessages = {
    "datepicker": {
        "toggleCalendar": "Alternar calendario"
    },
    "calendar": {
        "today": "Hoy"
    },
    "dateinput": {
        "increment": "Incrementar valor",
        "decrement": "Disminuir valor"
    },
    "numerictextbox": {
        "increment": "Incrementar valor",
        "decrement": "Disminuir valor"
    },
    "grid": {
        "groupPanelEmpty": "Arrastre el título de una columna y suéltelo aquí para agrupar por ese criterio",
        "noRecords": "No hay datos disponibles.",
        "pagerFirstPage": "Ir a la primera página",
        "pagerPreviousPage": "Ir a la página anterior",
        "pagerNextPage": "Ir a la página siguiente",
        "pagerLastPage": "Ir a la última página",
        "pagerPage": "Página",
        "pagerOf": "de",
        "pagerItems": "ítems",
        "pagerInfo": "{0} - {1} de {2} ítems",
        "pagerItemsPerPage": "ítems por página",
        "filterEqOperator": "Es igual a",
        "filterNotEqOperator": "No es igual a",
        "filterIsNullOperator": "Es nulo",
        "filterIsNotNullOperator": "No es nulo",
        "filterIsEmptyOperator": "Está vacío",
        "filterIsNotEmptyOperator": "No está vacío",
        "filterStartsWithOperator": "Comienza con",
        "filterContainsOperator": "Contiene",
        "filterNotContainsOperator": "No contiene",
        "filterEndsWithOperator": "Termina en",
        "filterGteOperator": "Es mayor o igual que",
        "filterGtOperator": "Es mayor que",
        "filterLteOperator": "Es menor o igual que",
        "filterLtOperator": "Es menor o igual que",
        "filterIsTrue": "Sí",
        "filterIsFalse": "No",
        "filterBooleanAll": "(Todas)",
        "filterAfterOrEqualOperator": "Es posterior o igual a",
        "filterAfterOperator": "Es posterior",
        "filterBeforeOperator": "Es anterior",
        "filterBeforeOrEqualOperator": "Es anterior o igual a",
        "filterFilterButton": "Filtrar",
        "filterClearButton": "Limpiar filtros",
        "filterAndLogic": "Y",
        "filterOrLogic": "O"
    }
};
loadMessages(esMessages, 'es-ES');


Vue.component('localization-provider', LocalizationProvider);
Vue.component('intl-provider', IntlProvider);
Vue.component('Grid', Grid);

new Vue({
    el: '#vueapp',
     data: function () {
        return {
            skip: 0,
            take: 7,
            columns: [
                { field: 'ProductID', title: 'ID', width: '70px', filterable: false},
                { field: 'ProductName', title: 'Nombre del producto' },
                { field: 'FirstOrderedOn', title: 'Primero ordenado en', filter: 'date', format: '{0:D}' },
                { field: 'UnitPrice', title: 'Precio unitario', filter: 'numeric', format: '{0:c}' }
            ]
        };
    },
    computed: {
        dataResult: {
            get: function() {
                return [];
            },
            set: function () {
                this.$forceUpdate();
            }
        }
    },
    methods: {
        dataStateChange: function(event) {
          //  this.dataResult = process(sampleProducts, event.data);
            this.take = event.data.take;
            this.skip = event.data.skip;
        }
    }
});

Internationalization

The internationalization process applies specific culture formats to a web application. For more information, refer to kendo-intl (the base Internationalization package on GitHub).

Messages

The following table lists the built-in message keys and their default values.

Message Key Default Value
grid.groupPanelEmpty Drag a column header and drop it here to group by that column
grid.pagerItemsPerPage items per page
grid.pagerInfo {0} - {1} of {2} items
grid.pagerFirstPage Go to the first page
grid.pagerPreviousPage Go to the previous page
grid.pagerNextPage Go to the next page
grid.pagerLastPage Go to the last page
grid.pagerPage Page
grid.pagerOf of
grid.filterClearButton Clear
grid.filterEqOperator Is equal to
grid.filterNotEqOperator Is not equal to
grid.filterIsNullOperator Is null
grid.filterIsNotNullOperator Is not null
grid.filterIsEmptyOperator Is empty
grid.filterIsNotEmptyOperator Is not empty
grid.filterStartsWithOperator Starts with
grid.filterContainsOperator Contains
grid.filterNotContainsOperator Does not contain
grid.filterEndsWithOperator Ends with
grid.filterGteOperator Is greater than or equal to
grid.filterGtOperator Is greater than
grid.filterLteOperator Is less than or equal to
grid.filterLtOperator Is less than
grid.filterIsTrue Is true
grid.filterIsFalse Is false
grid.filterBooleanAll (All)
grid.filterAfterOrEqualOperator Is after or equal to
grid.filterAfterOperator Is after
grid.filterBeforeOperator Is before
grid.filterBeforeOrEqualOperator Is before or equal to
grid.noRecords No records available.

In this article