endless scrolling / load more issues

4 posts, 0 answers
  1. Andrzej
    Andrzej avatar
    2 posts
    Member since:
    Nov 2015

    Posted 26 Nov 2015 Link to this post

    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

  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 30 Nov 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Andrzej
    Andrzej avatar
    2 posts
    Member since:
    Nov 2015

    Posted 30 Nov 2015 in reply to Petyo Link to this post

    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

  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 02 Dec 2015 Link to this post

    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
     
    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