Async in DropDownList

1 Answer 237 Views
DropDownList
Lee
Top achievements
Rank 2
Bronze
Bronze
Iron
Lee asked on 25 Feb 2023, 01:03 AM

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

1 Answer, 1 is accepted

Sort by
0
Patrick | Technical Support Engineer, Senior
Telerik team
answered on 01 Mar 2023, 07:37 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
DropDownList
Asked by
Lee
Top achievements
Rank 2
Bronze
Bronze
Iron
Answers by
Patrick | Technical Support Engineer, Senior
Telerik team
Share this question
or