Kendo Mvc DropdownList, How to set Initial Value

Question

i am using Kendo DropdownList with ajax binding.

With these codes i cannot set inital value that coming from model.It just fill the list with items and selects the first item.

 @(Html.Kendo().DropDownList()
 .Name("NATIONALITY") 
 .DataTextField("DESCRIPTION").HtmlAttributes(new { style = "width:220px" }) 
 .DataValueField("REFERENCEID")
 .Value(Model.NATIONALITY)
         //Placeholder("SELECT")
  .DataSource(source =>
                        {
  source.Read(read =>
             {
        read.Action("GetDefinitionDetails", "Definition", new { definitionCode = "NATIONALITY", addEmptyRow = false });
                            }).ServerFiltering(true);
                            }).ServerFiltering(true);
                        }))

But When i change Html.Kendo().DropDownList() to Html.Kendo().Combobox() it also fills the list and set the initial value as expected(which is the value that passing by model.)

Answer 1

With the latest(maybe works on earlier versions) build of KendoUI , initial Text value can be set on dropdowns:

   ....
   .Value(Model.DOCTORCODE.ToString()) //DOCTORCODE is  guid type
   .Text(Model.DOCTOR)  //DOCTOR is string type.This is optional.It should work without .Text property

Answer 2

On the Kendo DropDownList you can specify the SelectedIndex as follows:

@(Html.Kendo().DropDownList().SelectedIndex(myIndex)
 .//other builder stuff

With the DropDownList you can only specify the index of the item that is to be selected. You cannot chose this item by its text.

Using the client-side API you can set set selected value based on the text, by using the value method. Just add an event on the data bound that calls a JavaScript function. This function can then select the desired item based on its text.

Answer 3

What worked for me was naming the dropdownlist box the same as the property in the model:

View model (adminUserViewModel.cs)

//....other properties....
[Display(Name = "Security Level")]
[UIHint("SecurityLevelsEditor")]
public SecurityLevelViewModel securityLevel { get; set; }

in my /Views/Shared folder I have a custom template named:

 SecurityLevelsEditor.cshtml 

@model WebAdmin.Models.SecurityLevelViewModel
@(Html.Kendo().DropDownList().Name("securityLevel")
.DataTextField("levelDescription")
.DataValueField("securityLevelID")
.DataSource(datasource => datasource.Read(source => source.Action("Index", "SecurityLevels"))
)

)

Here's how it's wired up in the index.cshtml file:

@model IEnumerable<WebAdmin.Models.AdminUserViewModel>

@(Html.Kendo().Grid(Model).Name("adminUsersGrid")
    .Columns(columns =>{
    columns.Bound(item => item.userName);
    columns.Bound(item => item.securityLevel).ClientTemplate("#: securityLevel.levelDescription #" );    
    columns.Bound(item => item.firstName);
    columns.Bound(item => item.lastName);
    columns.Bound(item => item.email);
    columns.Command(command => { command.Edit(); command.Destroy(); });
})
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(m => {
            m.Id(p => p.userID);
            m.Field(item => item.securityLevel).DefaultValue(ViewData["defaultSecurityLevel"] as WebAdmin.Models.SecurityLevelViewModel);
        })
        .Update(u => u.Action("Update", "UserAdmin"))
        .Create(c => c.Action("_Create", "UserAdmin"))
        .Destroy(x => x.Action("_Destroy", "UserAdmin"))
        .Read(read => read.Action("clientIndex", "UserAdmin", new { id = @ViewBag.accountID }))
     )
    .Pageable().Sortable().Filterable()
    .ToolBar(toolbar => toolbar.Create())
    .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("AdminUserPopup"))

)

Answer 4

If your dropdownlist is in a template, use .HtmlAttributes to set initial value.

@(Html.Kendo()
    .DropDownList()
    .Name("barDropdown")
    .DataTextField("Text")
    .DataValueField("Value")
    .DataSource(ds => ds
        .Read(read => read.Action("getBar", "SomeController").Type(HttpVerbs.Post)))
    .HtmlAttributes(new { value = "#:BarValue#" })
    .ToClientTemplate()
    )