CODEWITHSUNDEEP
asp.netkendo-uidropdownboxkendo-dropdown
Ram Singh
Ram Singh

Reputation: 6918

How to Get Dropdown's Selected Item's text in Kendo UI?

I am using Kendo UI Controls. I want to get the selected text of the dropdown list in jquery. I have used this syntax : 

 $("#ddl").data("kendoDropDownList").text();

I am able to get the text in all browsers except IE. I don't know why this is not working in IE, please help me. Is there any other way to get selected Text ?

Upvotes: 37

Views: 93998

Answers (8)

Shakti Srivastav
Shakti Srivastav

Reputation: 300

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

Upvotes: -1

user1477388
user1477388

Reputation: 21430

Here's another way:

e.item[0].textContent

Full example:

$("#ancillaryTestDDL").kendoDropDownList({
    dataSource: that.viewModel.ancillaryTestDS,
    dataTextField: "DisplayValue",
    dataValueField: "Id",
    select: function (e) {
        console.log(e.item);
        console.log(e.item[0].textContent);
    }
});

Upvotes: 1

IUnknown
IUnknown

Reputation: 659

I agree with d.popov, your question does seem to be the answer. placing your statement in an alert function pops up the selected text:

Alert($("#ddl").data("kendoDropDownList").text());

Tested in IE11. The actual IE version related to the problem was never mentioned...

Upvotes: 0

dush88c
dush88c

Reputation: 2106

When a value is selected from a Dropdownlist in select event the selected value is available 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; // value of the dropdown
                var bookName = dataItem.BookName; // text of the dropdown
               //other user code
}

I believe this will help someone.

Thanks

Upvotes: 5

Dinesh Haraveer
Dinesh Haraveer

Reputation: 1804

In order to get text value of a DropDownList use command as below :

$("#ddl").data("kendoDropDownList").text();

Upvotes: 55

Zach
Zach

Reputation: 51

For DropDownLists, you include a DisplayText and a Value. DisplayText being what the user selects and the Value being what is used in the back-end.

Example: You have a database that stores Contact information and your DisplayText would be the Contacts Name and the Value would be the Primary Keys ID field for that particular row in the database.

ID - 1 Name - John Smith

$("#ddl").data("kendoDropDownList").dataItem().DisplayText = John Smith
$("#ddl").data("kendoDropDownList").dataItem().Value = 1

This is what I was looking to do, I hope this is the answer you were also looking for.

Upvotes: 5

karthickj25
karthickj25

Reputation: 1197

Here is a fiddle is anyone wanna tryout

<select id="testDrpDown">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
    <option value="1231231">and so on</option>
</select>
</br>
</br>
<button onclick="MethOne()">Method one</button>
</br>
</br>
<button onclick="Methtwo()">Method one</button>

<script>
$("#testDrpDown").kendoDropDownList();

//var can be used anuwhere in js
var dropdown = $("#testDrpDown").data("kendoDropDownList");

function MethOne() {
    alert($("#testDrpDown").data("kendoDropDownList").text());
}

function Methtwo() {
    alert(dropdown.text());
}
</script>

Upvotes: 2

MustafaP
MustafaP

Reputation: 6633

You can try like this 

 var ddl= $("#ddl").data("kendoDropDownList").dataItem($("#ddl").data("kendoDropDownList").select()).FieldName;
//FieldName is the text field of DataSource ---  .DataTextField("FieldName")

Upvotes: 1

Related Questions