This question is locked. New answers and comments are not allowed.
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..
On the WP theres only the plain html, no style or javascript from kendo.
Greetings,
Tim
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