Kendo UI - Localize application

Question

How does one localize a pure front-end application that uses a framework such as Kendo UI ?

I mean, it's possible to do something like this:

$(document).ready(function(){
  $("#myText").html(<grab text based on language>);
});

But then, if I have a listview and want to localize its title:

<div id="tabstrip-expenseaccounts" data-role="view">
    <ul data-role="listview" data-style="inset" data-type="group">
        <li id="expenseaccounts-listview-title">
           abcde 
            <ul>
              ...
            </ul>
        </li>
    </ul>
</div>

Becomes:

...
<li id="expenseaccounts-listview-title" class="km-group-container">
  <div class="km-group-title">
    <div class="km-text">abcde</div>
  </div>
  <ul class="km-list">      
    ...
  </ul>
</li>
...

I need to inspect the generated code and do something like:

$(document).ready(function(){
  $("#expenseaccounts-listview-title.km-group-container div.km-group-title div.km-text").html(<grab text based on language>);
});

It works fine, but that doesn't seem like a clean solution to me. Any advice ? Thanks!

score 0 · Answer 1 · edited May 23 '17 at 10:32

0

For KendoUI there some language packs available on GitHub here. This other stakoverflow question should give you a headstart. With this, all you have to do is use the correct language pack and you're good to go. And if there is no language pack for your specific case, you can always roll your own.

Hope this helps.

edited May 23 '17 at 10:32

Community

1
1

answered Jun 03 '14 at 08:21

Stargazer

452
10
21

score 0 · Accepted Answer · answered Jul 08 '14 at 18:53

While I have not found a solution proper to Kendo UI, here is the approach I went for to localize my mobile application. Note here that I am not talking about localizing widgets, I am referring to localizing every static aspect of the application: input placeholders, texts on buttons, headings, etc.

My mobile application only has one file, index.html, and whenever I want to navigate to a different page, i simply move to a different view. Since having multiple views in the same file is kind of a mess, I made one html file per view, and am dynamically loading them into the body (index.html has an empty body). Before appending the html which is retrieved using $.get for each view (at this point, it's a huge string), i am replacing text based on the current language (which is retrieved from the localstorage/cookie or from a default value).

example:

In my localization library:

_localization.localizeText = function(text, arr){
        arr.forEach(function(item){
            text = text.replace(item.name, getLang() == 1 ? item.replacement.en : item.replacement.fr);
        });
        return text;
    }

In my login.html file:

<button>$$login-button$$</button>

And then in some javascript file which is included before the script in which the application is initialized:

var replacements = [];
replacements.push({
    name: "$$login-button$$",
    replacement: {
        fr: "Connecter",
        en: "Log In"
    }
});

And then when i'm loading my files into the body:

$.when($.get("login.html"))
    .done(function(p1){
        var body = $("body");
        body.append(localization.localizeText(p1[0], app.replacements));
});

Hope this helps anyone with similar issues!

Kendo UI - Localize application

2 Answers2