Listview issues - endlessScroll and list loading from datasource

[Martin]

I have two issues with my listview which I would appreciate help with.

1)  The listview takes a while to display (aprox 3 seconds).  I navigate to the view that has the listview, the h1 of the view appears but it takes a while before the listview is displayed.  This happens every time, not just the first time it is loaded.

2)  I have added endlessScroll: true and scrollTreshold: 30 to my listview.  This seems to display the data from the datasource in a continuous loop that never ends.  Is this supposed to happen?  I would only want to display the contents of the datasource once and not have this repeating.

I have the following code:

var DataSource = new kendo.data.DataSource({

     pageSize: 5,

      transport: {

          read: "data.php",

          dataType: "json",  

      },

     error: function(e) {

        alert(e.responseText);

      },

      sort: { field: "date", dir: "desc" },                  

      schema: {

        model: {

            id: "id",

            fields: {

                item: { type: "string" },

                date: { type: "date", "string" },

                total:{ type: "string" },

                status: { type: "string" },

                isnew: { type: "string" },

                dispatched: { type: "string" }

               }

           }            

                      

       }

                                    

     });

<div data-role="view" id="list" data-init="listinit">

       <h2>List</h2>

       <ul id="list"></ul>

   </div>

    

   <script id="list_template" type="text/x-kendo-template">

      #

   if(status == 1){

       var statusText = 'Open';

       var statusColour = 'green';

   } else if(status == 2) {

       var statusText = 'Closed';

       var statusColour = 'blue';     

   } else {

       var statusText = 'Problem';

       var statusColour = 'red';      

   }

   #

   <div  style="font-size:70%;padding-right:10%"><div style="float:left;margin-right:3px;">ID. #= id#</div><div style="float:right;" >#= date #</div><div style="clear:both;text-align:center;padding: 0 5px;width: 60px;float:left;background-color:#= statusColour #; color: white;font-weight:bold">#= statusText #</div><div style="float:right;margin-right:3px;">Total: #= total #</div><div style="clear:both;"></div></div></a></script>  

 

   <script>

 

    function listinit(){

 

         $("#list").kendoMobileListView({

             dataSource: DataSource,

             pullToRefresh: true,

             appendOnRefresh: false,                

             style: "inset",

             endlessScroll: true,

                  scrollTreshold: 30, //treshold in pixels                

             template: $("#list_template").text()

         });

  

    }

   </script>

[Alexander Valchev]

Hello Martin,

I have already replied to the support ticket that you have submitted on the same subject. I will ask you to continue with our conversation in the support thread to avoid any duplication.
Thank you in advance.

Regards,
Alexander Valchev
the Telerik team

[Colm Daniel]

Apologies for hijacking this thread, but I think this is very similar to the issue I raised yesterday.  

http://www.kendoui.com/forums/mobile/listview/how-to-switch-off-endless-scrolling-once-you-reach-the-end-of-a-long-dataset.aspx 

If a solution for this is available, it would be great to see how to get around this.

Many thanks

[Mark]

Hi Alexander,

I'm getting exactly the same problem as Martin - ie.
"2)  I have added endlessScroll: true and scrollTreshold: 30 to my listview.  This seems to display the data from the datasource in a continuous loop that never ends.  Is this supposed to happen?  I would only want to display the contents of the datasource once and not have this repeating. "

I added break points to my server code for the jsonp datasource and it's being called many times where it should be called once.  It's almost like Kendo is detecting that I'm within the 30px threshold and because the new data hasn't yet been added in it's still at the bottom of the screen and calls the server again - and again...

You mentioned that you replied to a support ticket - I would really like to see what the final solution was?


Thanks,
Mark

[Colm Daniel]

Mark, I'll throw my two cents on this... see the link I posted in an earlier message above.

I understand that there is no way to stop endless scroll once you start it.  I suppose it is really intended for something like twitter where the list essentially never ends. I wanted a way of stopping the server getting hit.

I wasn't able to stop the server being hit, but I sent parameters to my web service for page, max, totalCount (which would be the total number of matches found in the query if every row was to be returned).  Then apply a bit of logic in the first few lines on the server side which would throw back an empty resultset if you know that the page number exceeds the maximum theoretical page number... 

int _page;

int _totalCount;

int _max;

 

// Convert your string parameters to ints...

Int32.TryParse(page, out _page);

Int32.TryParse(totalCount, out _totalCount);

Int32.TryParse(max, out _max);

 

 

int _absMax = _page * _max;

 

if (_totalCount > 0)

{

    if (_absMax > _totalCount)

        {

            // no point in going further... throw back empty list

                ComplexObject cc = new ComplexObject () { total_count = _totalCount, results = new List<SimpleObject>() };

        return cc;

    }

}

It isn't ideal, but it works and all you'd be throwing back to the client is a totalCount value and and empty 

[Mark]

Hi Colm,
Many thanks. 
Unfortunately my issue is the same as Martin's (2) problem ).  Getting beyond the bottom isn't the issue.  What happens is that the endlessScroll is actually firing off Many (sometimes 20+) page requests back to the server - it looks like because it's at the bottom of the scroll page with the spinner - Kendo keeps triggering datasource requests Until finally the page is expanded with the new items.  Then it stops - meanwhile many requests get fired even though you only want the one. 

The first couple of pagings seem fine then on about page three Kendo fires off buckets of requests so the page length then goes from being two or three screen lengths to up to a hundred iPhone screen lengths.  This then makes the app work much slower too. 

What I need to be able to do is tell Kendo to hold off for a moment on the next request - until it has completed its page update.  It's better if we don't do some kind of server timestamp management - we don't want Kendo firing off 20+ server request if they're not needed.

[Georgi Krustev]

Hi Mark,

 
As Alexander said in his last reply, this is a known issue which is related with the trashold calculation. It is already addressed and you will need to download latest official release of KendoUI.

Kind regards,
Georgi Krustev
the Telerik team

[Mark]

Hi Georgi,

Many thanks.  I'll download the latest version.  We were in evaluation mode so we were using the trial version. 


fyi.  You may want to check forum posts such that when they're resolved you update all the relavent threads.  See above - it wasn't mentioned that this has been resolved in the lastest version.  i'm sure there are others who are evaluating the software and have probably seen the same thing - it would have saved another post.


***** *****
I just downloaded the latest version of Kendo Mobile and confirmed that this has been fixed...  Many thanks.