ListView endless scroll

13 posts, 0 answers
  1. Dennis
    Dennis avatar
    24 posts
    Member since:
    Oct 2012

    Posted 27 Mar 2013 Link to this post

    Hello,

    I was wondering is there a way to get the current desktop version of the listview to have endless scroll?
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 28 Mar 2013 Link to this post

    Hi Dennis,


    Unfortunately the Web ListView does not support virtual scrolling. If you think that adding this feature to Kendo UI will be useful for other users too, you could submit it as a feature request in our User Voice Portal and if it gets popular among the community we will consider to implement it in the future releases of Kendo UI.

     

    All the best,
    Dimiter Madjarov
    the Telerik team
    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. Dennis
    Dennis avatar
    24 posts
    Member since:
    Oct 2012

    Posted 03 Apr 2013 Link to this post

    Hi,

    I eventually came up with a solution for this, so I'm gonna post about it for future reference (at least until we get such a feature ; ) ). I ditched listview and used a datasource and plain kendo template rendering. Here is how it works... I have a parent div for my data. I attach an event to my datasource change event and once a new page of data is read the parent div gets a child div appended inside which the new page of data is rendered. This works flawlessly for me so far.so my DOM looks something like this.

    <div id="EndlesslyScrollabledata" >
    <div id="DataPage1">
    .....
    </div>
    <div id="DataPage2">
    .....
    </div>
    </div>
    <button> Load more data </button>

    Each click on the load more data would move the datasource to the next page, append the next "DataPage" and render the template with the data inside the appended "DataPage".
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 03 Apr 2013 Link to this post

    Hi Dennis,

    Thanks for sharing this with the community!
    Wish you a great day!

     

    Regards,
    Dimiter Madjarov
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Felickz
    Felickz avatar
    14 posts
    Member since:
    Aug 2012

    Posted 20 May 2013 Link to this post

    Thanks for a work around...  Kind of a bummer that they have this for Mobile and not for Web.  Would be nice to see some sort of feature parity between the frameworks. Or some increased velocity on the Web framework :(

    Vote on the UserVoice:  http://feedback.kendoui.com/forums/127393-kendo-ui-feedback/suggestions/3306257-ui-web-listview-endless-scrolling
  7. Igor
    Igor avatar
    145 posts
    Member since:
    Jan 2011

    Posted 06 Feb 2014 Link to this post

    Hey guys!
    My approach is the following:

    $("#message_list").kendoListView({
            dataSource: message_dataSource,
            dataBound: function () {
     
                setTimeout(function () {
                    var children = message_list.element.children();
                    if (children.length > 0)
                        children.last().get(0).scrollIntoView(true);
                }, 1000);
            }
        }).data("kendoListView");

    so I having timeout on the dataBound event and scroll listview element down to it's last item.
    do you have any ideas on the way to improve it?

    Thanks!
  8. Igor
    Igor avatar
    145 posts
    Member since:
    Jan 2011

    Posted 06 Feb 2014 in reply to Igor Link to this post

    sorry for misunderstanding, my previous message is probably offtopic here ..
    I was wonder if there is any way to scroll the listview down after all its items have been loaded and shown.
  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 07 Feb 2014 Link to this post

    Hi Igor,


    The following approach is working correctly on my side.
    E.g.
    dataBound: function() {
        var wrapper = this.wrapper;
        wrapper.scrollTop(wrapper[0].scrollHeight);
    }

    Please let me know if it applies to the current scenario.

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Igor
    Igor avatar
    145 posts
    Member since:
    Jan 2011

    Posted 07 Feb 2014 in reply to Dimiter Madjarov Link to this post

    Hi Dimiter,

    this does not work for me unfortunately :(
    i have datasource defined like that:

    message_dataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "Gps/_Select_Messages",
                    dataType: "jsonp"
                },
                parameterMap: function (data, type) {
                    return { carId: message_carId };
                }
            },
            schema: {
                model: {
                    id: "id",
                    fields: {
                        date: {},
                        message: {},
                        fromBoard: {},
                        delivered: {}
                    }
                }
            }
        });

    then on dataBound event i have the code you provided, however listview does not scoll itself to the end as expected.
    This is probably because dataBound event is being called before the visual part completely constructed in the HTML page and therefore scrollHeight property does not contain it's final value.

    I have to modify your code like that to make it working:

    var wrapper = this.wrapper;
              setTimeout(function () {
                  wrapper.scrollTop(wrapper[0].scrollHeight);
              }, 1000);

    Anyway, I am not sure if timeouts is a good solution for that.
  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 11 Feb 2014 Link to this post

    Hi Igor,

    Could you please take a look at the following JS Bin example, which is working correctly on my side and let me know if it covers the current scenario? If that is not the case, please modify it or send me a separate project in which the issue is reproducing, so I could inspect it locally and pin point the reason for the problem.

    I am looking forward to hearing from you.

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Igor
    Igor avatar
    145 posts
    Member since:
    Jan 2011

    Posted 11 Feb 2014 in reply to Dimiter Madjarov Link to this post

    Hi Dimiter,

    I have figured out that the issue on my side was related to the customized paging bug on the server side. Actually it returned a very large dataset and therefore it might lead grid loading to take longer time.

    After fixing this issue i can see, that it works as expected and similar to the jsBin example you provided.
    Thank you for your time!
  13. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 11 Feb 2014 Link to this post

    Hello Igor,


    Thanks for keeping me updated. I am glad that we managed to resolve the problem. Do not hesitate to contact us again if further issues arise.

    Have a great day!

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  14. Barrie
    Barrie avatar
    3 posts
    Member since:
    Jan 2014

    Posted 10 Apr 2014 in reply to Dennis Link to this post

    Dennis said:Hi,

    I eventually came up with a solution for this, so I'm gonna post about it for future reference (at least until we get such a feature ; ) ). I ditched listview and used a datasource and plain kendo template rendering. Here is how it works... I have a parent div for my data. I attach an event to my datasource change event and once a new page of data is read the parent div gets a child div appended inside which the new page of data is rendered. This works flawlessly for me so far.so my DOM looks something like this.

    <div id="EndlesslyScrollabledata" >
    <div id="DataPage1">
    .....
    </div>
    <div id="DataPage2">
    .....
    </div>
    </div>
    <button> Load more data </button>

    Each click on the load more data would move the datasource to the next page, append the next "DataPage" and render the template with the data inside the appended "DataPage".


    Hi Dennis

    I'm facing the same problem as you and I wondered if you had a more detailed sample of what you did available anywhere?

    My javascript skills are not that great :(

    Thanks, Barrie.
Back to Top
Kendo UI is VS 2017 Ready