How to set default value in Kendo DropDownList

Question

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.

Harlen

Answer 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;
    }
}

Stiegler

No, it is not working. I tried both string and integer value in .Value field and both failed. My data in BindTo is just list<string> and so no DataTextField and DataValueField. – Harlen

You must bind to List<SelectListItem> – Stiegler

@Stiegler model should be Model – Aracelyaraceous

Answer 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(); 

Harlen

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

Zuleika

Answer 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:"行政区划"
    });

Filippa

Answer 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("");

Sibship