CODEWITHSUNDEEP
jqueryasp.net-mvckendo-ui
BMills
BMills

Reputation: 901

populating KendoComboBox with list

according to the KendoComboBox documentation, the way to populate it is as follows:

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

but now I have a list in the view which is stored in Model.Teams. Can someone suggest a good way to populate the combobox with the data in Model.Teams?

eg: I'm wanting to do something like:

...
 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]" },
         }
         ]

but it does not like the syntax of this.

Upvotes: 0

Views: 490

Answers (1)

Sunny Patel
Sunny Patel

Reputation: 8077

If you wanted to use the MVC, then you should be able to follow along on Kendo's Demo page.

I updated your jsFiddle to do this all within the JavaScript.

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

Upvotes: 1

Related Questions