25

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!)

3 Answers 3

30

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

5
  • As of this writing the language packs do not work with kendo.ui.core version. I opened a ticket (Issue #58) on your GitHub project site with a few suggetions. Commented May 13, 2014 at 9:38
  • @JennyO'Reilly I need the time to download the new kendo.core.ui and then update every single JavaScript file with a guard to prevent the error. Right now I don't have the time left to do that. When I find the time, I'll do it. Hopefully someone else will have created a patch for us before then :-)
    – Loudenvier
    Commented May 14, 2014 at 14:11
  • 1
    It would make sense to restructure the JavaScript files in the manner of the es-ES translation. In that file you only need to add one line (if-statement) to fix the problem. The other translations require you to add a seperate guard for each type of widget. Commented May 15, 2014 at 6:37
  • @JennyO'Reilly you're absolutely right... Since we're trying to change the format to use JSON and produce the JavaScript file automatically, I will use the es-ES as a template.
    – Loudenvier
    Commented May 17, 2014 at 23:59
  • @Loudenvier Kendo Global works mostly well, but not all messages are included in the your javascript. I found this list of what seems to be the list of all messages available in Kendo. It might help to anyone having the same trouble as me in the future Commented Sep 12, 2016 at 15:04
2

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}")))
 ...
1
  • 1
    If you are using the MVC extensions, then you must be aware that Telerik will force the localization for you. Their MVC Extension will choose a localization based on the one defined in the web.config . If you are using ASP.NET MVC and the extensions, and not pure Kendo.UI JavaScript, then you should use the native localization with satellite assemblies. kendo-global won't help you as the MVC extensions force the satellite assemblies "messages" for you.
    – Loudenvier
    Commented Nov 27, 2013 at 0:55
0

If a more dynamic option is needed I think getting the current localization and initialize the widget would be a good option.

 @{
    var culture = System.Threading.Thread.CurrentThread.CurrentCulture.ToString();
}

@section HeadContent {
    <script src="@Url.Content("~/Scripts/cultures/kendo.culture." + culture + ".min.js")"></script>
}

Here is more documentation about

https://demos.telerik.com/aspnet-mvc/grid/globalization?culture=ru-RU&_ga=2.268933617.1296110429.1575874528-1040251397.1575554475

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.