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

NavBar Title Translation

10 Answers 130 Views
NavBar
This is a migrated thread and some comments may be shown as answers.
giord
Top achievements
Rank 1
giord asked on 14 Nov 2013, 03:08 PM
I have a phonegap 3 application where I use kendo mobile.

For internationalization I use this:
https://github.com/plang/phonegap-l10n
It's pretty simple. I can add a class an the translation works.

My views:
<div data-role="view" id="tab-catalog" data-title="Catalog" data-layout="mobile-tabstrip">
....
</div>
  
<div data-role="view" id="tab-account" data-title="Account" data-layout="mobile-tabstrip">
 ....
</div>
My Layout:
<div data-role="layout" data-id="mobile-tabstrip">
       <header data-role="header">
           <div id="navbar" data-role="navbar">
               <a data-role="button" data-rel="drawer" href="#drawer" data-icon="drawer-button" data-align="left"></a>
               <span data-role="view-title"></span>
               <a id="scan" data-align="right" data-icon="camera" data-role="button"></a>
           </div>
       </header>
   </div>

Works fine.. but I don't know how to translate the data-title attribute.
I know I can set the title with
$("#navbar").data("kendoMobileNavBar").title("foo");
I also could read the title of my view with kendo.view().title and make the translation, something like this:

$("#navbar").data("kendoMobileNavBar").title(Localization.for(kendo.view().title));

After I start the app is the title is translated, but if I change the view and come back the title is "Catalog" again.

How could I accomplish anything like this?

10 Answers, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 18 Nov 2013, 08:58 AM
Hi Bruno,

If I understand you correctly, the easiest way to handle that would be to update the view title with its translated value in the view init event handler. Please check this sample for what I mean.

Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
giord
Top achievements
Rank 1
answered on 05 Dec 2013, 12:42 PM
This works exactly like I wanted, thank you!

On one specific view I have to set the title differently evertime the view is loaded.
I tried it with the data-show attribute:

<div data-role="view" id="tab-infos" data-title="foo" data-layout="mobile-promotion" data-show="onShow">
function onShow(e) {
            e.view.options.title = "bar";
}
the function onShow gets executed, but the title doesn't change?

EDIT:
onShow fires everytime, but the title changes only after the second time? If I set data-init and data-show it works, but why doesn't data-show work the first time?
0
Petyo
Telerik team
answered on 09 Dec 2013, 07:49 AM
Hello Bruno,

This sounds strange; I tried changing data-init to data show in this sample – it seems to be working as expected. Maybe there is something else that needs to be done in order to reproduce the problem?

Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Anthony
Top achievements
Rank 1
answered on 19 Dec 2013, 07:34 PM
Hello,

I have the same issue.

Why does data-show not work the first time ?

it works from the second time onwards.

cheers
Tony
0
Atanas Korchev
Telerik team
answered on 20 Dec 2013, 10:00 AM
Hello,

We can't reproduce this problem in this jsbin demo: http://jsbin.com/oVAzUWU/1/edit

The show event is fired the very first time. Could you please update this demo so it starts to fail like in your real application?

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
giord
Top achievements
Rank 1
answered on 20 Dec 2013, 11:27 AM
I could reproduce the error:
http://jsbin.com/asUPAMO/2/

First time I click on the button "Detail" the title shows "detail", after I click on the Back button and one more time on de detail button it shows "OnShow Title".
0
Atanas Korchev
Telerik team
answered on 20 Dec 2013, 11:33 AM
Hello,

If you update the code with an alert statement you would see that it is immediately executed: http://jsbin.com/asUPAMO/4


Changing options.title won't work because the title is already rendered by the time the show event is triggered.

Regards,
Atanas Korchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
giord
Top achievements
Rank 1
answered on 20 Dec 2013, 12:02 PM
Hmm ok.. I have a list of entries, everyone links to the detail page. I need to show a different title everytime I click on a different entry.
How can I accomplish something like this?
0
Alexander Valchev
Telerik team
answered on 23 Dec 2013, 08:45 AM
Hi Giord,

In order to change the NavBar Title's text at runtime you should use the title method. Please have in mind that layout elements are copied into the Views that use them, so it is not recommended use IDs in the layout. Please remove the id="navbar" attribute and reference the NavBar through the View properties (like shown in the code sample from the documentation).

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
giord
Top achievements
Rank 1
answered on 23 Dec 2013, 09:52 AM
Works like a charm, thank you!

I removed the id's, which I never actually used.

Tags
NavBar
Asked by
giord
Top achievements
Rank 1
Answers by
Petyo
Telerik team
giord
Top achievements
Rank 1
Anthony
Top achievements
Rank 1
Atanas Korchev
Telerik team
Alexander Valchev
Telerik team
Share this question
or