This is a migrated thread and some comments may be shown as answers.

Complete translation/localisation of a kendo ui html application

2 Answers 193 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Dirk
Top achievements
Rank 1
Dirk asked on 20 Oct 2015, 01:16 PM

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

 

 

 

 

  

 

 

 

 

 

 

 

 

 

2 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 22 Oct 2015, 08:33 AM
Hello Dirk,

Kendo UI localization is explained in this help article:
Here is a small example:

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Dirk
Top achievements
Rank 1
answered on 22 Oct 2015, 01:27 PM

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

 

 

Tags
General Discussions
Asked by
Dirk
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Dirk
Top achievements
Rank 1
Share this question
or