DropDownListFor Events in Razor Pages

[AJ]

I'm trying to add Change Event for DropDownListFor in Razor Pages but facing an issue - "Cannot use lambda expression..."

@(Html.Kendo().DropDownListFor(model => model.CaseSourceCode)

                         .BindTo(ViewBag.LookupSourceTypes)

                         .Events(e => e.Change("OnChange")

)

 

If I don't add the Events line the DropDownListFor works just fine.

 

[Nencho]

Hello Raju,

The demonstrated usage seems correct, besides the fact that one parenthesis is missing from the implementation:

@(Html.Kendo().DropDownListFor(model => model.Customer)
                             .BindTo(ViewBag.LookupSourceTypes)
                             .Events(e => e.Change("OnChange"))
    )

Could you make sure that it's present at your end and let us know if the issue still persists?


Regards,
Nencho
Progress Telerik

[AJ]

Thank you Nencho for your response. I have the parenthesis correct on my development machine. I cannot copy paste the code from there since that machine has no internet access.

So for the following code -

@(Html.Kendo().DropDownListFor(model => model.CaseSourceCode)
                         .BindTo(ViewBag.LookupSourceTypes)
                         .Events(e => e.Change("OnChange"))
)

the error is "Cannot use a lambda expression as an argument to a dynamically dispatched operation without first casting it to a delegate or expression tree type"

If I change the code to -

@(Html.Kendo().DropDownListFor(model => model.CaseSourceCode)

                          .Events(e => e.Change("OnChange"))

                          .BindTo(ViewBag.LookupSourceTypes)                       
)

The error goes away however on the UI the dropdown list appears as a text box with a value 0 and in the console I see the error -

"Uncaught ReferenceError: OnChange is not defined"

[AJ]

Forgot to mention that I have the script for OnChange

<script type="text/javascript">

function OnChange(e){

....

}

</script>

[Nencho]

Hello Raju,

Thank you for the additionally provided information that made the problem clear.

The reason for the expectation is that the ViewBag variable is not cast to any type, hence the widget is not aware of the type. In order to overcome the issue, you can cast the type to IEnumerable:

@(Html.Kendo().DropDownListFor(model => model.CaseSourceCode)
                                 .BindTo((System.Collections.IEnumerable)ViewBag.LookupSourceTypes)
                                 .Events(e => e.Change("OnChange"))
)

This topic is also discussed in the following thread:

https://www.telerik.com/forums/binding-to-viewbag-in-razor-pages

Hope this would help.

Regards,
Nencho
Progress Telerik

[AJ]

Appreciate your help. However I'm still getting the "Uncaught ReferenceError: OnChange is not defined" error after I tried your solution. As per Telerik's support I moved my script block to the top of the page and voila it started working.

Thanks again to you and your team for helping me resolve the issue.

So the complete solution is -

<script type="text/javascript">
function OnChange(e){
....
}
</script>

<form>

  @(Html.Kendo().DropDownListFor(model => model.CaseSourceCode)
                          .Events(e => e.Change("OnChange"))
                          .BindTo(ViewBag.LookupSourceTypes)                       
)

</form>