NavBar Title Translation

11 posts, 0 answers
  1. giord
    giord avatar
    8 posts
    Member since:
    Oct 2013

    Posted 14 Nov 2013 Link to this post

    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?
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 18 Nov 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. giord
    giord avatar
    8 posts
    Member since:
    Oct 2013

    Posted 05 Dec 2013 Link to this post

    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?
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 09 Dec 2013 Link to this post

    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!
  6. Anthony
    Anthony avatar
    1 posts
    Member since:
    Sep 2013

    Posted 19 Dec 2013 Link to this post

    Hello,

    I have the same issue.

    Why does data-show not work the first time ?

    it works from the second time onwards.

    cheers
    Tony
  7. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 20 Dec 2013 Link to this post

    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!
  8. giord
    giord avatar
    8 posts
    Member since:
    Oct 2013

    Posted 20 Dec 2013 Link to this post

    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".
  9. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 20 Dec 2013 Link to this post

    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!
  10. giord
    giord avatar
    8 posts
    Member since:
    Oct 2013

    Posted 20 Dec 2013 Link to this post

    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?
  11. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 23 Dec 2013 Link to this post

    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!
  12. giord
    giord avatar
    8 posts
    Member since:
    Oct 2013

    Posted 23 Dec 2013 Link to this post

    Works like a charm, thank you!

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

Back to Top
Kendo UI is VS 2017 Ready