I have a list view (#menuList). As soon as i configure a datasource including a schema, i get the following js error when i click an item:
Unable to get value of the property 'getByUid': object is null or undefined
My page:
<!DOCTYPE html>
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
>
<
title
>Compano Online Software</
title
>
<
script
src
=
"http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"http://cdn.kendostatic.com/2012.1.124/js/kendo.all.min.js"
type
=
"text/javascript"
></
script
>
<
script
src
=
"http://cdn.kendostatic.com/2012.1.124/js/kendo.mobile.min.js"
type
=
"text/javascript"
></
script
>
<
link
href
=
"/styles/kendo.common.min.css"
rel
=
"stylesheet"
/>
<
link
href
=
"/styles/kendo.mobile.all.min.css"
rel
=
"stylesheet"
/>
<
script
type
=
"text/javascript"
>
var vn = "prd.item";
var tm = "<
b
>${SalesOrganizationShortDescription} ${Code}</
b
>-<
b
>${Description}</
b
><
br
/>€ ${PurchasePricePerUtilizationUnit}";
function onError(e)
{
}
function menuClick(e) {
vn = e.dataItem.ViewName;
tm = e.dataItem.Template;
var list = $("#list").data("kendoMobileListView");
if (list)
list._refresh();
}
function initList() {
$("#list").kendoMobileListView({
dataSource: {
transport: {
read: {
type: "POST",
url: "/dv.ashx",
data: { vn: vn },
dataType: "json"
}
},
serverPaging: true,
serverSorting: true,
pageSize: 20,
schema: {
data: "d",
total: "count"
},
error: onError
},
template: tm
});
}
$(document).ready(function () {
var app = new kendo.mobile.Application(document.body);
$("#menuList").kendoMobileListView({
dataSource: {
transport: {
read: {
type: "POST",
url: "/webservices/mobile.asmx/GetMenuList",
contentType: "application/json; charset=utf-8",
data: {},
dataType: "json"
}
},
schema: {
data: "d",
model: {
fields: {
__type: { type: "string" },
ViewName: { type: "string" },
Description: { type: "string" },
Template: { type: "string" }
}
}
}
},
template: "<
a
href
=
'tabstrip-grid'
>${Description}</
a
>",
click: menuClick
});
});
</
script
>
</
head
>
<
body
>
<
div
data-role
=
"view"
id
=
"tabstrip-home"
data-title
=
"Home"
data-layout
=
"mobile-tabstrip"
>
<
ul
data-style
=
"inset"
id
=
"menuList"
></
ul
>
</
div
>
<
div
data-role
=
"view"
id
=
"tabstrip-grid"
data-title
=
"Overzicht"
data-init
=
"initList"
data-layout
=
"mobile-tabstrip"
>
<
div
id
=
"list"
></
div
>
</
div
>
<
div
data-role
=
"layout"
data-id
=
"mobile-tabstrip"
>
<
header
data-role
=
"header"
>
<
div
data-role
=
"navbar"
>
<
a
class
=
"nav-button"
data-align
=
"left"
data-role
=
"backbutton"
>Back</
a
>
<
span
data-role
=
"view-title"
></
span
>
<
a
data-align
=
"right"
data-role
=
"button"
class
=
"nav-button"
href
=
"#index"
>Index</
a
>
</
div
>
</
header
>
<
div
data-role
=
"footer"
>
<
div
data-role
=
"tabstrip"
>
<
a
href
=
"#tabstrip-home"
data-icon
=
"home"
>Home</
a
>
<
a
href
=
"#tabstrip-grid"
data-icon
=
"favorites"
>Overzicht</
a
>
<
a
href
=
"#tabstrip-detail"
data-icon
=
"favorites"
>Details</
a
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>