Kendo UI auto theme feature only working in Iphone

3 posts, 0 answers
  1. Travis
    Travis avatar
    2 posts
    Member since:
    Oct 2012

    Posted 16 Nov 2012 Link to this post

    I copied the demo that you provided for kendo ui mobile and icenium using a basic list view. The problem is that when i view in the simulator it works fine as the Iphone but wont even load as anyother device. I found a thread talking about moving the covdova.js below the kendo js. This does allow the app to load on all devices but the android theme is not applied to the android devices only the IOS. Is there a problem a soultion to this? Please see the code below:(the sytels are in the main.css) 

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta charset="utf-8" />
            <script src="cordova.js"></script>  
            <script src="kendo/js/jquery.min.js"></script>
            <script src="kendo/js/kendo.mobile.min.js"></script>    
            <script src="scripts/hello-world.js"></script>
           
            <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
            <link href="styles/main.css" rel="stylesheet" />
        </head>
        <body>
            <div data-role="view" id="tabstrip-home" data-title="Hello World!">
          <div data-role="view" data-title="Destinations" id="listview-home">
      <ul data-role="listview" data-style="inset" data-type="group">
            <li>
                Africa
                <ul>
                    <li ><a>Nairobi</a></li>
                </ul>
            </li>
            <li>
                America
                <ul>
                    <li ><a>Boston</a></li>
                    <li ><a>Ottawa</a></li>
                    <li ><a>San Francisco</a></li>
                </ul>
            </li>
            <li>
                Asia
                <ul>
                    <li ><a>Bombay</a></li>
                </ul>
            </li>
            <li>
                Australia
                <ul>
                    <li ><a>Melbourne</a></li>
                    <li ><a>Sydney</a></li>
                </ul>
            </li>
            <li>
                Europe
                <ul>
                    <li ><a>Cannes</a></li>
                    <li ><a>Liverpool</a></li>
                    <li ><a>London</a></li>
                </ul>
            </li>
        </ul>
                
    </div>
                <
                <script>
        var app = new kendo.mobile.Application(document.body);
    </script>
              </div>  
            

            <div data-role="view" id="tabstrip-uiinteraction" data-title="UI Interaction">
                <h1>Say Hello!</h1>
                <div id='helloWorldInput'>
                    <label for="txtName" style="display: inline-block;">Enter your name:</label>
                    <input type="text" id="txtName" value="" />
                </div>
                <div id='helloWorldText' style="display:block;"></div>
                <div class="buttonArea">
                    <a id="resetButton" data-role="button" data-click="sayHelloReset" data-icon="refresh">Reset</a>
                    <a id="submitButton" data-role="button" data-click="sayHello" data-icon="compose">Submit</a>
                </div>
            </div>

            <div data-role="view" id="tabstrip-geolocation" data-title="Geolocation">
                <h1>My Location</h1>
                <div id="geoLocationContainer">
                    <div id="myLocation">Unable to get location information. Please check your network connection and try again.</div>
                    <a id="refreshMap" data-role="button" data-click="getLocation" data-icon="refresh">Refresh Location</a>
                    <div id="map_canvas"></div>
                </div>
            </div>

            <div data-role="layout" data-id="mobile-tabstrip">
                <header data-role="header">
                    <div data-role="navbar">
                        <span data-role="view-title"></span>
                    </div>
                </header>

                <div data-role="footer">
                    <div data-role="tabstrip">
                        <a href="#tabstrip-home" data-icon="home">Home</a>
                        <a href="#tabstrip-uiinteraction" data-icon="share">UI Interaction</a>
                        <a href="#tabstrip-geolocation" data-icon="globe">Geolocation</a>
                    </div>
                </div>
            </div>

             <div data-role="layout" data-id="mobile-tabstrip" data-platform="android">
                <div data-role="footer">
                    <div data-role="tabstrip">
                        <a href="#tabstrip-home" data-icon="home">Home</a>
                        <a href="#tabstrip-uiinteraction" data-icon="share">UI Interaction</a>
                        <a href="#tabstrip-geolocation" data-icon="globe">Geolocation</a>
                    </div>
                </div>
            </div> 

            <script>
                var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
            </script>
        </body>
    </html>
  2. Jordan
    Admin
    Jordan avatar
    197 posts

    Posted 19 Nov 2012 Link to this post

    Hi Travis,

    Glad you tried Icenium and hope you will master it pretty fast.

    In your code the issue is that you probably messed up copy and paste as result it tries to create kendo.mobile.Application twice as well their is open '<' at the middle that makes HTML invalid.

    Use fixed code bellow to achieve native look for iOS and Android:

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta charset="utf-8" />
            <script src="cordova.js"></script>
            <script src="kendo/js/jquery.min.js"></script>
            <script src="kendo/js/kendo.mobile.min.js"></script>
            <script src="scripts/hello-world.js"></script>
     
            <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
            <link href="styles/main.css" rel="stylesheet" />
        </head>
        <body>
            <div data-role="view" id="tabstrip-destinations" data-title="Destinations">
                <div id='helloWorldInput'>
                    <ul data-role="listview" data-style="inset" data-type="group">
                        <li>
                            Africa
                            <ul>
                                <li >
                                    <a>Nairobi</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            America
                            <ul>
                                <li >
                                    <a>Boston</a>
                                </li>
                                <li >
                                    <a>Ottawa</a>
                                </li>
                                <li >
                                    <a>San Francisco</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            Asia
                            <ul>
                                <li >
                                    <a>Bombay</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            Australia
                            <ul>
                                <li >
                                    <a>Melbourne</a>
                                </li>
                                <li >
                                    <a>Sydney</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            Europe
                            <ul>
                                <li >
                                    <a>Cannes</a>
                                </li>
                                <li >
                                    <a>Liverpool</a>
                                </li>
                                <li >
                                    <a>London</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
     
            <div data-role="layout" data-id="mobile-tabstrip">
                <header data-role="header">
                    <div data-role="navbar">
                        <span data-role="view-title"></span>
                    </div>
                </header>
     
                <div data-role="footer">
                    <div data-role="tabstrip">
                        <a href="#tabstrip-destinations" data-icon="globe">Destinations</a>
                    </div>
                </div>
            </div>
     
            <div data-role="layout" data-id="mobile-tabstrip" data-platform="android">
                <div data-role="footer">
                    <div data-role="tabstrip">
                        <a href="#tabstrip-destinations" data-icon="globe">Destinations</a>
                    </div>
                </div>
            </div>
     
            <script>
                var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
            </script>
        </body>
    </html>


    All the best,
    Jordan
    the Telerik team

    Share feedback and vote for features on our Feedback Portal.
    Want some Kendo UI online training - head over to Pluralsight.
  3. Travis
    Travis avatar
    2 posts
    Member since:
    Oct 2012

    Posted 19 Nov 2012 Link to this post

    Thank you its working perfectly.
Back to Top