How to define which footer icon should be active

3 posts, 2 answers
  1. Stewart
    Stewart avatar
    37 posts
    Member since:
    Oct 2013

    Posted 11 Nov 2013 Link to this post

    Hello,

    I have a footer as follows:

    <div data-role="footer" id="footer">
        <div data-role="tabstrip">
            <a href="#tabstrip-home" data-icon="recents">Agenda</a>
            <a href="#tabstrip-workshops" data-icon="organize">Workshops</a>
            <a href="#tabstrip-wall" data-icon="contacts">Wall</a>
            <a href="#tabstrip-hospitality" data-icon="about">Hospitality</a>
            <a href="#tabstrip-logout" data-icon="delete">Log out</a>
        </div>
    </div>

    When I am on the #tabstrip-workshops view, the Workshops icon (organize) is correctly selected. However I have a "subview" called "'tabstrip-workshopDetails" that shows the details of a workshop. When that is shown, the footer defaults back to showing the Agenda icon (recents).

    My question is how do I from within #tabstrip-workshopDetails (or more likely the JS that loads when that tab is shown) set the Workshops icon to be active rather than the default.

    Much appreciated as always,
    Stewart
  2. Answer
    Steve
    Admin
    Steve avatar
    10941 posts

    Posted 12 Nov 2013 Link to this post

    Hi Stewart,

    You can use the switchTo method of the Kendo UI TabStrip widget. For more information and a code snippet, check the relevant documentation here.

    Regards,
    Steve
    Telerik
    You've missed the Icenium Visual Studio Integration keynote? It has been recorded and posted here.
    Looking for tips & tricks directly from the Icenium team? Check out our blog!
    Share feedback and vote for features on our Feedback Portal.
  3. Answer
    Stewart
    Stewart avatar
    37 posts
    Member since:
    Oct 2013

    Posted 12 Nov 2013 Link to this post

    Thanks Steve, that did the job! Nice one.

    For anyone reading this later, if you are building your app based on the Kendo UI demo then rather than the code on http://docs.kendoui.com/api/mobile/tabstrip#methods-switchTo use the following:

    // Get the tabstrip from already defined app.application
    var tabstrip = app.application.view().footer.find(".km-tabstrip").data("kendoMobileTabStrip");
      
    // Switch to my tabstrip (replace "home" with whatever your is called!)
    tabstrip.switchTo("#tabstrip-home");
Back to Top