How to bind the data to Listview in kendo UI Mobile using webservice

2 posts, 0 answers
  1. Kamran
    Kamran avatar
    11 posts
    Member since:
    Apr 2012

    Posted 12 Feb 2013 Link to this post

    Hi, I am having a problem to bind a Listview in kendo ui mobile with a server side method written in a Webservice.
    But this code is not working. When i placed a debugger in method, i found that debugger does not go inside the $.ajax 
    and go out to end the function. Can anybody help ?


    <script src="scripts/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.min.js" type="text/javascript"></script>
    <script src="scripts/kendo.all.min.js" type="text/javascript"></script>
    <link href="styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
    <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    function mobileListViewDataBindInitFlat() {
    debugger;
    $.ajax({
    type: "POST",
    url: "mobileAppWebService.asmx/GetData",
    data:null,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
    $("#flat-listview").kendoMobileListView({
    dataSource: data.d,
    });
    },
    failure: function (msg) {
    alert(msg);
    }
    });
    }
    var app = new kendo.mobile.Application(document.body);
    </script>
    </head>
    <body>

    <div data-role="view"   data-init="mobileListViewDataBindInitFlat" data-title="Data Bindings">
    <ul data-role="listview" data-style="inset" id="flat" >
    </ul>
    <div data-role="header">
    <div data-role="navbar">
    <span data-role="view-title"></span>
    </div>
    </div>
    </div>
    </body>
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 14 Feb 2013 Link to this post

    Hello Kamran,

    KendoUI is not compatible with jQuery v1.9.1, instead please use jQuery v1.8.2.

    In addition, you are initializing the ListView widget inside the success event handler of the $.ajax request. Multiple initialization of the widgets is not supported. I can suggest you two alternative approaches:
    • bind the ListView widget to a DataSource component, like in this demo. The data should be retrieved from the webservice via read transport (it will make $.ajax request)
    • if you insist to use separate $.ajax request, please just replace the data of the ListView's dataSource with the data method. Do not reinitialize the widget.
      success: function (data) {
          $("#flat-listview")
          .data("kendoMobileListView")
          .dataSource
          .data( data.d ); //replace the data
      }


    I hope this will help.

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top