CODEWITHSUNDEEP
c#jqueryasp.net-mvc-4domkendo-ui
user3232713
user3232713

Reputation: 31

KendoUI DropDownList Change event not triggered

I'm new to all this, and did research this quite a bit, and apparently don't "get it". I'm using C#/.NET4.5 MVC4.

I have a drop down list I populated, and when I change the drop down value, I want to trigger an event.. change event I believe (to redirect to a new page with the value of the drop down selection)

Nothing happens (event not triggered).
I tried using the .Events syntax as part of the Kendo code, but I get an error (error CS1977: Cannot use a lambda expression as an argument to a dynamically dispatched operation without first casting it to a delegate or expression tree type)

I'm afraid I don't understand the process flow and how to bind the event to the action, in spite of reading a dozen or more posts about this. Thanks in advance for your help.

Here is what I got in my View (index.cshtml)

@model IEnumerable<cfcccDb.Models.matrix>

<form method="post">

@(Html.Kendo().DropDownList()

    .Name("scorematrix")
    .DataTextField("Text")
    .DataValueField("Value")
    .Value(ViewBag.SelectedMatrix)
    .HtmlAttributes(new { style = "width:200px;" })
    .BindTo(@matrixlist)
    )

</form>

<script>

$("#scorematrix").kendoDropDownList({

    change: function (e) {
        var value = this.value();
        alert("value = " + value);
    }

})

</script>

Upvotes: 3

Views: 10204

Answers (1)

Lars H&#246;ppner
Lars H&#246;ppner

Reputation: 18402

With the MVC wrappers, you should do this to bind the change event:

@(Html.Kendo().DropDownList()
    .Name("scorematrix")
    .DataTextField("Text")
    .DataValueField("Value")
    .Value(ViewBag.SelectedMatrix)
    .HtmlAttributes(new { style = "width:200px;" })
    .BindTo(@matrixlist)
    .Events(e => e.Change("dropdownlist_change")))

<script>
    function dropdownlist_change() {
        //Handle the change event
    }
</script>

If you want to bind the change event in JS, you can do this:

$("#scorematrix").data("kendoDropDownList").bind("change", function (e) {
    //Handle the change event
});

Upvotes: 4

Related Questions