public List<ComboItem> getCboList()
{
DataTable dt= insigniaHelper.GetCboDataSource();
List<ComboItem> cboList = new List<ComboItem>();
if (dt!= null && dt.Rows.Count > 0)
{
foreach (DataRow row in dt.Rows)
{
ComboItem item = new ComboItem();
item.Text = (row["Text"]).toString();
item.Value = (row["Value"]).toString();
cboList.Add(item);
}
}
return cboList;
}
public class ComboItem
{
public string Text { get; set; }
public string Value { get; set; }
}
<div style="display: inline-block; margin-top: 5px;text-align: right;">
@(Html.Kendo().ComboBox()
.Name("insigniaCbo")
.HtmlAttributes(new { style = "width:110px;" })
<span style="color:#FF0000;">.DataTextField("Text")
.DataValueField("Value")
.BindTo(Model.dataSourceList)
.Value(Model.defaultValue) </span>
.Events(events =>
{
events.Change("insigniaCboChange");
})
)
</div>
<div id="divcbo" style="margin-left:50px;width:30%;float:none;display:inline-block;">
@(Html.Kendo().ComboBox()
.Name("insigniaCbo")
//.Filter("contains")
.HtmlAttributes(new { style="width:220px"})
.Placeholder("Select fabric...")
.DataTextField("Text")
.DataValueField("Value")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("getCboList", "Home").Data("getRandomNumber");
});
})
.SelectedIndex(0)
.Events(events => {
events.Change("insigniaCboChange");
})
)
</div>
function insigniaCboChange(){
//doing somgthing
}
function getRandomNumber(){
//code
}
DataTextField:comboBox显示的字段
DataValueField:comboBox选中字段的值
BindTo:可以将数据源绑定到一个集合
Value:comboBox的默认值
Event:comboBox的事件
DataSource:comboBox读取数据源的路径、函数名和所需的参数
HtmlAttributes:设置comboBox的属性或者添加CSS样式,最后不要在其中设置margin,会出现奇怪的效果!^~^
$("#insigniaCbo").data("kendoComboBox").value();
使用jQuery设置comboBox的值:
$("#insigniaCbo").data("kendoComboBox").value("lyy");
使用jQuery设置comboBox是否可用:
$("#insigniaCbo").data("kendoComboBox").enable(true);//可用
$("#insigniaCbo").data("kendoComboBox").enable(false);//不可用
$("#insigniaCbo").data("kendoComboBox").input.attr("readonly",true);//只读
$("#insigniaCbo").data("kendoComboBox").input.attr("readonly",false);//非只读