[Solved] Telerik DropDownListFor doesn't work like standard MVC version

[Chris]

Hi,

I'm having a problem with the Telerik DropDownListFor version compared to the standard MVC 3 version.

My original code used the standard MVC version as follows in a partial view:

@inherits ABC.DEF.Site.ViewClasses.ViewModelView<ABC.DEF.Site.Models.ViewModel>
@using (Ajax.BeginForm("LoadBaseTypes", "View", new AjaxOptions { UpdateTargetId = "BaseTypes" }))
{

    @(Html.DropDownListFor(
        m => m.SelectedDataService,
        new SelectList(GetExistingViewData.DataServices, "Id", "DisplayName"))
    )

}
<script type="text/javascript">
    $('#SelectedDataService').change(function () {
        alert("hit the value change handler");
        $(this).parents('form').submit();
    });
</script>

This version worked - when the dropdown is changed, the javascript gets hit (i.e. I see the alert popup) and the ajax form submit happens.

However, I then changed to use the Telerik version as follows:

@inherits ABC.DEF.Site.ViewClasses.ViewModelView<ABC.DEF.Site.Models.ViewModel>
@using (Ajax.BeginForm("LoadBaseTypes", "View", new AjaxOptions { UpdateTargetId = "BaseTypes" }))
{
    @(Html.Telerik().DropDownListFor(m => m.SelectedDataService)
        .BindTo(new SelectList(GetExistingViewData.DataServices, "Id", "DisplayName"))
    )

}
<script type="text/javascript">
    $('#SelectedDataService').change(function () {
        alert("hit the value change handler");
        $(this).parents('form').submit();
    });
</script>

The javascript now doesn't get hit and for ajax form submit doesn't happen.

Does the Telerik version not work in the same way as the standard MVC 3 version?

[Chris]

Now resolved using the following approach instead (Client events basically):

@inherits ABC.DEF.Site.ViewClasses.ViewModelView<ABC.DEF.Site.Models.ViewModel>
@using (Ajax.BeginForm("LoadBaseTypes", "View", null, new AjaxOptions { UpdateTargetId = "BaseTypes" }, new {@id = "DataServiceForm" }))
{
    @(Html.Telerik().ComboBoxFor(m => m.SelectedDataService)
        .BindTo(new SelectList(GetExistingViewData.DataServices, "Id", "DisplayName"))
        .HtmlAttributes(new { style = string.Format("width:{0}px", 500) })
        .ClientEvents(events => events.OnChange("onSelectedDataServiceChange"))
    )
}

<script type="text/javascript">
    function onSelectedDataServiceChange() {
        $('#DataServiceForm').submit();
    }
</script>