我在项目中使用kendo complete for MVC。
我有一些表单中的国家列表，我显示国家名称，但存储国家代码。
我遇到了以下问题：当用户输入不在列表中的内容时，该值将被发送到服务器。如何避免这种情况并发送空值（表示未选择任何值）？
以下是我的代码：
@Html.Kendo()
.ComboBoxFor(model => model.CountryCode)
.BindTo(ViewBag.Countries as IEnumerable<SelectListItem>)
.Filter(FilterType.StartsWith)
.Placeholder("Country")
.HtmlAttributes(new { @class = "span9" })
这个问题已经在这里解决了。使用ComboBox的change事件，像这样：
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。
编辑：如何在Razor语法中使用：
@(Html.Kendo().ComboBox()
.Name("cb")
.Events(it => it.Change("cbIsChanged"))
...
)
<script>
cbIsChanged = function (e) {
...
}
</script>
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;
}
圣骑士，当您使用ASP.NET MVC包装器和组合框时，这里有一个解决方案。以下是razor和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/
该文章还提供了我用于原型设计stackoverflow解决方案的github .NET解决方案的链接
干杯
$(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');
});
这是我使用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());
}
},
}),
}
};
$(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());
});
});
@(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;
}