Избегайте отправки значений ComboBox, которых нет в списке

Question

Я использую кендо для MVC в проекте.

У меня есть список стран в некоторых формах, и я показываю название страны, но сохраняю код страны.

У меня есть следующая проблема: когда пользователь вводит что-то, чего нет в списке, это значение будет отправлено на сервер. Как их избежать и отправить пустое значение (означает: значение не выбрано)?

Вот мой код:

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

Answer 1

Тот же вопрос покрыт here. использовать событие изменения в ComboBox вроде этого:

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); 
     } 
    } 

Вот 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

Кендо выпадающий API возвращает значение, введенное в поле со списком - если элемент не существует в списке. Мы должны вручную определить, существует ли элемент в списке или нет.

Link - ComboBox/API

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

Используйте эту функцию, чтобы получить значение 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

Я получил этот базовый код из форумов Telerik и модифицировать его, чтобы быть немного умнее. Это будет использовать текущий текст в попытке найти нечеткий поиск, и если он ничего не найдет, закроет его.

Попробуйте здесь: 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

Паладина, здесь решение при использовании ASP.NET MVC оберток & выпадающих. Ниже приведена бритва & javascript, чтобы заставить ваше решение работать.

<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> 

следующий сценарий будет выплескивать выпадающий если введенное значение в списке, определенном значением

<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> 

Вы можете проверить более тщательно ответ со ссылками используется @ мой блог http://prestoasp.net/how-to-limit-a-kendo-ui-combobox-drop-down-to-valid-items-using-asp-net-mvc-wrappers/

В статье также есть ссылки на решение github .NET, которое я использую для прототипирования stackoverlfow Решения

Приветствия

Answer 5

Используйте DropDownList виджет вместо ComboBox. DropDownList работает очень похоже, но не позволяет пользователям вводить свои собственные тексты.

Answer 6

установить значение после ввода значения мусора в кендо поиске поля со списком осуществлением ниже коды

$(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: "", 
       field: this.options.dataTextField, 
       operator: "contains" 
      }); 
      this.select(1); 
     } 
    } 
}).data('kendoComboBox'); 

$('#showValue').click(function() { 
    alert(cb.value()); 
}); 

});

Answer 7

Это, как я делаю это с MVVM:

HTML:

<div id="main_pane_add_truck" data-role="view" data-model="APP.models.main_pane_add_truck"> 
    <input id="main_pane_add_truck_customer_id" data-role="combobox" data-placeholder="Type a Customer" data-value-primitive="true" data-text-field="Name" data-value-field="CustomerID" 
    data-bind="value: customer_id, source: customer_id_ds, events: { change: customer_id_change }" /> 
</div> 

Javascript модель:

window.APP = { 
models: { 
    main_pane_add_truck: kendo.observable({ 
     customer_id: null, 
     customer_id_ds: new kendo.data.DataSource({ 
      type: "odata", 
      transport: { 
       read: ROOTURL + BODYURL + "MyCustomers" 
      }, 
      schema: { 
       model: { 
        fields: { 
         CustomerID: { type: "number" }, 
         Name: { type: "string" }, 
        } 
       } 
      } 
     }), 
     customer_id_change: function customer_id_change(e) { 
      try { 
       var found = false; 
       var combobox = $("#main_pane_add_truck_customer_id").data("kendoComboBox"); 
       var customer_id = e.data.customer_id; 
       var dataSource = this.get("customer_id_ds"); 
       var data = dataSource.data(); 
       var data_length = data.length; 
       if (data_length) { 
        for (var i = 0; i < data_length; i++) { 
         if (data[i].CustomerID === customer_id) { 
          found = true; 
         } 
        } 
        if (!found) { 
         this.set("customer_id", data[0].CustomerID); 
         combobox.select(0); 
        } 
       } 
       else { 
        this.set("customer_id", null); 
       } 
      } 
      catch (e) { 
       console.log(arguments.callee.name + " >> ERROR >> " + e.toString()); 
      } 
     }, 
    }), 
} 
}; 

Answer 8

Для того, чтобы проверить, если определенное значение, введенное в поле со списком существует заключается в использовании следующих двух javascript-методов.

Вы можете проверить это следующим образом, предполагая, что идентификатор из вас поле со списком "ComboBoxId"

@(Html.Kendo().ComboBoxFor(m => m.ComboBoxId) 
     .BindTo(Model.ComboBoxItems) 
     .Filter(FilterType.Contains) 
     .HighlightFirst(true) 
) 

if (getValueOfKendoCombo('#ComboBoxId') === null) { 
    alert('Please select a valid value from the list'); 
    return; 
} 

function getValueOfKendoCombo(comboBoxId) { 
    var comboBox = $(comboBoxId).data('kendoComboBox'); 
    var ds = comboBox.dataSource; // data source in order to get a list of data items 
    var data = ds['_data']; // object containing data 
    var value = comboBox.value(); // value to test 
    var itemValue = getByValue(data, value); // loop through all data items and determine if value exists 
    if (itemValue == null) { // check if the input value exists 
    comboBox.value(null); // set the comboBox text value to null, because it does not exist on the list 
    return null; //return value null - use null to check if the value exists 
    } 
    return itemValue; 
} 

function getByValue(data, value) { 
    // loop through all data items and determine if value exists against the Value of the object, otherwise return null 
    for (var i = 0; i < data.length; i++) { 
    if (data[i]['Value'] === value) { 
     return data[i]['Value']; 
    } 
    } 
    return null; 
}