Webapplication Layout broke on WP8

[Tim]

Hi,

I tried to make some webpages for mobile devices with kendoUI mobile. On Android an IOS it works properly but then I tried on WP8 and everything was broken. I was not able to spot the problem until now so hopefully someone can help me..

<div data-role="drawer" id="my-drawer" style="width: 96%;" data-views="['start']">

        <ul data-role="listview" data-type="group">

            <li>

                <ul>


                   <li data-icon="" onclick="colorThis(this)" style="cursor:pointer">One</li>

                   <li data-icon="" onclick="colorThis(this)" style="cursor:pointer">Two</li>

                   <li data-icon="" onclick="colorThis(this)" style="cursor:pointer">Three</li>

                   <li data-icon="" onclick="colorThis(this)" style="cursor:pointer">Four</li>

                   <li data-icon="" onclick="colorThis(this)" style="cursor:pointer">Five</li>

                </ul>

            </li>

            <li>

                <ul>

                   <li data-icon="" style="cursor:pointer" id ="" onclick="colorThis(this)">Six</li>

                   <li data-icon="" style="cursor:pointer" id ="" onclick="colorThis(this)">Seven</li>

                   <li data-icon="" style="cursor:pointer" id ="" onclick="colorThis(this)">Eight</li>

                   <li data-icon="" style="cursor:pointer" id ="" onclick="colorThis(this)">Nine</li>

                   <li data-icon="" style="cursor:pointer" id ="" onclick="colorThis(this)">Ten</li>

                   <li data-icon="" style="cursor:pointer" id ="" onclick="colorThis(this)">Eleven</li>

                </ul>

            </li>

        </ul>

    </div>

    <div data-role="layout" data-id="drawer-layout">

        <div data-role="header">

            <div data-role="navbar">

                <a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="search" data-align="left"></a>

                <span data-role="view-title"></span>

                <a data-align="right" data-role="button" class="nav-button" data-rel="external" data-icon="home" href="home.aspx"></a>

            </div>

        </div>

    </div>

    <div id = "start" runat="server" data-title="Aufgaben" data-role="view" data-layout="drawer-layout" style="">

            <div id="maindiv" data-role="page" style="display:block; text-align:center; height:100%" >

                <asp:Label runat="server" ID ="lbl_editorInfo" Text=""></asp:Label><br /><br />

                <asp:Label runat="server" ID ="lbl_taskStatus" Text="success"></asp:Label>

                <div style="width:99%"><input type="text" ID="search_txt" runat="server" class="km-text full" /></div><br />

                <ul id="taskList" style="width:99%"></ul>

            </div>

            <script type="text/x-kendo-tmpl" id="template">

                <div id="div_templ" style="cursor: pointer;" onclick="" >

                    <div style="overflow:hidden; margin-top:5px; text-overflow:ellipsis; ">

                        <span class="" style="width:25%"></span><span class="" style="" title=""></span>

                    </div>

                    <div style="overflow:hidden; margin-top:2px; text-overflow:ellipsis;" >

                        <span class="" style="width:25%"></span><span class="" style="" title=""></span>

                    </div>

                </div>

                <div style="clear:both" ></div>

            </script>

 

            <script type="text/javascript">

                var dataSource = new kendo.data.DataSource({

                    transport:

                {

                    read:

                    {

                        url: url,

                        contentType: "application/json; charset=utf-8",

                        type: "GET",

                        dataType: "json"

                    }

                },

                    schema:

                {

                    data: 'GetDATAResult.RootResults',

                    total: 'GetDATAResult.TotalCount'

                },

                    pageSize: 10,

                    serverPaging: true

                });

 

                function checkTheBox(chkBoxID) {

                    var theBox = document.getElementById(chkBoxID);

                    if (theBox.checked) {

                        theBox.checked = false;

                    }

                    else {

                        theBox.checked = true;

                    }

                    colorThis(theBox);

                }

 

                function colorThis(t) {

                    if (!($(t).hasClass("background_orange"))) {

                        $(t).addClass("background_orange");

                    }

                    else {

                        $(t).removeClass("background_orange");

                    }

                }

 

                $("#taskList").kendoMobileListView({

                    dataSource: dataSource,

                    template: $("#template").text()

//                    filterable: {

//                        autoFilter: false,

//                        placeholder: "Suche..",

//                        ignoreCase: true

//                    }

                });

 

                var app = new kendo.mobile.Application($(document.body),

                {

//                    platform: {

//                        device: "wp",       // Mobile device, can be "ipad", "iphone", "android", "fire", "blackberry", "wp", "meego"

//                        name: "wp",          // Mobile OS, can be "ios", "android", "blackberry", "wp", "meego"

//                        ios: false,            // Mobile OS name as a flag

//                        majorVersion: 5,      // Major OS version

//                        minorVersion: "0.0",  // Minor OS versions

//                        flatVersion: "500",   // Flat OS version for easier comparison

//                        appMode: false,       // Whether running in browser or in AppMode/PhoneGap/Icenium.

//                        tablet: false        // If a tablet - tablet name or false for a phone.

//                    },

                    loading: "<h1>Loading...</h1>"

                });

            </script>

             

         

   </div>

On the WP theres only the plain html, no style or javascript from kendo.

Greetings,
Tim

[Petyo]

Hi,

the code itself does not seem to have any obvious errors. I would like to suggest that you follow Kendo UI general troubleshooting steps in order to verify that no javascript errors or missing resources are present. 

Regards,
Petyo
Telerik