CODEWITHSUNDEEP
kendo-uikendo-asp.net-mvc
thebenman
thebenman

Reputation: 1621

Uncaught type error when binding Events to Kendo dropdownlist

I tried to bind a event for select action on Kendo dropdownList. I have put in the quotes for the event handles because without the extra quotes the event handler was appearing as it is on the javascript code and gave errors. 

@(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" })
)

And I have written the handler in javascript as well. But when I click on a option in the dropdown i get a error like this in the console

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)

The problem I face is very similar to this support ticket but there is no resolution there and I can't post there without purchasing premium.

Upvotes: 0

Views: 1530

Answers (1)

Richard
Richard

Reputation: 27498

Do not introduce extra double quotes in the select event handler specification

Change

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

back to 

e.Select("drpDwnForecastYearSelect");

If you have not defined a global javascript function drpDwnForecastYearSelect then the browser debug console will show 

Uncaught ReferenceError: drpDwnForecastYearSelect is not defined
at . . .

Correct

Define the select handler as a global function.

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

The global scope is available to the scope of the JavaScript rendered by the DropDownList helper (the handler is invoked from within a kendo.syncReady() closure). The script block containing the handler function can appear before or after the helper.

Wrong

Defining the function within jQuery document ready, such as the following

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

will not work. The scope of a function defined in a $( document ).ready() closure is not available to the scope of the kendo.syncReady() closure code rendered by the DropDownList helper.

Upvotes: 2

Related Questions