can't select tabstrip badge and update it

3 posts, 1 answers
  1. Radu
    Radu avatar
    2 posts
    Member since:
    Dec 2013

    Posted 19 Dec 2013 Link to this post

    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. Answer
    Radu
    Radu avatar
    2 posts
    Member since:
    Dec 2013

    Posted 20 Dec 2013 Link to this post

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

    Posted 20 Dec 2013 Link to this post

    Thanks for your support! This did the trick ! You have a great product with great support and for sure a great future !

    Best regards!
Back to Top