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

Unable to bind ModelView to a ListView

1 Answer 73 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Rihan asked on 31 Jan 2013, 12:17 PM

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">
function contactShow(e) {
<script id="contactDetailtemplate" type="text/x-kendo-template">
    <a href="tel:#:data.MobileNumber#">#:data.MobileNumber#</a>
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{ data: this.TestData }),
    LoadContacts: function(){
        var templatePart = $("#contactDetailtemplate").text();
            dataSource: this.ContactData,
            template: templatePart,
            endlessScroll: true,
            scrollTreshold: 30
I have also created a JSFiddle


1 Answer, 1 is accepted

Sort by
Alexander Valchev
Telerik team
answered on 04 Feb 2013, 09:26 AM
Hi Rihan,

In the current implementation ListView widget will be initialized multiple times which is not supported. Mobile widgets should be initialized once - via data-attributes in the mark-up or via JavaScript at the init event of the parent View.

In addition, I do not see any detail buttons in the ListView. Your templates renders a single <a> element. Could you please let me know what I am missing?

Last but not least, please do not assign observable array as data of the DataSource. Either bind the ListView directly to the Observable Array (TestData) or to a DataSource component:
ContactData: new{
    data: [<data array>]

I hope this will help. Please fix the aforementioned issues and let me know if the initial problem still persists.

On a side note, there is a code library project that demonstrates how to use mobile ListView with MVVM, edit the data and display details. You can download it from here.

Kind regards,
Alexander Valchev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
ListView (Mobile)
Asked by
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question