Pull to Refresh: Local Data Source, Freezing?

8 posts, 0 answers
  1. Damien
    Damien avatar
    8 posts
    Member since:
    Jan 2013

    Posted 27 Jan 2013 Link to this post

    Hi Telrik Team,

    At the moment I have a pull to refresh view based on the 'twitter' example you have, which works fine (see extract below)
    At present, it is looking at json.txt included locally in my project and pulling data back via pull to refresh.

    Now when I go to create a local data source:

    var movies = [ {
          title: "Star Wars: A New Hope",
          year: 1977
       }, {
         title: "Star Wars: The Empire Strikes Back",
         year: 1980
       }, {
         title: "Star Wars: Return of the Jedi",
         year: 1983
       }
    ];
    var localDataSource = new kendo.data.DataSource({data: movies});

    And adjust my pull to refresh view to look at this data source instead, I map the fields via the template and I get a list of results fine,
    however I am unable to refresh it when I pull down, it just hangs! Are you able to provide me with a step in the right direction?

    Thanks so much

    Rgds. 




    ____________________________________
    The Kendo Template:

        <script type="script/x-kendo-template" id="pull-to-refresh-template">
                <div class="inboxList">
            <h3 class="time">9:00am</h3><h3>The Purchace ID is:#: PurchaseID #</h3>
            <a class="reply" data-role="button" data-rel="actionsheet" href="\\#inboxActions" data-actionsheet-context="ID">Reply</a>
            <h2>Another Field</h2>
            <p>Something here</p>
                   </div>
    </script>

    Json Txt Example:
    {
        "results": [
            {
                "UserID": "33",
                "PurchaseID": 944000
            },
            {
                "UserID": 2,
                "PurchaseID": 3584
            },
            {
                "UserID": 3,
                "PurchaseID": 7473
            },
            {
                "UserID": 4,
                "PurchaseID": 8654
    ______
    Javascript Functions:

     function mobileListViewPullToRefresh() {

            

                var dataSource = new kendo.data.DataSource({

                 serverPaging: true,

                    pageSize: 10,

                    transport: {

                        read: {

    url: "json.txt",

                            dataType: "json" // JSONP (JSON with padding) is required for cross-domain AJAX

                        },

                    

                    },

                    schema: { // describe the result format

                        data: "results" // the data which the data source will be bound to is in the "results" field

                    }

                });

            

            

            $("#pull-to-refresh-listview").kendoMobileListView({ 

                dataSource: dataSource,

                pullToRefresh: true,

                appendOnRefresh: false,

                template: $("#pull-to-refresh-template").text(),

                endlessScroll: false,

                pullParameters: function(item) {

                    return {

                        since_id: item.id_str,

                        page: 1

                    };

                }

            });

        }

  2. Kelton
    Kelton avatar
    3 posts
    Member since:
    Dec 2012

    Posted 29 Jan 2013 Link to this post

    I have the same issue as demonstrated here:

    http://jsbin.com/ukitas/9/edit

    It appears that the Pull to refresh banner isn't hiding properly, the data is read correctly and notice if you scroll up to the top manually the Pull to refresh banner 'reset's' itself.

    Did you get this resolved?
  3. Kendo UI is VS 2017 Ready
  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 29 Jan 2013 Link to this post

    Hello guys,

    The idea of pull-to-refresh functionality is to allow the developer to display data with dynamic character. It is not designed to work together with a static local data.
    When the user pulls the DataSource will issue a read request to fetch the new data. In your case such request is not performed hence the arrow that indicates refreshing does not disappear automatically.

    In case you would like to update a ListView bound to local data please consider using:

    I hope this will help.

    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!
  5. Kelton
    Kelton avatar
    3 posts
    Member since:
    Dec 2012

    Posted 29 Jan 2013 Link to this post

    Hi Alexander,

    In my project I have used a custom transport as you suggest which either supplies local or remote data. This exhibits exactly the same behaviour. i.e. the Pull to refresh banner is not hidden unless I make an AJAX call. 

    Like this: 
    http://jsbin.com/ukitas/16/edit

    function bindActivityFeed(){

        var dataSource = new kendo.data.DataSource({

                                                   transport: {

                                                   read: function(options) {

                                                   var cached_data = localStorage.getItem("_testActivityData");

                                                   if(cached_data != null || cached_data != undefined) {

                                                   //if local data exists use it

                                                   console.log("use cache");

                                                   options.success(JSON.parse(cached_data));

                                                   }else{

                                                   // get server data

                                                   console.log("no cached data - load from server");

                                                   $.ajax( {

                                                          url: "http://mysite.php",

                                                          data: options.data,

                                                          dataType: "json",

                                                          success: function(result) {

                                                          localStorage.setItem("_testActivityData", JSON.stringify(result));

                                                          options.success(result);

                                                          }

                                                          });

                                                   }

                                                   }

                                                   }

                                                   ,

                                                   schema: {

                                                   data: "results"

                                                   }

                                                   });

        

        

        $("#activity_feed").kendoMobileListView({

                                                dataSource: dataSource,

                                                template: kendo.template($("#activity_feed_template").html()),

                                                appendOnRefresh: false,

                                                pullToRefresh: true

                                                });

    }



  6. Damien
    Damien avatar
    8 posts
    Member since:
    Jan 2013

    Posted 29 Jan 2013 Link to this post

    Hi Alexander,

    It would be great if we could use this with a local data source, could be useful if a local mode was looked at ?
    Thanks for the alternate solutions, too.

    One last question:

    I am retrieving data from a database and outputting via jQuery to HTML. 
    See below, now no matter how I format the tags, I cannot get it to output and render a Kendo UI list <li>
    All I get are bullet points. Is there a better way? Can you provide me with a small sample?

    That would be fantastic. Thankyou.




    ___________________________
    DB Connection: //select title, desc etc.. 
    RETURN RESULTS HERE... :

    Output via JQuery to Kendo UI List (won't work) :( 
    var note = results[i];
        s += "<b>Title:</b>"+note.get("Title")+"<br/>";
        s += "<b>Description:</b>"+note.get("Description")+"<br/>";
    s += "<hr/>";
    }
    $("#resultbox").html(s);
  7. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 30 Jan 2013 Link to this post

    Hi guys,

    @Kelton

    I already replied to your question in the support ticket that you submitted on the same subject. As I believe that the solution might be interesting for other users who face with the same issue, I will paste my reply as well.

    The DataSource does not automatically detect that the request is finished successfully. My recommendation is to call pullHandled method of the scroller manually.
    options.success(JSON.parse(cached_data));
    setTimeout(function () {
        $("#activity_feed")
            .data("kendoMobileListView")
            ._scroller()
            .pullHandled();
    });

    For your convenience I prepared a small example: http://jsbin.com/akigab/2/edit

    @Damien
    You can use the same approach to hide pull-to-refresh template in case you work with local data, however unless there is a transport, the DataSource will not fetch new data.

    I am not sure if I understood correctly your additional question. Generally speaking direct replacement of the ListView's HTML mark-up is not supported. If you want to add records, you should do that through the DataSource.

    As this question is not directly related to the subject of this thread I would like to ask you to open a new one with detailed description of what you are trying to achieve and code snippets explaining your current implementation (or if possible a jsBin example). Thank you in advance for the understanding.

    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!
  8. Kelton
    Kelton avatar
    3 posts
    Member since:
    Dec 2012

    Posted 30 Jan 2013 Link to this post

    Hi Alexander,

    Thanks for the reply and sorry for starting multiple threads on the same subject!

    I've been doing a little experimenting and it seams that we don't need to use the pull handler as long as the options.sucess() is wrapped in a setTimeout - have a look at this:

    http://jsbin.com/akigab/5/edit

    which works as expected vs

    http://jsbin.com/akigab/7/edit

    which doesn't hide the pull

    I don't understand why this is but it does resolve the issue. As does your suggestion but this seams far simpler?

    By the way the reason for asking this question in the first place is because in my project I need to handle the app going offline. Now this is working I can supply the user with cached (localstorage) data when the view first loads and then when they do a Pull to refresh give them live data if its available. 

    Thanks for all your help...


  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 01 Feb 2013 Link to this post

    Hello Kelton,

    Yes this solution is much simpler. The problem comes from the fact that when you are using local data, new records are retrieved almost instantly which is why it is required to force a delay. As I said pull-to-refresh functionality is designed to be used with remote data, but you case make sense too. I will forward this case to team for further discussions. For now please use the setTimeout approach.

    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
Kendo UI is VS 2017 Ready