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

Pull to Refresh : Data not appearing in the list

1 Answer 99 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Akshay
Top achievements
Rank 1
Akshay asked on 31 Jan 2013, 01:56 PM
Dynamic data is not appearing in the list. Data is fetched dynamically in jsonp format. When checked in Chrome developer tools i am able to see the response. Please find the code below. Can someone help me here ? 

<!DOCTYPE html>
<html>
<head>
    <title>Pull to refresh</title>
    <script src="../../lib/jquery.min.js"></script>
    <script src="../../lib/kendo.mobile.min.js"></script>
<link href="../../lib/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <link href="../../lib/styles/kendo.common.min.css" rel="stylesheet" />
</head>
<body>
    <a href="../index.html">Back</a>
    <div data-role="view" data-init="mobileListViewPullToRefresh" data-title="Pull to refresh">
   <header data-role="header">
       <div data-role="navbar">
           <span data-role="view-title"></span>
           <a data-align="right" data-role="button" class="nav-button" href="#index">Index</a>
       </div>
   </header>

   <ul id="pull-to-refresh-listview"></ul>
</div>

<script id="pull-to-refresh-template" type="text/x-kendo-template">
        #= Title #
</script>

<script>
    function mobileListViewPullToRefresh() {
            var dataSource = new kendo.data.DataSource({
                serverPaging: true,
                pageSize: 1,
                transport: {
                    read: {
                        url: "http://localhost/MvcMovieApp/Mobile/RestResponse", // the remove service url
                        dataType: "jsonp" // JSONP (JSON with padding) is required for cross-domain AJAX
                    },
                    parameterMap: function(options) {
alert(kendo.stringify(options));
                    return {
                            q: "javascript",
                            page: options.page,
                            rpp: options.pageSize
                            since_id: options.since_id //additional parameters sent to the remote service
                        };
                    }
                },
                schema: { 
                    data: "movies" // the data which the data source will be bound to is in the "results" field
                }
            });

alert("Before kendoMobileListView");
        
        $("#pull-to-refresh-listview").kendoMobileListView({
            dataSource: dataSource ,
            pullToRefresh: function(){ alert("dataSource"); return true },
            appendOnRefresh: true,
            template: $("#pull-to-refresh-template").text(),
            endlessScroll: true,
            pullParameters: function(item) {
                return {
                    since_id: item.id_str,
                    page: 1
                };
            }
        });
    }
</script>

    <script>
        window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    </script>
</body>
</html>

JSONP which i am receiving is :
({"movies":[{"ID":1,"Title":"Movie 1","ReleaseDate":"\/Date(1355250600000)\/","Genre":"Comedy","Price":10},{"ID":2,"Title":"Movie 2","ReleaseDate":"\/Date(1355250600000)\/","Genre":"Thriller","Price":10}]})

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 04 Feb 2013, 09:53 AM
Hi Akshay,

Your KendoUI configuration looks OK. I am not sure exactly where the problem comes from. Does the issue persists if you use a larger pageSize? If not, could you please provide a small example which I can run and examine locally? Since you are using JSONP, a single HTML file will be enough. Alternatively you may use jsBin or jsFiddle.

Please provide such example and I will check it right away. Thank you in advance for the cooperation.

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!
Tags
ListView (Mobile)
Asked by
Akshay
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or