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

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

5 Answers 1080 Views
Application
This is a migrated thread and some comments may be shown as answers.
Carl
Top achievements
Rank 1
Carl asked on 22 May 2012, 07:26 AM
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?

5 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 23 May 2012, 03:46 PM
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!
0
Carl
Top achievements
Rank 1
answered on 23 May 2012, 10:48 PM
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.


 

0
Joon
Top achievements
Rank 1
answered on 24 May 2012, 11:21 AM
I originally asked a related question here but now moved it to the NavBar section. Thanks.
0
Petyo
Telerik team
answered on 28 May 2012, 09:44 AM
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!
0
Ricardo de Assuncao Goncalves
Top achievements
Rank 1
answered on 18 Jan 2016, 12:12 PM

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

}

Tags
Application
Asked by
Carl
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Carl
Top achievements
Rank 1
Joon
Top achievements
Rank 1
Petyo
Telerik team
Ricardo de Assuncao Goncalves
Top achievements
Rank 1
Share this question
or