Limiting ComboBox to "Valid" Items

8 posts, 1 answers
  1. Jeff
    Jeff avatar
    7 posts
    Member since:
    Jun 2012

    Posted 12 Oct 2012 Link to this post

    I'm trying to limit ComboBox entry to something valid from the datasource.  I've tried to add a change event handler that looks for a valid item and if the item is not valid select the first item from the datasource.

    The problem seems to be that if an "invalid" entry is typed in, the combo box gets into some weird state where the select() method stops working.  See this JSfiddle:  http://jsfiddle.net/gVWBf/

    What am I doing wrong?

    Thanks!
    Jeff Butler
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 posts

    Posted 15 Oct 2012 Link to this post

    Hello Jeff,

     
    You can check whether the combobox has value, but the selectedIndex is -1. Here is the updated jsFiddle demo.

    Greetings,
    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. Kendo UI is VS 2017 Ready
  4. Jeff
    Jeff avatar
    7 posts
    Member since:
    Jun 2012

    Posted 15 Oct 2012 Link to this post

    Thanks, but this still doesn't solve the basic problem which is that I am unable to select a value after typing in an "invalid" value.  For example, type "betty" into the box and press the tab key.  You will get the popup stating "invalid entry", but "betty" will still be in the box.  I want "wilma" to be in the box (select(1) should select the second value from the datasource).

  5. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 15 Oct 2012 Link to this post

    Looks like for some reason it is unable to match the index with the li element.
    As a workaround until it is fixed, or until someone tells us if we're missing something, you can use this: http://jsfiddle.net/gVWBf/2/ 
  6. Jeff
    Jeff avatar
    7 posts
    Member since:
    Jun 2012

    Posted 15 Oct 2012 Link to this post

    So close!  But the problem with this is that the value of combobox does not get updated properly.  Check the updated fiddle which adds a button to display the value  http://jsfiddle.net/gVWBf/4/.  After the box is reset to "wilma", the value shows as "wilma", not "2". :(

    Thanks for your help!
  7. Answer
    Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 15 Oct 2012 Link to this post

  8. Jeff
    Jeff avatar
    7 posts
    Member since:
    Jun 2012

    Posted 15 Oct 2012 Link to this post

    Excellent!  Thank you so much.
  9. Scott
    Scott avatar
    5 posts
    Member since:
    Jun 2012

    Posted 01 Feb 2013 Link to this post

    Thanks for the help! I was dealing with this too. Unfortunately the workaround provided has been "fixed" in the most recent release of the kendo ui. 

    I updated the jsfiddle code to get it to work after a day of trial and error.
    http://jsfiddle.net/gVWBf/27/

    It turns out the issue is that when you type invalid text - the <ul> list is filtered based on the text entered. So if you use any of the current methods to set the selected value it will be unable to find any items. using the _filtersource function with an empty string will repopulate the dropdown and repopulate the list again. (you could use the search function but that pops up the dropdown and looks klunky - this solution just changes the text/value appropriately). 
Back to Top
Kendo UI is VS 2017 Ready