Pull to Refresh : Data not appearing in the list

2 posts, 0 answers
  1. Akshay
    Akshay avatar
    7 posts
    Member since:
    Jan 2013

    Posted 31 Jan 2013 Link to this post

    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}]})
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 04 Feb 2013 Link to this post

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