Bind Cascaded dropdownlist in form

[Lokesh]

Hi, I am trying Kendo UI for MVc for first time. I am trying to bind a dropdownlist on change event of another dropdownlist.

Here is what I have in view:

<tr>
                <td style="width:20%">Country</td>
                <td style="width:30%">
                    @(Html.Kendo().DropDownListFor(model => model.CommunicationDetailsViewModel[i].CountryId).DataTextField("CountryName").DataValueField("Id").BindTo(Model.CommunicationDetailsViewModel[i].Country).HtmlAttributes(new {  style = "width:280px" })
                                    .Events(e => e.Change("country_Change"))
                                    .Name("ddlCountry"))
                </td>
                <td style="width:20%"></td>
                <td style="width:30%"></td>
            </tr>
            <tr>
                <td style="width:20%">State</td>
                <td>
                    @(Html.Kendo().DropDownListFor(model => model.CommunicationDetailsViewModel[i].StateId).DataTextField("StateName").DataValueField("Id").BindTo(Model.CommunicationDetailsViewModel[i].State).HtmlAttributes(new {  style = "width:280px" })
                                    .Events(e => e.Change("state_Change"))
                                    .Name("ddlState")
                                    .CascadeFrom("ddlCountry"))
                </td>
                <td style="width:20%"></td>
                <td style="width:30%"></td>
            </tr>

And I am trying to bind the ddlState dropdownlist using ajax like below:

function country_Change() {
    $.ajax({
        type: 'GET',
        url: '/api/v1/State/GetStatesFromCountry',
        dataType: 'json',
        data: {
            countryId : $("#ddlCountry").val()
        },
        success: function (states) {
        $.each(states, function (i, state) {
            $("#ddlState").append('<option value="' + state.id + '">' +
                 state.stateName + '</option>');
        });
    },
    error: function (ex) {
        alert('Failed to retrieve states.' + ex);
    }
});
}

 For Now I have 3 countries in table. On page load, all countries can be seen in the country dropdown and its related states in state dropdown. But after Change event occurs, the default value from state dropdown remains as it is, whereas I was expecting it to be filled by states from other countries.

What am I doing wrong? 

[Veselin Tsvetanov]

Hi Lokesh,

The DropDownList cascading functionality will not work when local binding (the BindTo() method) is used for the second (the cascaded) widget. Instead, you will need to use a DataSource with remote binding, which will automatically send a read request each time the parent DropDownList changes its value. Here you would find a simple demo implementing such scenario.

Regards,
Veselin Tsvetanov
Progress Telerik