修改 Kendo UI Dropdownlist 的 change 事件答案

【问题标题】：Modify change event of Kendo UI Dropdownlist修改 Kendo UI Dropdownlist 的 change 事件
【发布时间】：2014-06-06 19:28:20
【问题描述】：

我正在尝试更改 Kendo UI 下拉列表的“更改”事件，但不幸的是我没有任何运气。这是我到目前为止尝试过的代码：http://trykendoui.telerik.com/ukeV

具体来说，这是我的下拉列表初始化程序：

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
});

这是我稍后更改该功能的尝试：

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

具体来说，我首先尝试只更改 onChange 函数，然后（当它不起作用时），我尝试直接更改 options.change 函数。虽然 options.change 函数确实发生了变化（当我在 chrome 调试器中检查它时），但下拉列表的实际功能保持不变。我想我需要刷新下拉列表或其他东西才能使我的编辑真正生效。有谁知道我如何才能真正让剑道网格刷新和显示我的数据？

【问题讨论】：

标签： javascript asp.net asp.net-mvc kendo-ui

【解决方案1】：

我看到您已经找到了解决方法，但我想我会添加更多解释。

这样改的原因

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

不起作用是您将一个函数传递给小部件，而小部件在适当的时间调用该函数。您没有传递对变量 onChange 的引用。所以更改变量不会影响小部件。

原因

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

不起作用的是 Kendo 将处理程序存储在自己的结构中（这是必要的，因为您可以为同一事件绑定多个处理程序！），因此它不会在任何给定时刻调用 options.change 中的任何内容时间。

但是，有一个 setOptions 方法，通过它您可以使您的第二种方法起作用：

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

【讨论】：

谢谢，这正是我一开始就在寻找的东西！不幸的是，剑道文档很难通过..我也没有尝试过 - 之后我是否必须调用 refresh() 或其他任何东西？

【解决方案2】：

我最终使用了一个简单的解决方法。当我放入线时

change: onChange

Kendo 实际上是在函数体中硬编码到 dropDownData.options.change 函数中，而不是引用我命名的 javascript 函数。在调试器中看起来像这样：

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

所以我的解决方法只是在 Kendo 调用中使用匿名函数。所以我把 change: 改为

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

然后当我稍后更改 onChange 时，kendo 引用了命名的 javascript 函数并调用了我的更新版本。这是工作演示：http://trykendoui.telerik.com/AkIW/2

【讨论】：