This is a migrated thread and some comments may be shown as answers.

Bind Cascaded dropdownlist in form

1 Answer 489 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Lokesh
Top achievements
Rank 1
Lokesh asked on 29 Oct 2018, 12:15 PM

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? 

1 Answer, 1 is accepted

Sort by
0
Veselin Tsvetanov
Telerik team
answered on 31 Oct 2018, 09:46 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
DropDownList
Asked by
Lokesh
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Share this question
or