Listview Endless Scrolling problems

[Reuben]

Just when I think I have it beat another problem comes up with Listview Endless Scrolling.

Attached are a couple screenshots from my app on an iPad mini. Quick background on the app:
This view of the app - General Log - should display a list of all log entries entered into the system from the beginning of time (app time that is).  This particular log contains 4252 entries as stored in the "total" field of the datasource.  pageSize = 100 and I have verified that with each pull there are exactly 100 records returned from the server. Everything works flawlessly in the Icenium emulator and about 90% of the time when executed as a Cordova app on an iPhone4s and iPhone5.  On larger tablet devices the listview breaks 100% of the time when the endless scroll mechanism tries to fetch a new batch of records AND the user is scrolling quickly.  If you scroll very slowly through all records the endless scroll does its job and all is well - but, try scrolling fast - like all users do - and it breaks.

I know that per the documentation notes you need a minimum number of records in the pageSize so that the virtual listview can regenerate as required.  I have tried a range of pageSizes and for the phone devices 100 works well.  On the tablets it doesn't matter what the pageSize is - same results.

Overall scrolling performance with Endless scrolling enabled is also very poor.  With 100 records loaded the scrolling is choppy at best. Disabling endless scrolling and those same 100 records scroll like butter.

Screenshots:
1) Blank area at top of listview.  This seems to happen when the virtual listview can't keep up with the scrolling and once this happens the only way to recover is to close the view and reopen it.  No new pages will be pulled from the server and scrolling breaks almost completely.  My assumption is that the threshold/trigger that causes the datasource to update is too high and by the time the data is pulled from the server the scrolling has already passed the virtual limit and it can't recover.  Can the threshold be modified to update the datasource when the scroller hits 50% of the data instead of the default 66% or whatever it is?

2) Continuing to scroll down from the "blank" top of #1 you reach the bottom of the active scroller and it will not continue fetching pages and you can see the rendering of list items becomes unstable - note the overlapping list items.

Here is my code - there may be a glaring error but I can't see it.  Again, everything works like expected in the emulator and almost always on smaller devices - problem is severe on tablets - both iOS and Android.  I'll try any suggestions and report back - I find it hard to believe I'm the only one experiencing this type of problem.

// GENERAL LOG
var genLogDataSource = new kendo.data.DataSource({
    pageSize: 100,
    serverPaging: true,
    transport: {
        read: {
            url: "https://xxxxxxxx.xxx/xx/xxx/generalLog.php",
            type: "GET",
            dataType: "json"
        },
        parameterMap: function(options) {
            return {
                take: options.take,
                skip: options.skip
            };
        }
    },
    schema: {
        data: "ds",
        total: "total"
    }
    });

function initGenLog(){
    $("#listview-genlog").kendoMobileListView({ 
        dataSource: genLogDataSource, 
        template: $("#listview-genlog-template").html(),
        endlessScroll : true, 
        click: function(e){
            var fileId = e.target.attr('fileId');
            if(fileId) openFile(fileId);
            else return false;
        }
    });
}

[Dean]

Hi Reuben

You're not alone. We're experiencing similar problems, even on smaller devices. Older devices are worse as they have slower processors and trip up more frequently. I'm hoping Telerik is working to make endless scrolling stable on all supported devices regardless of screen-size or processor power. The new virtualized scrolling is a great idea, it just needs some polishing. Can someone from Telerik confirm if they're working on this and when we should expect a fix?

Cheers
Dean

[Przemek]

Hi All,

We do see described issues too. What is strange is that although list with virtual scrolling works nearly fine upon slow scrolling on iPad 4, it constantly breaks on iPad mini. On iPhone 4S it breaks too and even before that the overall performance is rather poor.

Surely the virtual mode is a way to go since previous implementation was breaking webapps, but, as stated above, it needs some extra polishing in order to fit customers needs.

We stick to the pageSize of 40 on ipad and it seems to be sufficient for landscape mode, but is at the edge if user uses portrait one.

@Reuben, have you seen or used listView's scrollTreshold param? It may be a (partial) answer for your first issue.

[Reuben]

As much as I hate to say it I'm relieved that I'm not alone!  When more than one person experiences a problem it tends to get more attention from the people who can hopefully provide a solution... Telerik - anybody listening?

@Przemek - thanks for your response. The scrollThreshold option was my first thought as well but it has been deprecated/removed from the 2013 Q2 release.  According to the documentation the datasource is automatically updated when 2/3 of the list has been scrolled.

@Telerik - this bug is a dealbreaker for our app.  Unless there is a workaround I'll be forced to manually "page" the results which is less than ideal and a pain for users - the exact opposite of what KendoUI advertises!

[Przemek]

Hi Reuben,
Thanks for pointing that out... to bad that Telerik has not updated howto's...
http://docs.kendoui.com/howto/howto-use-the-mobile-listview-with-endless-scrolling
(scrollTreshold: 30 //treshold in pixels)

Thanks again and let's hope that we will see a solution shortly.

[Petyo]

Hello Reuben,

The code you have posted seems to be correct. From what I see on the screenshots, a page size set to 100 should me more than enough for the portrait mode (which seems to contain about 14 items).

A couple of things come to mind - please verify that the items do not resize themselves after they are being displayed (due to images without width and height being loaded). In virtual mode, the listview items are re-positioned manually, and such behavior would break that (something similar to what your screenshot shows). Also, please verify that the service endpoint functions correctly and returns correct amount of data items, while respecting the paging parameters provided. 

Last, but not least – I re-tested our endless scrolling demo on an iPad (iOS 6), and it works as expected. You may also consider using this functional example as a starting point for your current implementation. 

In case you need any further help, please let us know. 

Regards,
Petyo
Telerik

[Reuben]

Petyo:

I verified that the images are not causing a problem - width/height are specified in the CSS and even when removing the images completely the problem persists. Following this line of thinking I noticed that some of the rows had differing heights based on the content (empty DIVs with no data content were collapsed) so I standardized the data by inserting no-breaking spaces to make sure no DIVs collapsed - sadly, this did not help.

I also verified - as stated in my original post - that the pageSize and the total data items returned from the remote endpoint are consistent.

Again, the listview only breaks if the user is fast-scrolling (flicking) through the list. Scroll nice and gently and all is well.  This tells me that there is a timing issue with rendering the new data - if you flick past the threshold before the new data is available and it all comes to a grinding halt.  A complex dataset or slow internet connection could cause a delay in pulling the new data during which time the virtualized scroller gets "confused" and stops. Maybe my conclusion is totally off-base but I've run out of potential fixes on my end.  I've spent more time searching for a fix to this problem than it took to build this portion of the app.

Is there any way to disable kinetic scrolling?

As far as using the demo code as a base for my app - I'm not sure how much closer I can copy it.  You said yourself that my code looks correct.  Everything it needs is there and there is no "extra" stuff.  It works - just not with fast-scrolling - something I can't (or don't know how to) control or compensate for on my end. Any additional help/suggestions would be appreciated.

Reuben

[Petyo]

Hello Reuben,

Currently we do not have a configuration option for disabling kinetic scrolling. I can't really recommend that, as it would effectively ruin the application experience, though. 

Given the current state, I am afraid that I am out of suggestions. It might as well be that you have stumbled upon a bug or a flow in our implementation. Is it possible for you to open a support ticket with a runnable sample of your project attached? We need to reproduce the problems described locally in order to provide adequate suggestions. 

Thank you in advance,
Petyo
Telerik