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?

https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox/methods/value — GaloisGirl, Jun 17 '20 at 13:23

Fateme Mirjalili · Accepted Answer · 2020-06-18T06:39:27.063

2

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

edited Jun 18 '20 at 06:39

answered Jun 18 '20 at 06:16

Fateme Mirjalili

762
7
16

1

as I was using JqueryUI to set up the combo-box, this answer actually solves the issue. Thanks @Fateme for the answer! – DaminiVyas Jun 22 '20 at 13:44

score 1 · Answer 2 · answered Jun 17 '20 at 14:13

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

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

2 Answers2