Kendo UI Web - DropDownList: select event doesn't return selected value properly
Solution 1
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);
});
Solution 2
use change event instead, it's more straightforward
..
change: function(e) {
var value = this.value();
// Use the value of the widget
}
..
Solution 3
var _item = e.sender.dataItem(e.sender.selectedIndex);
Solution 4
In case you use angular, you can get the selected item with:
e.sender.dataItem(e.item.index())
Solution 5
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)
Comments
-
Glenn Mohammad almost 2 years
I am binding a
DropDownList
widget toselect
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!
-
ken2k over 8 yearsDo note now you should use
this.dataItem(e.item)
instead. See telerik.com/forums/…