Complete solution for language localization of all text strings in an app

[Carl]

Please note that the globalization demo shown at

http://demos.kendoui.com/web/globalization/index.html

does NOT demonstrate a completely localized solution because all the text labels remain in English. A realistic solution would require all text to display in the selected local language whether English, French, Spanish, German, etc, and not just the "culture" relevant to dollars versus Euros, etc.

So what are the plans for a framework that implements a completely localized language solution that allows us to access resource files for selected translations of all the text strings in our applications?

Or should we implement our own solutions?

See for example the i18n solution implemented by Matthew ORiordan for Appcelerator Titanium at Github:

https://github.com/mattheworiordan/json.i18n-for-Titanium-Mobile

where he implemented language resource files in JSON as an approach more efficient than XML.

[Carl]

I'm continuing to look for what's out there that might already be available and appropriate...  and found the I18N Bundle plugin for the requirejs module loader:

http://www.requirejs.org/docs/api.html#i18n

It would still be nice to hear something from Telerik about any plans for anything to be included directly in KendoUI framework ....

[Atanas Korchev]

Hi Carl,

 Localization is definitely part of our long term plans. We cannot however commit with an exact deadline yet. You can keep an eye on our public roadmap page for additional info.

Regards,
Atanas Korchev
the Telerik team

[Felipe]

I'm working on providing an easy way to localize all the text in Kendo widgets since the Q3 release seems not to have come with this... I'm stumbling on a lot of problems. Most of the widgets accepts options that can change the used text, like this:

    filterable: {

        messages: {

            info: "Título:", // sets the text on top of the filter menu

            filter: "Filtrar", // sets the text for the "Filter" button

            clear: "Limpar", // sets the text for the "Clear" button

             

            // when filtering boolean numbers

            isTrue: "é verdadeiro", // sets the text for "isTrue" radio button

            isFalse: "é falso", // sets the text for "isFalse" radio button

             

            //changes the text of the "And" and "Or" of the filter menu

            and: "E",

            or: "Ou"

        },

        operators: {

            //filter menu for "string" type columns

            string: {

                eq: "Igual a",

                neq: "Diferente de",

                startswith: "Começa com",

                contains: "Contém",

                endswith: "Termina em"

            },

            //filter menu for "number" type columns

            number: {

                eq: "Igual a",

                neq: "Diferente de",

                gte: "Maior que ou igual a",

                gt: "Mair que",

                lte: "Menor que ou igual a",

                lt: "Menor que"

            },

            //filter menu for "date" type columns

            date: {

                eq: "Igual a",

                neq: "Diferente de",

                gte: "Maior que ou igual a",

                gt: "Mair que",

                lte: "Menor que ou igual a",

                lt: "Menor que"

            }

        }

    },

  groupable: {

    messages: {

      empty: "Arraste colunas aqui para agrupar pelas mesmas"

    }

  }

} 

The above snippet would localize the group header and the filter menus to Portuguese.
EDIT: IT IS WORKING! IT WAS A TYPO!!! But trying the same approach with the column menu is fruitless:

columnMenu: {

  messages: {

    sortAscending: "Ascendente",

    sortDescending: "Descendente",

    filter: "Filtro",

    columns: "Colunas"

  }

}

So, the above works... :-) I was passing it wrongly to the grid!!! That's why it wasn't being honored...

The rest of this post can be considered as a suggestion... :-)

Anyway, I was writing a javascript function that would get a grid options object and apply all the needed localizations for the chosen options,and become frustrated because after reading the source code I've realized that it is absolutely a piece of cake to add this out of the box with very, very few changes to the source code. I've did an experiment with the grid, by changing the latest source code of kendo.web.js (version v2012.3.1114) on the columnmenu part at line 17605 from this:

options: {

    name: "ColumnMenu",

    messages: {

        sortAscending: "Sort Ascending",

        sortDescending: "Sort Descending",

        filter: "Filter",

        columns: "Columns"

    },

    columns: true,

    sortable: true,

    filterable: true

},

to this:

options: {

    name: "ColumnMenu",

    messages: kendo_locale.columnMenuMessages;

    columns: true,

    sortable: true,

    filterable: true

},

Now the column menu is localizable by just assigning the kendo_locale variable to a proper value like this:

<script>

window.kendo_locale = {

  columnMenuMessages: {

    sortAscending: "Ascendente",

    sortDescending: "Descendente",

    filter: "Filtro",

    columns: "Colunas"

  }

}

</script>

    <script src="kendo.web.js"></script>

