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

Kendo UI auto theme feature only working in Iphone

2 Answers 27 Views
AppBuilder Windows client
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Travis
Top achievements
Rank 1
Travis asked on 16 Nov 2012, 09:42 PM
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 Answers, 1 is accepted

Sort by
0
Jordan
Telerik team
answered on 19 Nov 2012, 10:11 AM
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.
0
Travis
Top achievements
Rank 1
answered on 19 Nov 2012, 02:18 PM
Thank you its working perfectly.
Tags
AppBuilder Windows client
Asked by
Travis
Top achievements
Rank 1
Answers by
Jordan
Telerik team
Travis
Top achievements
Rank 1
Share this question
or