This is a migrated thread and some comments may be shown as answers.

SplitView navigation issue

1 Answer 40 Views
SplitView
This is a migrated thread and some comments may be shown as answers.
Romano
Top achievements
Rank 1
Romano asked on 25 May 2014, 05:53 PM
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>
<html>
<head>
    <title></title>
    <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>
  <style>
    html, body, #phoneApp {
      height: 100%;
    }
  </style>
</head>

    <body>
        <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>
                    
                    <div data-role="layout" data-id="leftLayout">
                        <div data-role="header">
                          <div data-role="navbar">
                              TEST APP
                          </div>
                        </div>
                    </div>
                </div>
                <div data-role="pane" id="right" data-layout="rightLayout">
                    <div data-role="view" id="rightOne">
                       One
                    </div>
                    <div data-role="view" id="rightTwo">
                       Two
                    </div>
                    <div data-role="layout" data-id="rightLayout">
                      <div data-role="header">
                          <div data-role="navbar">
                              &nbsp;
                          </div>
                      </div>
                    </div>
                </div>        
           </div>
        </div>
        <div id="phoneApp" style="display:none;">
           <div data-role="view">
               <h1>Phone Home</h1>
           </div>
           <div data-role="view" id="about">
               <h1>Phone About</h1>
           </div>
           <div data-role="layout" data-id="phoneDefault">
               <div data-role="header">
                  <div data-role="navbar">
                        Phone App
                  </div>                       
               </div>
               <!--Content-->
               <div data-role="footer">
                   <div data-role="tabstrip">
                     <a href="" data-icon="home">Home</a>
                     <a href="#about" data-icon="info">About</a>
                   </div>
               </div>
           </div>
        </div>
        <script>
            $(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";
                
                console.log(appElement);
                
                app = new kendo.mobile.Application(appElement, {
                    transition: 'slide'
                });
                
                //Adjust visibility of proper app container
                appElement.show();
            });
        </script>
    </body>
</html>

1 Answer, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 26 May 2014, 08:29 AM
Hello Romano,

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

Regards,
Petyo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
SplitView
Asked by
Romano
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Share this question
or