Async data fetch for cascading dropdownlist

[MITHUN]

I am trying to implement 2 cascading dropdown where one is dependent on the other. To populate the dropdownlist I am calling 2 apis. The first one is for the parent dropdown and the second one will return data based on data selected in the parent dropdown. But now due to async call of the 2nd api the onChange function is getting hit beforehand. How to solve this?

[Filip]

Hello, Mithun,

It is normal for the onChange function to be fired earlier, because of the nature of async calls, but it is possible to wait inside the OnChange handler for the async call to end and then perform the update logic, similar to this code snippet:

 

secondOnChange = (e) => {
    makeAsyncApiCall();
  // when the call is completed then make update
  setOtherDropDownValue(e.value)
}

 

In case you are experiencing any difficulties with this approach or it does not help you, please provide a runnable example with your code so that we can assist further.

Regards, FilipProgress Telerik