endless scrolling / load more issues

[Andrzej]

Hi,

 We're developing an phonegap app with Kendo and we're facing some issues with mobile listview. I have a simple declarative listview on a view like this:

<ul id="tasksList"
    data-role="listview"
    data-auto-bind="true"
    data-endless-scrolling="true"
    data-source="app.model.dataSource"
    data-template="taskListItemTemplate">
</ul>

When I turn endless scrolling on, buttons on the template start to behave weird. Clicking on a button results in a blank row and a row clicked is overlaping the first row. Some buttons seem not to work.

 I've prepared an example here: http://jsbin.com/xixapuwizo/1/edit?html,js,output (it was based on an example from Kendo UI api regarding endless scrolling)

 If I try to click on buttons from second row or below, they overlap the first row (change) or seem not to work (remove).

I've also tried with one of the latest releases (2015.3.1111) and the result is similar.

 We're in the middle of developing an app and this is a blocker for us.

 

 Regards,

Andrzej

[Petyo]

Hello Andrzej,

 

If I understand the case correctly, the problem demoed in the jsbin is related to the datasource configuration - you have a remote data source with remote data, paging and page size enabled. Removing items from it without refreshing the data breaks the listview virtualization logic, as the current page no longer contains the correct number of records.

 

In a real world example, the remove button should cause a round trip to the server, and the subsequent datasource change event would refresh the listview to a correct state. 

 

Regards,
Petyo
Telerik

 

 

[Andrzej]

Hello Petyo,

 so If I understand You correctly, the mobile listView component expects our application to reload the whole page from server to preserve the same number of elements in that list?

So if I have 20 elements in a list and I remove one element the virtualization logic breaks because now there is only 19 elements?

We wanted to use endless scrolling / load more button because it seemed to perform better than loading the whole service content at once, but we also have a requirement to dynamically add and remove elements from the list.

So are our only options to reload data from server after each removal or to stop using endless scrolling and load the whole list at once?

 

regards,

Andrzej

[Petyo]

Hello Andrzej,

 

you don't need to reload the entire page for the logic I describe. The datasource component should however perform a server request that will remove the record, and read the newly formed record set of the top 20 records. A similar data source configuration may be found in the following Grid demo.

 

Regards,
Petyo
Telerik