Kendo UI ComboBox DropDownList Mashup

By February 13, 2014JavaScript, Kendo UI

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.

$('.combobox').kendoComboBox({
    dataSource: viewModel.testData,
    autoBind: false,
    dataTextField: 'name',
    dataValueField: 'id',
    suggest: true,
    placeholder: 'Select a Fruit',
    change: function (e) {
        var cmb = this;
        // selectedIndex of -1 indicates custom value
        if (cmb.selectedIndex < 0) {
            cmb.value('');
        }
    }

A few things to note:

  1. Set “suggest” to true so it matches the entered text to available values
  2. 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:

The following two tabs change content below.
  • Brent Krueger

    Thank you for sharing this, it was just what I wanted. I wish Telerik would include a UI element that did this by default.