SplitView navigation issue

2 posts, 0 answers
  1. Romano
    Romano avatar
    1 posts
    Member since:
    Jul 2011

    Posted 25 May 2014 Link to this post

    I ttry to set up a sample for an universal app. Currently I'm stuck with navigation inside the splitview. The console logs an error saying that the links "#rightOne" and "#rightTwo" are not found. Here is my code (testet in kendo ui dojo). The code is adjusted to allways show the tablet code:

    <!DOCTYPE html>
        <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.default.min.css" rel="stylesheet" />
        <link href="http://cdn.kendostatic.com/2014.1.416/styles/kendo.mobile.all.min.css" rel="stylesheet" />
        <script src="http://cdn.kendostatic.com/2014.1.416/js/jquery.min.js"></script>
        <script src="http://cdn.kendostatic.com/2014.1.416/js/kendo.all.min.js"></script>
        html, body, #phoneApp {
          height: 100%;

            <div id="tabletApp" style="display:none;">
                <div data-role="splitview">
                    <div data-role="pane" id="left" data-layout="leftLayout">
                        <div data-role="view">
                            <a href="#rightOne" data-target="right">One</a>
                            <a href="#rightTwo" data-target="right">Two</a>
                        <div data-role="layout" data-id="leftLayout">
                            <div data-role="header">
                              <div data-role="navbar">
                                  TEST APP
                    <div data-role="pane" id="right" data-layout="rightLayout">
                        <div data-role="view" id="rightOne">
                        <div data-role="view" id="rightTwo">
                        <div data-role="layout" data-id="rightLayout">
                          <div data-role="header">
                              <div data-role="navbar">
            <div id="phoneApp" style="display:none;">
               <div data-role="view">
                   <h1>Phone Home</h1>
               <div data-role="view" id="about">
                   <h1>Phone About</h1>
               <div data-role="layout" data-id="phoneDefault">
                   <div data-role="header">
                      <div data-role="navbar">
                            Phone App
                   <div data-role="footer">
                       <div data-role="tabstrip">
                         <a href="" data-icon="home">Home</a>
                         <a href="#about" data-icon="info">About</a>
                $(function() {
                    var app,
                    //Must be mobile and tablet
                    isTablet = kendo.support.mobileOS && kendo.support.mobileOS.tablet,
                        appElement = null,
                        appLayout = null;

                    console.log("mobileOS Info/isTablet", kendo.support.mobileOS, isTablet);

                    appElement = $("#tabletApp");
                    appLayout = (isTablet) ? null : "phoneDefault";
                    app = new kendo.mobile.Application(appElement, {
                        transition: 'slide'
                    //Adjust visibility of proper app container
  2. Petyo
    Petyo avatar
    2437 posts

    Posted 26 May 2014 Link to this post

    Hello Romano,

    The mobile app automatically handles navigation for the widgets. If you mark the links as button widgets the example runs as expected

    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top