I'm trying to change the "change" event of a Kendo UI Dropdownlist, but unfortunately I haven't had any luck. Here's the code I've tried so far:

Specifically, here's my dropdownlist initializer:

var onChange = function(e)
{
    alert("something changed");
};
// create DropDownList from input HTML element
$("#dropdown").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data,
    index: 0,
    change: onChange
});

And this is my attempt to change that function later:

onChange = function(e){alert("attempt 1");};
var dropDownData = $("#dropdown").data("kendoDropDownList");
dropDownData.options.change = function(e){alert("attempt 2");}
dropDownData.refresh();

Specifically, I first tried just changing the onChange function, and then (when that didn't work), I tried changing the options.change function directly. While the options.change function did change (when I examined it in chrome debugger), the dropdownlist's actual functionality remained unchanged. I think I need to refresh the dropdownlist or something to make my edits actually take effect. Does anyone know how I can actually get the kendo grid to refresh and display my data?

I'm trying to change the "change" event of a Kendo UI Dropdownlist, but unfortunately I haven't had any luck. Here's the code I've tried so far: http://trykendoui.telerik./ukeV

Specifically, here's my dropdownlist initializer:

var onChange = function(e)
{
    alert("something changed");
};
// create DropDownList from input HTML element
$("#dropdown").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: data,
    index: 0,
    change: onChange
});

And this is my attempt to change that function later:

onChange = function(e){alert("attempt 1");};
var dropDownData = $("#dropdown").data("kendoDropDownList");
dropDownData.options.change = function(e){alert("attempt 2");}
dropDownData.refresh();

Specifically, I first tried just changing the onChange function, and then (when that didn't work), I tried changing the options.change function directly. While the options.change function did change (when I examined it in chrome debugger), the dropdownlist's actual functionality remained unchanged. I think I need to refresh the dropdownlist or something to make my edits actually take effect. Does anyone know how I can actually get the kendo grid to refresh and display my data?

• javascript
• asp
• asp-mvc
• kendo-ui

2 Answers 2

I see you've already found a work-around, but I thought I'd add some more explanations.

The reason why changing it like this

onChange = function(e){alert("attempt 1");};

doesn't work is that you're passing a function to the widget, and the widget calls that function at appropriate times. You're not passing a reference to the variable onChange. So changing the variable won't affect the widget.

The reason why

dropDownData.options.change = function(e){alert("attempt 2");} 

doesn't work is that Kendo stores handlers in its own structure (which is necessary since you can bind multiple handlers for the same event!), so it doesn't call whatever is in options.change at any given moment in time.

However, there is a setOptions method, and with that you could've made your second approach work:

dropDownData.setOptions({
    change: function (e) {
        alert("attempt 2");
    }
});

I ended up using a simple work-around. When I put in the line

change: onChange

Kendo actually hardcoded in the function body into the dropDownData.options.change function, rather than referencing my named javascript function. It looked like this in the debugger:

function(e)
{
  alert("something changed");
};

So my workaround was simply to use an anonymous function in the Kendo call. So I changed change: to

change: function(e) { onChange(e) };

Then when I changed onChange later, kendo referenced the named javascript function and called my updated version. Here's the working demo: http://trykendoui.telerik./AkIW/2