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

Webapplication Layout broke on WP8

1 Answer 44 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Tim
Top achievements
Rank 1
Tim asked on 03 Sep 2013, 11:06 AM
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

1 Answer, 1 is accepted

Sort by
0
Petyo
Telerik team
answered on 06 Sep 2013, 08:06 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
General Discussions
Asked by
Tim
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Share this question
or