Select first item automatically

[Dan]

Using the auto complete widget, is it possible to automatically highlight (but not select) the first item in the dropdownlist, but still allow the user to type into the textbox?

Currently, when you type in the textbox and see the item you want as the first in the dropdownlist you have to hit the down arrow to select it, then tab to go to the next field. We'd like it to have that selected by default. 

[Georgi Krustev]

Hello Dan,

 
Enable highlightFirst functionality to achieve your goal.

Kind regards,
Georgi Krustev
the Telerik team

[Peter]

I can't work this out for MVVM, do you have any advice as to how I would go about finding out how to do this?

It seems there is no explicit documentation on MVVM

 

 data-bind="events: { select: onSearchItemSelected }"
 data-options="{ highlightFirst: true }"

 

I've also tried data-bind="options : { highlightFirst: true }"

[Peter]

NB I also tried adding it in code, but it simply doesn't take effect - I guess it has be initialized with the option

let kendoInput: kendo.ui.AutoComplete = this.searchInput.data("kendoAutoComplete")
kendoInput.options.highlightFirst = true

[Plamen]

Hello,

This can be achieved by using the custom widget binding and triggering a setOptions as for example it is done here.

Regards,
Plamen
Progress Telerik

[Peter]

Thanks, is it possible to make this simpler if I don't need to vary/bind the "highlightFirst" value.

I just need it to be "true" - and it never needs to vary or change from "true".

I have a problem implementing a code solution like you've suggested because the MVVM I use is common across many usages in the code - so to implement this custom code binding is a significant change that really should just be "highlightFirst: true"

[Peter]

Thanks, it's also odd that this doesn't compile in typescript owing to this error:

"Property 'widget' does not exist of typeof 'binders'"

`kendo.data.binders.widget.highlightFirst = ...1

[Plamen]

Hello,

You can hardcode the value of the property to true but the structure of the code should remain the same in order to work correctly in MVVM scenarios.

As for the typescript issue - it seems like it is not added to the typescript definitions. I have logged the issue and you can follow it s status here. 

 Thank you for reporting this issue and for your concern with Telerik widgets.

Regards,
Plamen
Progress Telerik