Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Kendo UI Globalization / Language packs

Tags:

kendo-ui

Kendo UI does not come with localization packs. You can only chose a culture file which will only setup number and date formats, but not the actual texts displayed in the widgets (for example: the pager texts - items per page, next page, etc., the filter menus (Is equal to, etc.), the grid parts (Drag a column here....), etc.)

To localize a widget one must pass, in the individual options of each widget, a bunch of messages to override the messages used by default by Kendo UI. Something 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"
    }
  }

Of course you could share this options in a single JavaScript variable, but then you will face an unexpected problem: if you have messages for ALL options of all widgets collected in a single option variable, it will TURN ON all those options for all grids. If you want a grid without grouping you will have to have a separate localized options variable without the groupable or else, even if you don't want, the group will show because the groupable: { messages: { .... } } will make Kendo recognize it as enabled.

It doesn't seem to be any way to localize the controls by including just an extra JavaScript to override those messages as can be seen on Kendo UI forums.

Is there any other way to do that?

(notice that I'll be answering my own question, and I do not suffer from Bipolar Disorder! It is just a way to get the involvement of the community on the kendo-global project!)

like image 848
Loudenvier Avatar asked Dec 06 '12 15:12

Loudenvier


2 Answers

The kendo-global project on github makes it easy to localize all localizable texts on all Kendo UI widgets by only including the desired language file like this:

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script> <script src="/js/lang/kendo.pt-BR.js"></script> 

It works by overriding the default options on the prototypes of the widgets, so it will work as if those widgets were created natively in the expected language.

Since it doesn't change anything, and don't override any method, you'll still be able to pass customized options with custom messages by using the standard approach if you need a specific message on a individual widget (instead of "10 itens" you may want to show "10 products" in the pager of the grid...)

The project currently has only a few language packs. Translating is very easy and full credits will be given to every and each translator. So contributors are really, really welcome.

The project's page can be found here: https://github.com/loudenvier/kendo-global

like image 64
Loudenvier Avatar answered Oct 11 '22 14:10

Loudenvier


I am working with Telerik Controls Q1 2013 SP1. It looks like you can no longer override the messages for many of the Kendo grid's labels or tooltips. Here is a list of several messages/tooltips that I was not able to override using a kendo-global language file:

  • ItemsPerPage
  • First
  • Previous
  • Next
  • Last

I have no good answer to the original question. It may be worth mentioning that for my purpose the solution was to use the Fluent API

@(Html.Kendo().Grid<Whatever>()
    .Name("Grid")
    .Pageable(e => e           
        .Messages(p => p.ItemsPerPage("")
            .First("לדף הראשון")
            .Previous("לדף הקודם")
            .Next("לדף הבא")
            .Last("לדף האחרון")
            .Refresh("ריענון")
            .Display("מציג {0}-{1} מתוך {2} רשומות")
            .Page("דף")
            .Of("מתוך {0}")))
 ...
like image 45
Dror Avatar answered Oct 11 '22 15:10

Dror