Kendo UI + Multilanguage support

[Fedon]

Hello everyone,

first of all, nice job and good luck with the development of Kendo UI. it has made our lives easier in many ways.

I am building a web application and need multi-language support in client-side. I am using Kendo UI / JQuery and for the language part i chose this library which is actually a JQuery plugin, so it should have full compatibility with Kendo UI.

So, imagine we have the following html:

<ul id="menu">

    <li lang="en"> Home </li>

    <li lang="en"> Profile </li>

     <li>

      <div id="search-box">

        <input type="text" id="searchfor" class="k-textbox" />

        <button class="k-button" id="search" lang="en">search</button>

      </div>

     </li>

     <li>

      <select id="select_lang">

       <option lang="en" value="en"> English </option>

        <option lang="en" value="gr"> Greek </option>

      </select>

     </li>

</ul>

and in javascript: 

window.lang = new jquery_lang_js();  // Create translator

$(document).ready(function() {

    $("#menu").kendoMenu();

    $("#select_lang").kendoDropDownList({

        change: onLangChange       

    });

    window.lang.run();  //start translator

                                 

    function onLangChange() {

        var value = $("#select_lang").val();

        window.lang.change(value);

        //var dropDownLanguage = $("#select_lang").data("kendoDropDownList");

        //dropDownLanguage.refresh();

    }

 });

Translations are stored in a seperate file (in our case that would be gr.js - since english is the default defined in html) in the form:

jquery_lang_js.prototype.lang.gr = {

  'Home': 'Αρχική Σελίδα',

  'Profile': 'Προφίλ',

  'World Events': 'Παγκόσμια Γεγονότα',

  'Documents': 'Έγγραφα',

  'Organizations': 'Οργανώσεις',

  'search': 'αναζήτηση',

  'English': 'Αγγλικά',

  'Greek': 'Ελληνικά'

}

The problem is: Of all the translations that should happen, only the "search" is translated... The other strings are left untouched. I thought of refreshing a Kendo element so it renders the new values, but uncommenting the two lines in onChange() function doesn't change a thing...

Any ideas?

Thank you,
fedon

[Iliana Dyankova]

Hello Fedon,

For your scenario I can suggest calling the translator before initializing the Kendo UI widgets. Please test the suggested approach and let me know if you still observe any problems.

Regards,
Iliana Nikolova
the Telerik team

[Puvana]

Dear Sir,

Can I add custom attribute by ASPNet MVC?

for this code

<select id="select_lang">

 <option lang="en" value="en"> English </option>

  <option lang="en" value="gr"> Greek </option>

</select>

I can create above code by following AspNet MVC (Razor)

@(Html.Kendo().DropDownList()

  .Name("select_lang")

  .DataTextField("LangTxt")

  .DataValueField("LangID")

  .BindTo(Model)   //Pass the list of Products to the dropdownlist.

  .SelectedIndex(0)

)

But How to add lang="en" attribute to <option> tag on AspNet MVC?

[Iliana Dyankova]

Hi Puvana,

Since your questions is not directly related to the initial topic of this conversation, I would like to ask you to open a new thread. Thank you in advance for your understanding.

Kind regards,
Iliana Nikolova
the Telerik team