[Solved] How to define which footer icon should be active

[Stewart]

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

[Steve]

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.

[Stewart]

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