How can navigate to different page when clicking on TabStrip tabs?

[Ron]

Hi

I have a TabStrip control on my page but I would like to bind each tab to a separate page as opposed to put all the views in the same page:

<div data-role="footer">

    <div data-role="tabstrip">

        <a href="/Clients" data-icon="contacts">Clients</a>

        <a href="/Home" data-icon="organize">Tickets</a>

        <a href="/Settings" data-icon="settings">Settings</a>

    </div>

</div>

But when I click on the tabs I see strange URL results. For example if I am in <domain>/Clients page and click on Home the URL that is generated will be <domain>/Clients#/Home instead of <domain>/Home.

Could you let me know what I am doing wrong?

Thanks in advance
Ron Farko

[Kamen Bundev]

Hi Ron,

You're not doing anything wrong. Kendo UI Mobile operates as a single page application - every View you link is loaded and initialized within the Application. If the link points to an external page (remote view), the page is loaded with Ajax, everything but the body in it is stripped and the first View initialized within the already existing Kendo UI Mobile Application. The navigation is handled by the Kendo History plugin which is using hashes for the URLs (the HTML5 History API is very unreliable across the different mobile platforms). If you want to directly navigate to an external page - use data-rel="external" attribute on the link.

All the best,
Kamen Bundev
the Telerik team

[Ron]

Thank you Kamen

The External attribute solved the problem.

Regards
Ron

[Andrea]

Hi,
I have the same problem. I use now  data-rel="external" and it's works but the external page use the entire screen instead I want to see always the tabstrip menu. Is it possible?

thank you

[Kiril Nikolov]

Hello Andrea,

As Kamen already explained - Kendo UI Mobile works as a SPA (single page application). Using date-rel="external" basically navigates to a address that is outside of the application, therefore the tabstrip will not be visible and the whole layout of the application. 

If you want to navigate to a remote view, you can check this documentation article explaining how this works within Kendo UI Mobile:

http://docs.kendoui.com/getting-started/mobile/application#remote-views
 
Regards,
Kiril Nikolov
Telerik