how to get selected value for Kendo DropDownList

Question

I can't figure out how to determine which item is selected in the my kendo dropdownlist. My view defines it's model as:

@model KendoApp.Models.SelectorViewModel

The ViewModel is defined as:

public class SelectorViewModel
{
    //I want to set this to the selected item in the view
    //And use it to set the initial item in the DropDownList
    public int EncSelected { get; set; }

    //contains the list if items for the DropDownList
    //SelectionTypes contains an ID and Description
    public IEnumerable<SelectionTypes> ENCTypes
}

and in My view I have:

@(Html.Kendo().DropDownList()
                    .Name("EncounterTypes")
                    .DataTextField("Description")
                    .DataValueField("ID")
                    .BindTo(Model.ENCTypes)
                    .SelectedIndex(Model.EncSelected)
                )

This DropDownList contains the values I expect but I need to pass the selected value back to my controller when the user clicks the submit button. Everything works fine except I don't have access to which item was selected from the controller's [HttpPost] action. So, how do i assign the DropDownList's value to a hidden form field so it will be available to the controller?

Answer 1

when select a value from a dropdown list, and in the selec event , we can get the selected value as following ,

@(Html.Kendo().DropDownList()
              .Name("booksDropDown")
              .HtmlAttributes(new { style = "width:37%" })
              .DataTextField("BookName")
              .DataValueField("BookId")
              .Events(x => x.Select("onSelectBookValue"))
              .DataSource(datasource => datasource.Read(action => action.Action("ReadBookDropDow", "PlanningBook").Type(HttpVerbs.Get)))
              .OptionLabel("Select"))

javascript function like following ,

   function onSelectBookValue(e) {    

                    var dataItem = this.dataItem(e.item.index());
                    var bookId = dataItem.BookId;
                 //other user code
    }

I believe this will help someone

Thanks

Answer 2

For anyone who found this wondering how to get the selected value in JavaScript, this is the correct answer:

$("#EncounterTypes").data("kendoDropDownList").value();

From the documentation: http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-value

Answer 3

Hello I was just going through this problem,kept on searching for 2 hours and came up with a solution of my own.

So here is the line to fetch any data bidden to the kendo drop down.

$("#customers").data("kendoDropDownList").dataSource._data[$("#customers").data("kendoDropDownList").selectedIndex].colour;

Just change the id customers to the id you have given tot he kendo drop down.

Answer 4

Maybe you should be using the DropDownListFor construct of the Kendo DropDownList like so in your view:

@(Html.Kendo().DropDownListFor(m => m.EncSelected)
                    .Name("EncounterTypes")
                    .DataTextField("Description")
                    .DataValueField("ID")
                    .BindTo(Model.ENCTypes)
                    .SelectedIndex(Model.EncSelected)
                )

This way, when you submit, it will be availble on the POST request and you won't need to put an hidden field anywhere.

BUT should you need to use the hidden field for some reason, put it there, subscribe the the select event of the dropdown list and put using JQuery (for instance) put the selected item on the hidden field.

It's your choice :)

Answer 5

Updated DEMO

$("#EncounterTypes").kendoDropDownList().val();