Setting data-title for a div with data-role=view

6 posts, 0 answers
  1. Carl
    Carl avatar
    195 posts
    Member since:
    Oct 2012

    Posted 22 May 2012 Link to this post

    On a div with data-role="view", is it possible to set the data-title attribute with the output from a template, or the output of a JavaScript function?

    Or is the only way to set the data-title dynamically by using data-show to specify a JavaScript function as eventhandler of some kind?

    Is there a code snippet or demo for how to do that?
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 23 May 2012 Link to this post

    Hi Carl,

    You could achieve the needed functionality using title() method of the Kendo UI Mobile NavBar. For example:
    <div data-role="view" id="navbar-home" data-title="Contacts" data-show="changeTitle">
      <header data-role="header">
        <div data-role="navbar" id="navbar">
          <span data-role="view-title">Contacts</span>
          ...
        </div>
      </header>
    </div>
    <script>
    window.kendoMobileApplication = new kendo.mobile.Application(document.body);
       function changeTitle(){
         $("#navbar").data("kendoMobileNavBar").title("MyCustomTitle");
       }
    </script>
     
    I hope this helps. 

    Kind regards,
    Iliana Nikolova
    the Telerik team
    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. Carl
    Carl avatar
    195 posts
    Member since:
    Oct 2012

    Posted 23 May 2012 Link to this post

    OK, thank you, I did get that working.

    But now I have a similar problem when attempting to dynamically set the text of a tab in a tabstrip.  I tried similar analogous approach to setting the title for a view.

    I did get it to work partially such that I could set dynamically set the text of the tab, but then the tab icon is destroyed and missing.  Examining the output source code and attempting to set the text on the tab's <a> element, km-text class <span> element did not work.

    I checked the documentation for tabs of a tabstrip but the documentation in general for the KendoUI API is so limited that it is almost useless for any advanced JavaScript programming control of KendoUI.

    So what is the correct way to dynamically via JavaScript set the text of the tab without destroying the tab icon?

    And the most important question: When will there be comprehensive and useful documentation for the API?

    Sorry, but it is really not very productive as a developer to have ask a question for every issue like this because of missing and incomplete documentation.


     

  5. Joon
    Joon avatar
    30 posts
    Member since:
    Aug 2012

    Posted 24 May 2012 Link to this post

    I originally asked a related question here but now moved it to the NavBar section. Thanks.
  6. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 28 May 2012 Link to this post

    Hello,

    The reason why there is no documentation present is because such feature is not present. Currently, the mobile tabstrip widget does not expose an API for changing the tabs' text. If you consider this feature an important one, you can create an entry at our UserVoice tracker

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. Ricardo de Assuncao Goncalves
    Ricardo de Assuncao Goncalves avatar
    13 posts
    Member since:
    Feb 2010

    Posted 18 Jan Link to this post

    Assuming you are calling your application instance: 

    app.application = new kendo.mobile.Application( .....

    In your  view data-show="ShowEditPage":

    function ShowEditPage(e) {                  

           var navbar = app.application.view().header.find(".km-navbar").data("kendoMobileNavBar");         

           navbar.title("changed");         

    }

Back to Top
Kendo UI is VS 2017 Ready