This is a migrated thread and some comments may be shown as answers.

ListView endless scroll

12 Answers 531 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Dennis
Top achievements
Rank 2
Dennis asked on 27 Mar 2013, 08:27 PM
Hello,

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

12 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 28 Mar 2013, 02:24 PM
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!
0
Dennis
Top achievements
Rank 2
answered on 03 Apr 2013, 10:16 AM
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".
0
Dimiter Madjarov
Telerik team
answered on 03 Apr 2013, 02:49 PM
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!
0
Felickz
Top achievements
Rank 2
answered on 20 May 2013, 03:30 PM
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
0
Igor
Top achievements
Rank 2
answered on 06 Feb 2014, 04:40 PM
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!
0
Igor
Top achievements
Rank 2
answered on 06 Feb 2014, 04:50 PM
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.
0
Dimiter Madjarov
Telerik team
answered on 07 Feb 2014, 08:58 AM
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!
0
Igor
Top achievements
Rank 2
answered on 07 Feb 2014, 03:45 PM
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.
0
Dimiter Madjarov
Telerik team
answered on 11 Feb 2014, 10:55 AM
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!
0
Igor
Top achievements
Rank 2
answered on 11 Feb 2014, 12:47 PM
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!
0
Dimiter Madjarov
Telerik team
answered on 11 Feb 2014, 01:23 PM
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!
0
Barrie
Top achievements
Rank 1
answered on 10 Apr 2014, 02:09 PM
[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.
Tags
ListView
Asked by
Dennis
Top achievements
Rank 2
Answers by
Dimiter Madjarov
Telerik team
Dennis
Top achievements
Rank 2
Felickz
Top achievements
Rank 2
Igor
Top achievements
Rank 2
Barrie
Top achievements
Rank 1
Share this question
or