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

5 posts, 1 answers
  1. Ron
    Ron avatar
    14 posts
    Member since:
    Jan 2013

    Posted 25 Jan 2013 Link to this post

    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

  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 25 Jan 2013 Link to this post

    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
    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. Answer
    Ron
    Ron avatar
    14 posts
    Member since:
    Jan 2013

    Posted 25 Jan 2013 Link to this post

    Thank you Kamen

    The External attribute solved the problem.

    Regards
    Ron
  5. Andrea
    Andrea  avatar
    1 posts
    Member since:
    Apr 2011

    Posted 30 Sep 2013 Link to this post

    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
  6. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 02 Oct 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready