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

[Carl]

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?

[Iliana Dyankova]

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

[Carl]

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.


 

[Joon]

I originally asked a related question here but now moved it to the NavBar section. Thanks.

[Petyo]

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

[Ricardo de Assuncao Goncalves]

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");         

}