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.

Suggested Links

• API Reference of the Grid
• API Index of the Grid