Async in DropDownList

[Lee]

I have a series of Kendo UI Jquery DropDownLists. When one is selected, the change event fires and makes an ajax call to get the next list's options. This works fine when a user manually selects one and then the next, however I have a button that will auto populate all lists with selected options via the .value(123) and .trigger("change") calls. Unfortunately, the trigger event doesn't wait for the change to finish before calling the next set of .value(234) and .trigger("change") events. How can I fix this? 

Here is an example DoJo. In it, note that if you click "Choose Florida"  when "south" is not already selected you get nothing. Also note that the console is logging "Looing for Florida" before it logs "Now I have the states". 

https://dojo.telerik.com/@dojolee/AleWuvAP

[Patrick | Technical Support Engineer, Senior]

Hello Lee,

One way you can handle this issue is to utilize cascading functionality. By setting the Id of the parent Kendo UI DropDownList to cascadeFrom, and configuring each item to the parent's dataValueField, the results will display when selected via user interaction or programmatically by triggering the cascade event:

HTML

    <div class="k-d-flex k-justify-content-center" style="padding-top: 54px;">
      <div class="k-w-300">
        <label for="region">Region:</label>
        <input id="region" />
        </br>
      </br>
    </br>

  <label for="state">State:</label>
  <input id="state" disabled="disabled" />

JavaScript

  $(document).ready(function() {
    
    let region = $("#region").kendoDropDownList({
      optionLabel: "Select One",
      dataTextField: "regionName",
      dataValueField: "regionID",
      dataSource: {
        data: [
          {regionName: "North", regionID: 1},
          {regionName: "South", regionID: 2},
        ],
      },
    }).data("kendoDropDownList");

    let states = $("#state").kendoDropDownList({
      autoBind: false,
      cascadeFrom: "region", //ID of parent DropDownList
      optionLabel: "Select One",
      dataTextField: "stateName",
      dataValueField: "stateID",
      dataSource: {
        
        //Call ajax function
        //regionID matches parent DataValueField
        data: [
          { stateName: "Alaska", stateID: 1, regionID: 1 },
          { stateName: "New York", stateID: 2, regionID: 1 },
          { stateName: "Florida", stateID: 3, regionID: 2 },
          { stateName: "Texas", stateID: 4, regionID: 2 }
        ],
      },

    }).data("kendoDropDownList");

    $("#florida").on("click", async function() {
      region.value(2)
      await region.trigger("cascade");  //changes value programatically
      console.log("Looking for Florida in the list.");
      states.value(3);
    });

  });

Please feel free to take a look at the following Progress Kendo UI Dojo which demonstrates the above.

Regards,
Patrick | Technical Support Engineer, Senior
Progress Telerik