Webapplication Layout broke on WP8

2 posts, 0 answers
  1. Tim
    Tim avatar
    1 posts
    Member since:
    Sep 2013

    Posted 03 Sep 2013 Link to this post

    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
  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 06 Sep 2013 Link to this post

    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!
  3. DevCraft banner
Back to Top