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?

Wear

In resume: $("#myListID").data("kendoDropDownList").value(); – Fidelity

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

Aristate

I would downvote if I could, but the reason may be because the POST request will contain the value provided by "DataTextField" and not "DataValueField" – Futrell

Actually, that is not right. If one is using the DropDownListFor which is bound to a model, the post request will contain the dropdownlist selected value contained on the Model property to which the dropdown is bound. – Aristate

You can see that in the following gist and see the request using something like Fiddler. – Aristate

Not sure why someone downvoted this... would be nice to get some sort of reason about the downvote.... :^) – Aristate

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

Momentarily

Brian - thanks for the reply. You are correct about accessing the value using the value() method. However, in this case, I needed to access the value in my controller, not the view. It's been 2 years since I posted this question. So, i'm going by memory (and a bad one at that). But i'm pretty sure using DropDownListFor passed the value back to my controller. – Wear

I saw that, it's just that I've ended up here multiple times trying to remember how to do it in JavaScript, so I decided to just put the answer here. – Momentarily

this doesnt work for me, I get [obj, obj] as the value. – Zillion

@Zillion Works for me and it's what's in the docs - not sure what to tell you. :/ Are you sure you didn't use val() or something? – Momentarily

This doesn't seem to be working for me in IE11 – Peach

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

Aprilette

Exactly what I needed! Thanks – Glum

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.

Resistless

if you do this you need to subtract one from the selected index since the index will be 1 more than the array position Example: $("#customers").data("kendoDropDownList").selectedIndex - 1 – Wharfage

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

Ragman

Answer 6

Updated DEMO

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

Lowrey

This should not be upvoted I'm afraid. Calling .kendoDropDownList() actually re-initializes the control, which in my case, where I'm doing AJAX binding, removed all the data from it. I posted an answer that should work in all cases. – Momentarily

Answer 7

You can get the selected item like following code and then use item.property to get further information

var selectedFooType = $("#fooType").data("kendoDropDownList").dataItem();
    selectedFooType.name 
//OR
    selectedFooType.id

Mountfort