If you are using Kendo UI and need a widget for selecting an item from a list, you have a few options: DropDownList, ComboBox, and AutoComplete. DropDownList requires you to select one of the items from the list, but the keyboard support is fairly cumbersome–the user needs to enter text quickly in order to jump to that item in the list.
The ComboBox allows users to enter text as if it was a text box, but it doesn’t force them to match one of the values in the list–it allows custom text.
What I’m looking for is a way to type text in the box, but also require it to match one of the items in the list.
To do this, we’ll start with a ComboBox and use the “change” event to see if the entered value matches one of the items in the list. A selectedIndex value of -1 indicates that a custom value has been entered. If so, we can use .value(”) to clear out the text or you can set the value to the first item in the list.
A few things to note:
- Set “suggest” to true so it matches the entered text to available values
- Set a “placeholder” value which will display if the user enters a value not in the list
You can apply the same code to an AutoComplete widget if you are using a remote data source.
Note: if you are using a ComboBox in a Kendo Grid with an autoSync DataSource, you will have to use the “cascade” event instead of the “change” event for the correct timing with the update call.
Here is a working example in JSFiddle:
Latest posts by Falafel Posts (see all)
- Matching Complex Query String Rewrite Rule in IIS - March 22, 2017
- Using Google Services in UWP C# Apps – Part 2 - February 7, 2017
- Using Google Services in UWP C# Apps – Part 1 - February 6, 2017
- Redis Caching in the Google Cloud Platform - February 3, 2017
- Entity Framework with Google Cloud SQL - February 2, 2017