CODEWITHSUNDEEP
javascripthtmldrop-down-menukendo-uikendo-dropdown
웃웃웃웃웃
웃웃웃웃웃

Reputation: 362

get selected id of kendo drop down value

how to get id of selected name from dropdown.
whene select Apples then got id 1and select Oranges then 2.
this is simple kendo dropdown example.

<body>
            <input id="dropdownlist" />

            <script>
                $("#dropdownlist").kendoDropDownList({
                  dataSource: [
                    { id: 1, name: "Apples" },
                    { id: 2, name: "Oranges" }
                  ],
                  dataTextField: "name",
                  dataValueField: "id",
                  index: 1,
                  select: onSelect
                });

                function onSelect(e) {
                console.log(e);
                  };
            </script>
</body>

thanks.

Upvotes: 3

Views: 22420

Answers (4)

sanme98
sanme98

Reputation: 572

Please use this.dataItem()

function onSelect(e) {
    alert(this.dataItem().id);
    alert(this.dataItem().Name);
};

Upvotes: 2

Mahdi Ataollahi
Mahdi Ataollahi

Reputation: 5221

To select ID of the selected item use:

$("#dropdownlist").val()

And to select TEXT of the selected item use:

$("#dropdownlist").data("kendoDropDownList").text()

Upvotes: 1

hutchonoid
hutchonoid

Reputation: 33326

In order to retrieve the selected Id you can use the dataItem object and access the id within it with change event:

 var dataItem = e.sender.dataItem();
 $('#id').text(dataItem.id);

This will get you access to any data within the object too:

$('#name').text(dataItem.name);

Working example

http://jsfiddle.net/ygBq8/1/

Html

<input id="dropdownlist" /><br/>
<span id="id" >Id</span><br/>
<span id="name" >Name</span><br/>

JavaScript

$("#dropdownlist").kendoDropDownList({
                  dataSource: [
                    { id: 1, name: "Apples" },
                    { id: 2, name: "Oranges" }
                  ],
                  dataTextField: "name",
                  dataValueField: "id",
                  index: 1,
                  change: onChange
                });

                function onChange(e) {
                   var dataItem = e.sender.dataItem();
                   $('#id').text(dataItem.id);
                   $('#name').text(dataItem.name);
                  };

Upvotes: 6

Robin Giltner
Robin Giltner

Reputation: 3055

The Select event is a bit more difficult one to use, as that event fires before the item is selected.

If you use the Change event, you should be able to get the dataItem with

this.dataSource.get(this.value())

See sample http://jsbin.com/OcOzIxI/2/edit

Upvotes: 3

Related Questions