将事件绑定到Kendo下拉列表

时间:2018-06-04 10:02:32

标签: kendo-ui kendo-asp.net-mvc

我尝试在Kendo dropdownList上为select操作绑定一个事件。我已经投入了 事件句柄的引号,因为没有额外的引号,事件处理程序出现在javascript代码上并给出了错误。

@(Html.Kendo().DropDownList()
.Name("yearDropDown")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<DropDownListItem>() { new DropDownListItem() { Text = "2015", Value = "2015" }, new DropDownListItem() { Text = "2016", Value = "2016" }, new DropDownListItem() { Text = "2017", Value = "2017" }, new DropDownListItem() { Text = "2018", Value = "2018" } })
.Events(e => {
    e.Select("\"drpDwnForecastYearSelect\"");
})
.Value(userInput.year)
.HtmlAttributes(new { style = "width : 8em" })
)

我也用javascript编写了处理程序。但是当我点击下拉列表中的某个选项时,我在控制台中会收到这样的错误

Uncaught TypeError: r[n].call is not a function
    at init.trigger (kendo.all.js:124)
    at init._change (kendo.all.js:32793)
    at Object.<anonymous> (kendo.all.js:32802)
    at i (jquery.min.js:2)
    at Object.add [as done] (jquery.min.js:2)
    at init._click (kendo.all.js:32801)
    at init.d (jquery.min.js:2)
    at init.trigger (kendo.all.js:124)
    at init._click (kendo.all.js:28060)
    at HTMLLIElement.d (jquery.min.js:2)

我遇到的问题与this support ticket非常相似,但是没有解决方案,我不能在没有购买保费的情况下发布。

1 个答案:

答案 0 :(得分:2)

请勿在select事件处理程序规范

中引入额外的双引号

更改

e.Select("\"drpDwnForecastYearSelect\"");

回到

e.Select("drpDwnForecastYearSelect");

如果您尚未定义全局 javascript函数drpDwnForecastYearSelect,则浏览器调试控制台将显示

Uncaught ReferenceError: drpDwnForecastYearSelect is not defined
at . . .

正确

将选择处理程序定义为全局函数。

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

全局范围可用于DropDownList帮助程序呈现的JavaScript范围(处理程序是从kendo.syncReady()闭包中调用的)。包含处理函数的脚本块可以出现在帮助程序之前或之后。

错误

在jQuery文档中定义函数,例如以下

    $(function () {
        // Welcome to jQuery document ready 
        function drpDwnForecastYearSelect(e) {
            console.log(e);
        }
    })

不起作用。 $( document ).ready()闭包中定义的函数的范围不适用于DropDownList帮助程序呈现的kendo.syncReady()闭包代码的范围。