3 cascade remote dropdownlists

[Torsak]

I have 3 cascade dropdownlists (eg. country, state, city) and I use remote datasource. Everything works fine until I want to create an update page using ajax calls. Assuming that I have multiple records and each record contains those data. I would like to have an edit button in each record. When a user clicks the edit button, it pop-ups the form for editing. In this case, there is only one edit form and I used jquery ajax to get the data from server and binding to the form.

The problem is that I cannot make the default value for those dropdownlists because when I perform datasource.read() to get the data from server, I don't know that when the datasource.read() will finish so that I can set the default value in the dropdownlist. If I put some code for setting the default values after the datasouce.read() line, the code will be executed before the datasouce.read() finishes getting data from server. So, that code is worthless.

In addition, I saw you solution about setting the default value in dropdownlist. But the case doesn't work for me. Since, in my case I need to change the default value of dropdownlists dynamically.

Do you have a solution for this kind of problem? or Do you have an event that can capture when the datasource.read() will finish?

Please point me out of this trouble. Thank you. 

[Georgi Krustev]

Hello Torsak,

 
In your case you will need to wire the change event of the DropDownList's dataSource. Thus you will know when the dataSource.read() has finished and you will be able to call value() method.

All the best,
Georgi Krustev
the Telerik team

[Torsak]

I have already wired the change events to those dropdownlists. You can imagine that I have "city", "state", "country" dropdownlists. When the "country" dropdownlist has been selected. In the change event of the country dropdownlist, it should bind the data of the "state" and "city" at the same time. So, binding "state" dropdownlist is no problem. I got the country_id and use ajax query to get "state" data and the use datasource.read() to bind the "state" dropdownlist. The problem is that when I need to bind the data of the "city" dropdownlist, I need to get the default value of the "state" dropdownlist first. But, when I try to set the default value after the datasouce.read(), It doesn't work. It is like the datasouce.read() doesn't finish yet because of it asynchonization. And then it set the value based on the old data of the dropdownlist.

Ex. (this isn't the completed code. But it will show you some ideas)

    $('#country').kendoDropDownList({
        autoBind: true,
        dataTextField: "name",
        dataValueField: "id",
        dataSource: countryDatasource,
        change: function() {
            //set variable to get states in the selected country  
    currentCountry = parseInt(this.value());
            stateDatasource.read();

            var ddlState = $('#state').data("kendoDropDownList");
            ddlState.select(1);
   
            //set variable to get cities in the selected state 
    currentState = ddlState.value();  --> this call will return null
            cityDatasource.read();
        }
    });

[Georgi Krustev]

Hi Torsak,

 
In order to acheive your goal you will need to wire the change events of the corresponding datasources. Hence when the change event raises the data has come and you will be able to select the correct item.

All the best,
Georgi Krustev
the Telerik team

[Patrick Rioux]

Please provide an example on how to achieve this. I'm struggling trying to do the same behavior.
The State/Country is an example example.

[Georgi Krustev]

Hello Patrick,

 
I will suggest you check this online demo which shows how to implement cascading comboboxes.

Greetings,
Georgi Krustev
the Telerik team

[Patrick Rioux]

Great, thank you.

[AndyRutter]

Hi,
I have this exact same problem using JSON requests to an MVC view.
The link to the cascading dropdowns no longer exists and the one that I did find does not tell you how to set them up in an edit form situation where you need to wait for the data to be returned before binding the next one in the chain.
We also will not know the index of the item we need to select at the time so dropdownlist.value(3) for example would be no good as a means of item selection..??

[AndyRutter]

This works fine:

<label for="countries">Countries:</label>
        @(Html.Kendo()
              .DropDownList()
              .Name("countries")
              .HtmlAttributes(new { style = "width:300px" })
              .OptionLabel("Select Country...")
              .DataTextField("CountryName")
              .DataValueField("CountryID")
              .DataSource(source => {
                  source.Read(read => {
                      read.Action("GetCascadeCountries", "AddressDistrict")
                          .Data("filterContinents");
                  })
                        .ServerFiltering(true);
              })
              .Enable(false)
              .AutoBind(false)
              .CascadeFrom("continents")
              .Events(e => {
                  e.DataBound("dataBound2").Cascade("cascade2");
              })
        )
        <script>
            function filterContinents() {
                return {
                    continentID: $("#continents").val()
                };
            }
        </script>

On databound I call this:

function dataBound(e) {
    var ddl = $("#continents").data("kendoDropDownList");
    ddl.search('@myContinent');
    var idx = ddl.selectedIndex;
    ddl.value(idx);
}

Which works fine also, it pre-selects Europe in this case.Brilliant.
Same thing for the next level, countries:

@(Html.Kendo()
              .DropDownList()
              .Name("countries")
              .HtmlAttributes(new { style = "width:300px" })
              .OptionLabel("Select Country...")
              .DataTextField("CountryName")
              .DataValueField("CountryID")
              .DataSource(source => {
                  source.Read(read => {
                      read.Action("GetCascadeCountries", "AddressDistrict")
                          .Data("filterContinents");
                  })
                        .ServerFiltering(true);
              })
              .Enable(false)
              .AutoBind(false)
              .CascadeFrom("continents")
              .Events(e => {
                  e.DataBound("dataBound2");
              })
        )
        <script>
            function filterContinents() {
                return {
                    continentID: $("#continents").val()
                };
            }

Does indeed give me a list of countries based on the continent selection and this list reloads when the continent is changed as expected.
But I expected the same DataBound function to work here:

function dataBound2(e) {
    var ddl = $("#countries").data("kendoDropDownList");
    ddl.search('@myCountry');
    var idx = ddl.selectedIndex;
    ddl.value(idx);
}

However this is not the case, instead of selecting the correct country, in this case United-Kingdom and then loading the next DDL with Counties, all I see is the 'select a country...' dialog.
How come this works for DDL 1 for but any DDL's down the line. The data has been bound correctly at this point as I can see it in developer tools when I breakpoint it, ddl.value(idx) is set correctly to 52 but the DDL itself is not actually making the selection and triggering the counties DDL to populate...?

[Georgi Krustev]

Hello Brian,

I prepared a simple Kendo Scratchpad demo in order to replicate the issue, but to no avail. Could you please review it? if it is possible could you modify it to reproduce the problem?

Regards,
Georgi Krustev
Telerik