使用列表填充KendoComboBox

时间:2016-06-20 19:16:24

标签: jquery asp.net-mvc kendo-ui

根据KendoComboBox文档,填充它的方法如下:

 $("#teamName").kendoComboBox({
                dataTextField: "text",
                dataValueField: "value",                
                    dataSource: [
                  { text: "Item1", value: "1" },
                  { text: "Item2", value: "2" }
                ]
            })

但现在我在视图中有一个存储在Model.Teams中的列表。有人可以提出一个很好的方法来使用Model.Teams中的数据填充组合框吗?

例如:我想做类似的事情:

...
 var model = (function () {
                return {
                    Teams: '@Model.Teams'
                }});
...
...
dataSource: [
         for (var i = 0; i < model.Teams.Count; i++) {
            { text: "model.Team[i]", value: "model.Team[i]" },
         }
         ]     

但它不喜欢这种语法。

1 个答案:

答案 0 :(得分:1)

如果您想使用MVC,那么您应该可以在Kendo's Demo页面上进行操作。

我更新了您的jsFiddle以在JavaScript中完成所有操作。

&#13;
&#13;
var teams = ["A team", "B team"];
var ds = new kendo.data.DataSource();

$("#teamName").kendoComboBox({
  dataTextField: "text",
  dataValueField: "value",
  dataSource: ds
});

//Can use either method to add items to the data source
if (true) { //Change my to false, same results!
  for (var i = 0; i < teams.length; i++) {
    ds.add({
      text: teams[i],
      value: teams[i]
    });
  }
} else {
  ds.data(teams.map(function(team) {
    return { text: team, value: team };
  }));
}
&#13;
<link href="http://kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>
<input id="teamName" name="team" placeholder="Team name" style="width:300px">
&#13;
&#13;
&#13;