How to bind a telerik mvc dropdown using javascript

roncansan picture roncansan · Jun 29, 2011 · Viewed 10.9k times · Source

I have an application with two telerik mvc drop-downs - region and country. I need to populate the country drop-down using an ASMX Web Service every time the region drop-down change. In other words I need to pass a parameter to the web service and a way to call the bind method form the client. This is what I have but it's not working.

@(Html.Telerik().DropDownList()
             .Name("RegionDDL")
             .BindTo(new SelectList(Model, "value", "value"))
             .ClientEvents(events => events.OnChange("onChange"))

       )
@(Html.Telerik().DropDownList()
            .Name("SeasonDDL")
            .ClientEvents(events => events
               .OnDataBinding("onDropDownListDataBinding")
             )
            .DataBinding(dataBinding => dataBinding
            .WebService().Select("~/country.svc/GetSeasonDropDownItems"))
    )

Now the scripts

<script type="text/javascript">

var RegionDDLv;

function onChange() {
      //Get the region
      RegionDDLv = $("#RegionDDL").data("tDropDownList").value();
      var countryDDLv = $("#countryDDL").data("tDropDownList");

      countryDDLv.dataBind();//THIS IS NOT WORKING
}
function onDropDownListDataBinding(e) {
        e.data = { region: RegionDDLv };
}                   
</script>

Thanks

Answer

roncansan picture roncansan · Jun 30, 2011

After some research, I found the answerer here

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-combobox-client-api-and-events.html

It is

countryDDLv.reload();