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

Listview - Scroll to Selected Item

3 Answers 761 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Ioannis
Top achievements
Rank 1
Ioannis asked on 28 Jun 2017, 03:02 PM

Hello.

I have a ListView which contains say 10 items. I add a new item programmatically, I am able to select it, but I am not able to make the Listview to Scroll to it.

I found several examples for Grid scrolling to selection, but none of them works for ListView.

Can you please provide some assistance?

Thanks,

Kyriakos

 

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 03 Jul 2017, 06:26 AM
Hello Kyriakos,

In general, the ListView does not provide a scrolling functionality out of the box. If the DIV container has to be scrolled this can be achieved with the standard jQuery scrollTop method.

This will require a manual calculation for the scroll position based on which item in the list is selected.

Also, I can suggest checking the following third-party library which can be helpful in this scenario:

https://github.com/flesler/jquery.scrollTo

I hope this is helpful.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Jayaram Krishnan
Top achievements
Rank 1
answered on 28 Aug 2018, 12:46 PM

I use the following jQuery code to achieve the same (no third-party library):

$("#myListView").scrollTop($("#myListView").find(".k-state-selected").position().top);

 

This assumes the item is already selected.If not, you can select it then scroll to it.

Madani

0
Stefan
Telerik team
answered on 29 Aug 2018, 06:43 AM
Hello, Madani,

This is a good approach for achieving the desired result.

Thank you for sharing the code snippet with us and the Kendo UI community. It is highly appreciated.

Regards,
Stefan
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ListView
Asked by
Ioannis
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Jayaram Krishnan
Top achievements
Rank 1
Share this question
or