Select first item automatically

8 posts, 1 answers
  1. Dan
    Dan avatar
    8 posts
    Member since:
    Feb 2012

    Posted 06 Feb 2013 Link to this post

    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. 

  2. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3749 posts

    Posted 07 Feb 2013 Link to this post

    Hello Dan,

     
    Enable highlightFirst functionality to achieve your goal.

    Kind regards,
    Georgi Krustev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Peter
    Peter avatar
    55 posts
    Member since:
    Jan 2014

    Posted 01 Mar in reply to Georgi Krustev Link to this post

    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 }"

  4. Peter
    Peter avatar
    55 posts
    Member since:
    Jan 2014

    Posted 01 Mar in reply to Peter Link to this post

    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

  5. Plamen
    Admin
    Plamen avatar
    2898 posts

    Posted 05 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Peter
    Peter avatar
    55 posts
    Member since:
    Jan 2014

    Posted 05 Mar in reply to Plamen Link to this post

    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"

  7. Peter
    Peter avatar
    55 posts
    Member since:
    Jan 2014

    Posted 05 Mar in reply to Plamen Link to this post

    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

  8. Plamen
    Admin
    Plamen avatar
    2898 posts

    Posted 06 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top