How to set KendoComboBox( jquery UI) value with ViewModel value?

Question

View(model) is returned from a controller IActionResult method, but Kendo combo-box selected value is not get reflected like other UI elements.

How can I set the selected value of the combo-box with the View model value?

Answer 1

You can set it with the value of KendoComboBox. For example:

$("#test").kendoComboBox({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [
        { text: "", value: "1" },
        { text: "", value: "2" },
        { text: "", value: "3" },
    ],
    filter: "contains",
    suggest: true,
    index: -1,
    value: '@Model.yourValue'
});

Answer 2

Use .Value(model), see example below. Polyester will be the selected value.

@(Html.Kendo().ComboBox()
      .Name("fabric")
      .Filter("contains")
      .Placeholder("Select fabric...")
      .DataTextField("Text")
      .DataValueField("Value")
      .Value("2")
      .BindTo(new List<SelectListItem>() {
          new SelectListItem() {
            Text = "Cotton", Value = "1"
          },
          new SelectListItem() {
            Text = "Polyester", Value = "2"
          },
          new SelectListItem() {
            Text = "Cotton/Polyester", Value = "3"
          }
      })
      .Suggest(true)
      .HtmlAttributes(new { style="width:100%;" })
)