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

can't select tabstrip badge and update it

2 Answers 116 Views
TabStrip (Mobile)
This is a migrated thread and some comments may be shown as answers.
Radu
Top achievements
Rank 1
Radu asked on 19 Dec 2013, 08:20 PM
hello there!
i have 3 views "menu", "details" and "cart" which have a header and a footer. The tabstrip only has 2 tabs : "menu" and "cart". 

<div data-role="view" id="menu" data-title="Menu"  data-layout="myLayout" data-model="viewModel">
   here i have a listview with the category names and when i click on an "li" it goes to the #details view where products are filtered by the category name
</div>

<div  id="details" data-role="view" data-title="Details" data-layout="myLayout" data-transition="slide:left" data-model="viewModel" >
    <h3 class="item-title">#: name #</h3>
    <p class="item-info">#: description #</p>
    <a data-role="button" data-item-id="#:id#" class="details-link fa"  data-icon="cart" data-bind="click: addToCart" >#: price # lei</a>
</div>

the footer from myLayout looks like this:

<footer data-role="footer">
<div data-role="tabstrip" id="badgeIcon">
    <a href="#menu" class="fa" data-icon="home">Menu</a>
    <a href="#cart" class="fa" data-icon="cart" >Cart</a>
</div>
</footer>

i have onInit function which works and initializes the badge:

function onInit(e) {
 var tabstrip = e.layout.footer.find(".km-tabstrip").data("kendoMobileTabStrip");
 tabstrip.badge(1,0);
}

And the addToCart function is this
function addToCart(e) {
var tabstrip = $("#badgeIcon").data("kendoMobileTabStrip");
tabstrip.badge(1, +tabstrip.badge(1) + 1);

....rest of function which works perfectly...
}

The app loads in the #menu view from where it goes to #details view,  and then,  when i click on a #li it crashes and gives me an error on the " tabstrip.badge(1, +tabstrip.badge(1) + 1); " line

Uncaught TypeError: Cannot call method 'badge' of undefined 

If i load the app in the #details view ( index.html#details ) with all the items shown, it works and updates the cart badge, but i want to filter them and thats why i have the #menu view first.

I'm using the latest kendo latest release with jQuery1.9.1

Please give me your input and thanks in advance :)








2 Answers, 1 is accepted

Sort by
0
Accepted
Alexander Valchev
Telerik team
answered on 20 Dec 2013, 09:21 AM
Hello Radu,

Layout elements are copied into the View which is why it is not recommended to use IDs in the layout.
Please try to remove the ID of the tabstrip and select it through the View's properties. For example:
function addToCart(e) {
  var view = e.sender.view(),
    tabstrip = view.footer.find(".km-tabstrip").data("kendoMobileTabStrip");
 
  console.log(tabstrip.badge); //should output a function
}


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
Radu
Top achievements
Rank 1
answered on 20 Dec 2013, 11:43 AM
Thanks for your support! This did the trick ! You have a great product with great support and for sure a great future !

Best regards!
Tags
TabStrip (Mobile)
Asked by
Radu
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Radu
Top achievements
Rank 1
Share this question
or