Hi
I have a search screen, that lists a amount of contacts, when a user clicks on the details button on one of the list items, I want to load another view with the details of the contact. However I am not even getting data to display. I am not sure how I can go about troubleshooting this problem. I have referenced this forum post ListView not working with data-bind but to no avail.
I have also created a JSFiddle
Thanks
Rihan
I have a search screen, that lists a amount of contacts, when a user clicks on the details button on one of the list items, I want to load another view with the details of the contact. However I am not even getting data to display. I am not sure how I can go about troubleshooting this problem. I have referenced this forum post ListView not working with data-bind but to no avail.
<
div
data-role
=
"view"
id
=
"contactView"
data-model
=
"ContactViewModel"
data-show
=
"contactShow"
>
<
h1
id
=
"ContactHallo"
>Contact Screen</
h1
>
<
ul
id
=
"contactDetailList"
data-role
=
"listview"
data-style
=
"inset"
>
</
ul
>
</
div
>
function
contactShow(e) {
ContactViewModel.LoadContacts();
};
<script id=
"contactDetailtemplate"
type=
"text/x-kendo-template"
>
<a href=
"tel:#:data.MobileNumber#"
>#:data.MobileNumber#</a>
</script>
var
ContactViewModel = kendo.observable({
ContactId:
null
,
TestData: [{ AssociatedContactType:
"n\/a"
, AssociatedProperties: [], EmailAddress:
"n\/a"
, FName:
"User1"
, HomeNumber:
"n\/a"
, LName:
"LastName"
, MobileNumber:
"+27 21 0823219213"
, WorkNumber:
"n\/a"
}],
ContactData:
new
kendo.data.DataSource.create({ data:
this
.TestData }),
LoadContacts:
function
(){
var
templatePart = $(
"#contactDetailtemplate"
).text();
$(
"#contactDetailList"
).kendoMobileListView({
dataSource:
this
.ContactData,
template: templatePart,
endlessScroll:
true
,
scrollTreshold: 30
});
}
});
Thanks
Rihan