Reference to TabStrip Using JQuery

5 posts, 1 answers
  1. Jay
    Jay avatar
    23 posts
    Member since:
    Jul 2013

    Posted 13 Jan 2014 Link to this post

    I'm encountering problems retrieving my app's tab strip using JQuery. Sometimes it works, sometimes it doesn't. Code snippet below:

    function updateBadges() {
            console.log("Updating badges");
            var tabstrip = $("#tabstrip").data("kendoMobileTabStrip");
            if (tabstrip) {
                var reminderCount = getRemindersDataSource().view().length;
                console.log(reminderCount);
                if (reminderCount > 0)
                    tabstrip.badge(2, reminderCount);
                else
                    tabstrip.badge(2, false);
            } else {
                console.log("Can't find tabstrip");
            }
        }

    Tabstrip is defined as:

    <div id="tabstrip" data-role="tabstrip">
    etc

    Are there any constraints to be followed?

    Thanks.
  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 14 Jan 2014 Link to this post

    Hi Jay,

    Your code looks okay, there must be something else at work in your case. Can you share some more code, like when do you update the badges or maybe try to reproduce the issue in a jsBin and send it over?

    Regards,
    Kamen Bundev
    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. Jay
    Jay avatar
    23 posts
    Member since:
    Jul 2013

    Posted 14 Jan 2014 Link to this post

    I'll see if I can replicate in JsBin.

    Meanwhile I read the following thread: http://www.kendoui.com/forums/kendo-ui-mobile/tabstrip/can't-select-tabstrip-badge-and-update-it-.aspx. I followed answer recommendation and moved code snippet to view class and updated reference from:
    var tabstrip = $("#tabstrip").data("kendoMobileTabStrip");
    to:
    var tabstrip = e.sender.view().footer.find(".km-tabstrip").data("kendoMobileTabStrip");

    This worked. However, I need the snippet to be user-action-independent and view-independent thus I've placed it outside a view class (it's called on change of data source). Is there any more general or alternate way to get a reference?

    Thanks.
  5. Jay
    Jay avatar
    23 posts
    Member since:
    Jul 2013

    Posted 14 Jan 2014 Link to this post

    Please see JsBin http://jsbin.com/ImiyUHas/2/edit. Unable to get a reference using #tabstrip when at other than the first tab.

    Thanks.
  6. Answer
    Jay
    Jay avatar
    23 posts
    Member since:
    Jul 2013

    Posted 14 Jan 2014 Link to this post

    Refactored and put everything in their proper places. Thanks.
Back to Top
Kendo UI is VS 2017 Ready