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

ListBox - Navigate to item with keyboard typed letter

4 Answers 31 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Mohammad Faraaz
Top achievements
Rank 1
Veteran
Mohammad Faraaz asked on 04 Feb 2021, 11:54 AM

Hi Team,

We are using Kendo ListBox in our application. This can have, say a list of countries. Once user types a letter, the first record with that letter should be selected (similar behaviour like in dropdowns). Please advise how this can be achieved.

Thanks,

Faraaz

4 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 08 Feb 2021, 10:43 AM

Hello Faraaz,

 

Thank you for writing to us.

You can achieve this requirement using the following approach:
https://dojo.telerik.com/ixAjUmoG/12

It works nicely on my side. The same JavaScript logic can also be applied for MVC ListBox since it is using the same Kendo ListBox underneath. Could you give it a try in your original project and let me know if it is working as expected on your side, too?

 

Regards,
Eyup
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Praveen
Top achievements
Rank 1
answered on 08 Feb 2021, 05:16 PM
Hi Eyup, Thanks for the reply. If we bind the list having let's say 2000 items, though we are able to acheive to select the item based on key press (starting letter), scorll of the list box doesn't move accordinly. Please advice.
0
Praveen
Top achievements
Rank 1
answered on 09 Feb 2021, 07:33 AM

Adding the smaple for the issue which i have described. I added more items to list and reduce the hieght of the list box. Now if we press letter N/M/S, the scroll doesn't move.

https://dojo.telerik.com/ixAjUmoG/17

0
Eyup
Telerik team
answered on 10 Feb 2021, 11:53 AM

Hi Praveen,

 

You can remedy this behavior by adding the following line to the logic:

$(".k-list-scroller").scrollTop($(element).position().top);
Here is the modified version:
https://dojo.telerik.com/ixAjUmoG/24

It works nicely on my side. Could you check whether this is the case from your end, too?

 

Regards,
Eyup
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
ListBox
Asked by
Mohammad Faraaz
Top achievements
Rank 1
Veteran
Answers by
Eyup
Telerik team
Praveen
Top achievements
Rank 1
Share this question
or