ListBox - Navigate to item with keyboard typed letter

[Mohammad Faraaz]

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

[Eyup]

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

[Praveen]

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.

[Praveen]

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

[Eyup]

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