It must come before kendo.web.js in my experiment, or an undefined error would occur.
We could do that to all widgets (there aren't many places, just about a dozen) and then separate this globalization code into separate files for each locale. Using $.extend could make it easy to provide separate files for each widget too.
This is still not the best solution because it would require you to ALWAYS include a locale file before the actual kendo ui javascript... The best solution would require Telerik to start getting the "options.messages" from a properly namespaced object inside the kendo object, and not only at "loading time", so that the locale files should come AFTER the kendo javascript files (which, by themselves, would provide the english version...)

Also, having the messages in a kendo.locale.grid.messages, for example, would allow us to change one or two messages globally without the need to pass them ALL THE TIME to every single grid we create.

If I was the project manager, after reading this post by someone that is using Kendo for only 4 days, I would say to my junior developer: "Mike, I want this done by tomorrow, AND FULLY UNIT TESTED!" :-)

[Sergey]

We changing kendo.ui.FilterMenu.prototype.options.messages object in out solution, to make global localization of controls:

kendo.ui.FilterMenu.prototype.options.messages = $.extend(kendo.ui.FilterMenu.prototype.options.messages, {

    and: "И",

    clear: "Очистить",

    filter: "Фильтр",

    info: "Показывать строки с значение которое:",

    isFalse: "ложь",

    isTrue: "истина",

    or: "ИЛИ",

    selectValue: "-Выберите значение-"

});

[Felipe]

Sergey, your solution is  A LOT CLEANER THAN MINE!!! I was using helper functions and completely forgot about the prototyped nature of JavaScript!!!

Now it is only a matter of including the proper localization files.

I'll make a Portuguese (pt-BR) file available and then people can contribute by extending it with their own!

Thanks a lot!

[Felipe]

I've just created a github project for the localization of all text strings used in Kendo UI widgets, entirely in JavaScript (no need for server-side MVC helpers, satellite assemblies, etc.). It can be found here:

https://github.com/loudenvier/kendo-global

Usage is very straight-forward, just read the readme and run the sample.

Currently only Brazilian Portuguese (pt-BR) is supported since I don't have the resources to translate it to other languages, but contributions are more than welcome.

[Mikael]

@Felipe
This is great, however I would like to apply this to the buttons that appear when I enable inLine editing in a grid.
I started out just setting the Text property of the edit and delete buttons but realized that I didn't have direct access to the "Update" and "Cancel" buttons that appear after you press "Edit". Would it be hard/possible to set the text on these from the globalization file too? And if so, how/what would I need to edit?

Attached a Norwegian translation file (nb-No) if you want to add it to the repo.

[Felipe]

Hi Mikael,

I'm not monitoring this thread anymore as Telerik didn't helped me out with the Globalization effort of kendo-ui and I had to work it out all by myself. That's why I missed your question!

Despite that kendo-global (https://github.com/loudenvier/kendo-global) already supports 10 languages (not counting yours which I'll be adding soon!).

Unfortunately Telerik changed some option messages in the latest release and the current kendo-global is not fully compatible with it (some strings are not translated). I'll be upgrading it soon (when I got the time) so that it is 100% compatible with the old and new release.

I suggest that any people wanting to contribute to kendo-global to use githubs pull requests so that I can merge their changes automatically and the credit for the file will be automatically given to their github account.

I'll take a look at the buttons translation which I didn't notice weren't working!

Best wishes,

Felipe

[iTz_Lukz]

Thx 4 the help :)

[Mario]

Hi Guys,

I would like to use https://github.com/loudenvier/kendo-global but the problem I have is that my applications language will change depending on the user. In other words my application will have to be dynamically rendered in several languages. So what if I cannot hard-code a specific language js file?

I intend to have a login page where the user will select his/her preferred language via a drop down, i will store the selected language value (es-ES for example) in a cookie. As soon as the user logs in the corresponding language file will have to be loaded. The next time the user starts the application I have to load the corresponding language file based on the existing cookie.

Any idea how to do this?

Best Regards,

[Holger]

@Mario: The following JS Bin shows how to dynamically load Kendo culture files with jQuery.getScript(): http://jsbin.com/ASAqubU/3/edit

Hope this helps,
Holger

[Andreas Dahlén]

Realy good way of globally localize with protoype.

Is it possible to localize the text on buttons (ex Edit, Delete, Add new in toolbar) in a Grid with prototype-statements.

If possible, how to do that?

[harada]

Hi,

We are a Japanese company considering to buy commercial license fo Kendo.
We need Japanese locale support for widgets, messages.
After reading this forum, Kendo UI docs and  searching other places in the net,  It seems localization support
for widgets, validation messages is not in the framework. 
 This demo,  http://demos.kendoui.com/web/globalization/index.html
 shows only some basic localization feature.
Felipe project(https://github.com/loudenvier/kendo-global) looks good though Japanese file not available yet.
Built in  localization in the framework is preferable so that we dont need to manually add the locale specific message.