Unable to bind ModelView to a ListView

2 posts, 1 answers
  1. Rihan
    Rihan avatar
    2 posts
    Member since:
    Jan 2013

    Posted 31 Jan 2013 Link to this post


    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 kendo.data.DataSource.create({ data: this.TestData }),
        LoadContacts: function(){
            var templatePart = $("#contactDetailtemplate").text();
                dataSource: this.ContactData,
                template: templatePart,
                endlessScroll: true,
                scrollTreshold: 30
    I have also created a JSFiddle

  2. Answer
    Alexander Valchev
    Alexander Valchev avatar
    2873 posts

    Posted 04 Feb 2013 Link to this post

    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 kendo.data.DataSource({
        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!
Back to Top