MVC Kendo总结之-----> ComboBox

来源：互联网发布：足彩n串1算法编辑：程序博客网时间：2024/05/17 22:42

   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,会出现奇怪的效果!^~^

使用jQuery获取comboBox的值：

$("#insigniaCbo").data("kendoComboBox").value();

使用jQuery设置comboBox的值：

$("#insigniaCbo").data("kendoComboBox").value("lyy");

使用jQuery设置comboBox是否可用：

$("#insigniaCbo").data("kendoComboBox").enable(true);//可用

$("#insigniaCbo").data("kendoComboBox").enable(false);//不可用

使用jQuery设置comboBox为只读：（官网API上comboBox有readonly方法，但使用后,comboBox的下拉列表就不能使用了，不知为何？）

$("#insigniaCbo").data("kendoComboBox").input.attr("readonly",true);//只读

$("#insigniaCbo").data("kendoComboBox").input.attr("readonly",false);//非只读

0 0