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

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 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

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 4

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 5

If you want to read also out the text of the dropdown, you can get or set the value by using the following kendo function:

$('#EncounterTypes').data("kendoDropDownList").text();

REFERENCE TO THE DOCUMENTATION

Using this .val() as @Vivek Parekh mentions will not work - there is no function .val() in the kendo framework.

If you want you could use jQuery and get the value back: $('#EncounterTypes').val()

Answer 6

Updated DEMO

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