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

Pull to Refresh: Local Data Source, Freezing?

7 Answers 347 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
Damien
Top achievements
Rank 1
Damien asked on 28 Jan 2013, 12:25 AM
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

                };

            }

        });

    }

7 Answers, 1 is accepted

Sort by
0
Kelton
Top achievements
Rank 1
answered on 29 Jan 2013, 11:14 AM
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?
0
Alexander Valchev
Telerik team
answered on 29 Jan 2013, 03:21 PM
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!
0
Kelton
Top achievements
Rank 1
answered on 29 Jan 2013, 03:56 PM
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

                                            });

}



0
Damien
Top achievements
Rank 1
answered on 30 Jan 2013, 12:10 AM
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);
0
Alexander Valchev
Telerik team
answered on 30 Jan 2013, 02:48 PM
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!
0
Kelton
Top achievements
Rank 1
answered on 30 Jan 2013, 11:36 PM
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...


0
Alexander Valchev
Telerik team
answered on 01 Feb 2013, 09:56 AM
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!
Tags
ListView (Mobile)
Asked by
Damien
Top achievements
Rank 1
Answers by
Kelton
Top achievements
Rank 1
Alexander Valchev
Telerik team
Damien
Top achievements
Rank 1
Share this question
or