Complete translation/localisation of a kendo ui html application

[Dirk]

Hi,

 

i am new to kendo ui and wrote my first kendo html app. Its working fine but know i have to translate them in different languages liek french, german or dutch.

I spend know several days here in the forum and on google to find a continuous line for that, but i didn' catch it so far. What i read here from post of 2012/203 that this is on the todo list, but i think in 2015 this should be completed .What i already have learnd that it is possible to display widgets in an other language

But what abou the rest ? I saw an example (could'nt find it any longer) where other parts of the html side were translatedt via a observerable and bind construct, but this could'nt be the best practise for that.

As concrete example my question is how to translate the terms "Print","Filter"  and 'Suche' in this construct of a kendoToolBar:

$("#toolbar").kendoToolBar({
    items: [
        { type: "button", text: "Print" , id: "btnPrintPdf" },
        { type: "button", text: speech.anzeige , id: "btnShowPdf"},
        { type: "separator" },
        { template: "<label >Filter : </label>" },
        {
            template: "<input class=k-textbox type=text id='txtSearchString' placeholder='Suche'>",
            overflow: "never"
        },

       { type: "button", text: "Search", id: "btnSearch" },

        { type: "separator" }
     ]
    });

 So , waht is the best way to do that ?

 -  use the bind construct

 - use templates 

 - use an external jquery plugin ?

 

A small demo app where the language can be switched at runtime would be nice to see the best practise.

 

Regards

Dirk

 

 

 

 

  

 

 

 

 

 

 

 

 

 

[Alexander Valchev]

Hello Dirk,

Kendo UI localization is explained in this help article:

• http://docs.telerik.com/kendo-ui/framework/localization/overview

Here is a small example:

• http://demos.telerik.com/kendo-ui/grid/localization

The strings that you would like to translate in your concrete example are custom defined and will not be affected by the aforementioned localization approach. The easiest way to translate them is to collect all strings in a single object and modify that object before initialization of the widgets. For example:

var engMessages = {
    filter: "filter"
};
var frenchMessages = {
    filter: "filtre"
};
var langualge = "french";

var messages = {};

//determine language
if (langualge === "english") {
    messages = engMessages;
} else if (langualge === "french") {
    messages = frenchMessages;
}

$("#toolbar").kendoToolBar({
    items: [
        { type: "button", text: messages.filter, id: "btnFilter" },
        { template: "<label >" + messages.filter + ": </label>" },
     ]
});

I hope the information will help.

Regards,
Alexander Valchev
Telerik

 

 

[Dirk]

Hi Alexander,

thanks for your answer - the solution with the object put me in the right direction . I think this approach will work in a quite simular way to change the text in the html file via som jquery methods.

 

Regards

Dirk