CODEWITHSUNDEEP
javascriptjquerywebkendo-uikendo-dropdown
Glenn Mohammad
Glenn Mohammad

Reputation: 4755

Kendo UI Web - DropDownList: select event doesn't return selected value properly

I am binding a DropDownList widget to select event like so:

var items = [
    { text: 'Item 3', value: '3' },
    { text: 'Item 4', value: '4' }
];

var dropDownListEl = $('#dropdownlist');
dropDownListEl.kendoDropDownList({
    dataTextField: 'text',
    dataValueField: 'value',
    index: 0
});

var kDropDownList = dropDownListEl.data('kendoDropDownList'),
    ds = kDropDownList.dataSource;

items.forEach(function (item) {
    ds.add(item);
});

kDropDownList.bind('select', function (e) {
    console.log('this.value(): ' + this.value());
});

But, it doesn't return the correct value when I do the selection.

I have been trying almost every possibility there is, none is working. http://jsfiddle.net/glenn/gxJ3S/

It's driving me insane!

Upvotes: 2

Views: 15579

Answers (5)

user1477388
user1477388

Reputation: 21440

I think Kendo changed their API:

Important: Since version Q1 2015 (2015.1.318), the option label has been moved outside the item list DOM collection. As a result, jQuery.index() can no longer be used to reliably detect if the option label is the selected dropdown item.

Ref. http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#events-select

Ultimately, this is the only thing that worked for me:

var item = e.sender.dataItem(e.item)

Upvotes: 1

softawareblog.com
softawareblog.com

Reputation: 990

use change event instead, it's more straightforward 

..
  change: function(e) {
    var value = this.value();
    // Use the value of the widget
  }
..

Upvotes: 3

Ihor Pavlyk
Ihor Pavlyk

Reputation: 1331

var _item = e.sender.dataItem(e.sender.selectedIndex);

Upvotes: 1

Timea Emma
Timea Emma

Reputation: 11

In case you use angular, you can get the selected item with: e.sender.dataItem(e.item.index())

Upvotes: 1

Goddard
Goddard

Reputation: 813

Binding Select Event of Kendo DropDownList as follow to get correct selected item

   kDropDownList.bind('select', function (e) {
       var dataItem = this.dataItem(e.item.index());
        console.log('this.value(): ' + dataItem.value);

   });

Here is the working JSFiddle

Upvotes: 9

Related Questions