ListView endless scroll

[Dennis]

Hello,

I was wondering is there a way to get the current desktop version of the listview to have endless scroll?

[Dimiter Madjarov]

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

[Dennis]

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

[Dimiter Madjarov]

Hi Dennis,

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

 

Regards,
Dimiter Madjarov
the Telerik team

[Felickz]

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

[Igor]

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!

[Igor]

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.

[Dimiter Madjarov]

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

[Igor]

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.

[Dimiter Madjarov]

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

[Igor]

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!

[Dimiter Madjarov]

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

[Barrie]

[quote]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".[/quote]

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.