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

Thread is closed for posting
14 posts, 0 answers
  1. Carl
    Carl avatar
    195 posts
    Member since:
    Oct 2012

    Posted 17 May 2012 Link to this post

    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.
  2. Carl
    Carl avatar
    195 posts
    Member since:
    Oct 2012

    Posted 21 May 2012 Link to this post

    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 ....
  3. Kendo UI is VS 2017 Ready
  4. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 21 May 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Felipe
    Felipe avatar
    7 posts
    Member since:
    Nov 2011

    Posted 16 Nov 2012 Link to this post

    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!" :-)
  6. Sergey
    Sergey avatar
    1 posts
    Member since:
    May 2012

    Posted 20 Nov 2012 Link to this post

    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: "-Выберите значение-"
    });

  7. Felipe
    Felipe avatar
    7 posts
    Member since:
    Nov 2011

    Posted 23 Nov 2012 Link to this post

    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!
  8. Felipe
    Felipe avatar
    7 posts
    Member since:
    Nov 2011

    Posted 27 Nov 2012 Link to this post

    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.
  9. Mikael
    Mikael avatar
    6 posts
    Member since:
    Feb 2013

    Posted 28 Feb 2013 Link to this post

    @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.
  10. Felipe
    Felipe avatar
    7 posts
    Member since:
    Nov 2011

    Posted 06 Jun 2013 Link to this post

    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
  11. iTz_Lukz
    iTz_Lukz avatar
    1 posts
    Member since:
    Aug 2013

    Posted 23 Aug 2013 Link to this post

    Thx 4 the help :)
  12. Mario
    Mario avatar
    3 posts
    Member since:
    Aug 2013

    Posted 26 Aug 2013 Link to this post

    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,
  13. Holger
    Holger avatar
    77 posts
    Member since:
    Nov 2012

    Posted 03 Sep 2013 Link to this post

    @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
  14. Andreas Dahlén
    Andreas Dahlén avatar
    16 posts
    Member since:
    Mar 2010

    Posted 07 Oct 2013 Link to this post

    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?
  15. harada
    harada avatar
    1 posts
    Member since:
    Dec 2013

    Posted 19 Dec 2013 Link to this post

    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.


     

Back to Top
Kendo UI is VS 2017 Ready