How to set default value in Kendo DropDownList

问题

I have a Kendo DropDownList, but strangely enough I can not set its initial value.

Html.Kendo().DropDownList()
    .Name("PersonalCoachName")
    .BindTo(new SelectList((List<string>)ViewData["coachResources"]))
    .HtmlAttributes(new { style = "font-size:8pt;" })

ViewData["coachResources"] is a List of string type. Regardless I use

.BindTo(new SelectList((List<string>)ViewData["coachResources"], "Default"))
or 
.SelectedIndex(3)

DropDownList does not change it value and only display the 1st value in the list. I need help on this. Thanks.

回答1:

Use the Value-method. See example code below.

@(Html.Kendo().DropDownList()
      .Name("DropDownListName")
      .DataTextField("Text")
      .DataValueField("Value")
      .BindTo(model.DropDownListItems)
      .Value(model.Selected)
      )

EDIT: DropDownList needs to be bind to List<SelectListItem> and it can be initialized as seen below.

var items = new List<SelectListItem>
{
    new SelectListItem { Text = "Item0", Value = "0" }, 
    new SelectListItem { Text = "Item1", Value = "1" } 
};

In addition, I would recommend to use MVVM to attach it to view.

public class DropDownViewModel
{
    public String Selected;
    public List<SelectListItem> DropDownListItems;

    public DropDownViewModel(String selected, List<SelectListItem> dropDownListItems)
    {
        Selected = selected;
        DropDownListItems = dropDownListItems;
    }
}

回答2:

The value works only in jquery, not in html helper. So it works in Jquery like

    var dropdownlist = $("#PersonalCoachName").data("kendoDropDownList");
    dropdownlist.value(coachId);
    dropdownlist.refresh();

回答3:

Use the property 'index' while initializing the kendo combobox to set the Default value.

 $("#fabric").kendoComboBox({
            autoWidth: true,
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
                            { text: "Cotton", value: "1" },
                            { text: "Polyester", value: "2" },
                            { text: "Cotton/Polyester", value: "3" },
                            { text: "Rib Knit", value: "4" }
                        ],
            filter: "contains",
            suggest: true,
            index: 3
        });

回答4:

There are two ways to set default value when initializing a kendo dropdown list.

$("#yourdropdownlist").kendoDropDownList({
        dataTextField: "valueName",
        dataValueField: "valueCode",
        dataSource: [
            { valueName: "A", valueCode: "0" },
            { valueName: "B", valueCode: "1" }
        ],
        //Method 1 -set index
        //index: 0
        //Method 2 - set default value and text
        value: "0",
        text:"行政区划"
    });

回答5:

This was my dropdown:

@(Html.Kendo().DropDownList()
                     .HtmlAttributes(new { style = "width:95%", id = "customerSelection" })
                     .Name("customers-dropdown")
                     .DataTextField("Text")
                     .DataValueField("Value")
                     .BindTo(Model)
                     .OptionLabel("Select Customer...")
                )

I wanted to select the default option "Select Customer..." upon some function. I was able to do this using following code:

var dropdownBox = $("#customerSelection").data("kendoDropDownList");
    dropdownBox.text("");
    dropdownBox.value("");

来源：https://stackoverflow.com/questions/28165391/how-to-set-default-value-in-kendo-dropdownlist

标签

kendo-ui

kendo-dropdown