Edit this page

Prevent Submission of Value that Is not Present in the ComboBox DataSource

Environment

Product Progress Kendo UI ComboBox
Operating System All
Browser All
Preferred Language JavaScript

Description

How can I prevent the submission of a value that is entered in the input of the ComboBox when this value does not match any of the items in the DataSource?

Solution

In the handler of the ComboBox change event which fires on blurring the widget, check if the entered text matches an item in the DataSource. If it does not, replace the entered text with an empty string.

    <input id="combobox"  />
    <script>
       $(document).ready(function() {
        var items = [
            { Value : '1', Name : 'Anna' },
            { Value : '2', Name : 'Bob' },
            { Value : '3', Name : 'Daniel' },
            { Value : '4', Name : 'Charlie' }
        ];

        $('#combobox').kendoComboBox({
            dataSource : items,
            dataTextField : 'Name',
            dataValueField : 'Value',
            filter : 'contains',
            change : function (e) {
                if (this.value() && this.selectedIndex == -1) {    
                    this.dataSource.filter({
                        value: this.value(),
                        field: this.options.dataTextField,
                        operator: "contains"
                    });
                    this.select(0);
                    if ( this.selectedIndex == -1 ) {                    
                        this.text("");
                    }
                }
            }
        }).data('kendoComboBox');
    });
    </script>

For the full implementation of the approach, refer to this Dojo example.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy