Avoid ComboBox sending values that aren't on the list

Question

I'm using kendo complete for MVC in project.

I have list of countries in some forms and I display country name, but store country code.

I have following problem: When user enters something, which is not on the list, that value will be send to server. How to avoid them and send empty value (means: no value selected)?

Here is my code:

@Html.Kendo()
    .ComboBoxFor(model => model.CountryCode)
    .BindTo(ViewBag.Countries as IEnumerable<SelectListItem>)
    .Filter(FilterType.StartsWith)
    .Placeholder("Country")
    .HtmlAttributes(new { @class = "span9" })

Answer 1

Same question is covered here. use the change event of the ComboBox like this:

change : function (e) {
        if (this.value() && this.selectedIndex == -1) {   //or use this.dataItem to see if it has an object                 
            alert('Invalid Entry!');
            cb.select(1);
        }
    }

Here is the jsfiddle.

EDIT : How to use in Razor syntax:

@(Html.Kendo().ComboBox()
    .Name("cb")
    .Events(it => it.Change("cbIsChanged"))
    ...
        )

<script>
    cbIsChanged = function (e) {
        ...
    }
</script>

Answer 2

Kendo combobox API returns the value entered in the combobox - if the item is no there in the list. We have to manually find whether the item exist in the list or not.

Link - ComboBox / API

var comboId = '#movies';
alert(GetComboBoxValue(comboId));

Use this function to get Value of ComboBox.

function GetComboBoxValue(comboId){
    var comboValue = -1;
    $(comboId).data('kendoComboBox').select(function (dataItem) {
        // Note: you have to perhaps change the property - text as per the value
        // this is for the example provided in the link only
        if (dataItem.text == $(comboId').data('kendoComboBox').text()){
            comboValue = dataItem.value;
            break;
        }
    });
    //will return -1, if data is not found from the list
    return comboValue;
}

Answer 3

I got this base code from the Telerik forums and modified it to be a bit smarter. This will use the current text in an attempt to find fuzzy search and if it finds nothing, blanks it.

Try it here: http://jsfiddle.net/gVWBf/27/

$(document).ready(function() {
    var items = [
        {value : '1',
         desc : 'fred'},
        {value : '2',
         desc : 'wilma'},
        {value : '3',
         desc : 'pebbles'},
        {value : '4',
         desc : 'dino'}
    ];

    var cb = $('#comboBox').kendoComboBox({
        dataSource : items,
        dataTextField : 'desc',
        dataValueField : 'value',
        filter : 'contains',
        change : function (e) {
            if (this.value() && this.selectedIndex == -1) {    
                this._filterSource({
                    value: this.value(),
                    field: this.options.dataTextField,
                    operator: "contains"
                });
                this.select(0);
                if ( this.selectedIndex == -1 ) {                    

                    this.text("");
                }
            }
        }
    }).data('kendoComboBox');


});

Answer 4

Paladin, here is a solution when using ASP.NET MVC wrappers & a combobox. The following is the razor & javascript to get your solution working.

<div class="form-group">
    @Html.LabelFor(model => model.GlAccount, new { @class = "control-label col-md-4" })
    <div class="col-md-6">
        @(Html.Kendo<OrderRequest>().ComboBoxFor(m => m.GlAccount).DataValueField("Number").DataTextField("Description").Filter(FilterType.Contains).HighlightFirst(true)
                    .DataSource(src => src.Read(read => read.Action("GetGlAccounts", "Lookup", new { area = "" }))).Events(events => events.Change("app.common.onChangeRestrictValues")))
        @Html.ValidationMessageFor(model => model.GlAccount)
</div>

the following script will empty out the combobox if the entered value is not in the defined value list

<script>
function onChangeRestrictValues(e) {
  if (this.value() && this.selectedIndex == -1) {
    var dt = this.dataSource._data[0];
    this.text(dt[this.options.dataTextField]);
    this.select();
  }
}
</script>

You can check out a more thorough answer with references used @ my blog http://prestoasp.net/how-to-limit-a-kendo-ui-combobox-drop-down-to-valid-items-using-asp-net-mvc-wrappers/

The article also has links to the github .NET solution I'm using for prototyping stackoverlfow solutions

Cheers