Dropdownlist onchange async

[Jordi Stevens]

Hello, 

I have following code:

@page "/Factuur/Factuur"

@inject HttpClient Http

<h3>Factuur</h3>

<div class="container-fluid">

  <div class="row control_wrapper">

    <div class="col-sm-1">

      <SfDropDownList TItem="Select" TValue="Select" @bind-Value="@Jaar" DataSource="@Jaren" EnableVirtualization="true">

        @*<SfDataManager Url="api/Factuur/JaarGet" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"  CrossDomain=true></SfDataManager>*@

        <DropDownListEvents TItem="Select" TValue="Select" ValueChange="JaarChange"></DropDownListEvents>

        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>

      </SfDropDownList>

    </div>

    <div class="col-sm-1">

      <SfDropDownList TItem="Select" TValue="Select" @bind-Value="@Maand" DataSource="@Maanden">

        <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>

      </SfDropDownList>

    </div>

  </div>

</div>

<SfGrid DataSource="Facturen">

</SfGrid>

@code {

  private List<Factuur> Facturen { get; set; }

  private List<Select> Jaren { get; set; }

  private List<Select> Maanden { get; set; }

  private Select Jaar { get; set; }

  private Select Maand { get; set; }

  protected override async Task OnInitializedAsync()

  {

    Jaren = await Http.GetFromJsonAsync<List<Select>>("api/Factuur/JaarGet");

    Jaar = Jaren.FirstOrDefault();

    await MaandGet(Jaar.ID);

  }

  private async Task MaandGet(string jaarID)

  {

    Maanden = await Http.GetFromJsonAsync<List<Select>>("api/Factuur/MaandGet?jaarId=" + jaarID);

    Maand = Maanden.FirstOrDefault();

  }

  private async Task JaarChange(ChangeEventArgs<Select, Select> args)

  {

    Jaar = args.ItemData;

    await MaandGet(Jaar.ID);

  }

}

I have 2 ddls with values. I get those values from my api controller so i need to call it with an async function. Because i need to call it with an async function i need to make the change function async aswell. And beceause the change function is async, my first ddl freezes 2-3 seconds before closing.

Is there a solution for this problem? Or do you have a workaround?

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hello Jordi, 

Greetings from Syncfusion support. 

We have checked your query. We have made sample based on the provided code snippet by fetching the data from a service with an asynchronous function. We could not reproduce the issue unfortunately. Here we have attached the ensured sample. Kindly check the same and if possible reproduce the reported issue in the attached sample that will help us to validate the issue further and provide you a better solution from our end. Also while examining the code snippet, you are changing the datasource of the second dropdown on changing the value of the first dropdown. For this scenario, we suggest Cascading Dropdownlist. Please refer the below links to know more about the cascading dropdowns. 

Cascading Dropdown demo        : https://blazor.syncfusion.com/demos/dropdown-list/cascading?theme=bootstrap4 

Sample Link                                    : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dropdownlist_Async-1196021982 

Regards, 

Jeyanth.  

[Jordi Stevens]

Hello,

I don't see the difference between the way i load my second ddl and the cascading example?

I madea gif with what i'm experiencing.

https://gifyu.com/image/aIBb

Backend i use Microsoft Graph to get data from a sharepoint list. It seems like my first ddl only closes after it finished loading the data for my second. It would be more clean to have ddl 1 closed after selecting an option and then seeing the load animation in the second one.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Jordi, 

Thanks for your update. 

We have checked the attached gif.  On examining the gif image, we found that popup closes after some delay and we also suspect that you are using old version as we fixed the reported issue and included in 2020 Volume 3. So can you please ensure whether you have the upgraded version of Syncfusion packages? Please let us know the package version you are using and if possible reproduce the reported issue in the attached sample. These would help us to validate this issue further.

Release Notes: https://blazor.syncfusion.com/documentation/release-notes/18.3.35/?type=all#dropdownlist

Query :

 

It would be more clean to have ddl 1 closed after selecting an option and then seeing the load animation in the second one. 

Response:

 

In order to load the datasource of second dropdownlist after closing of first dropdownlist, we suggest you to load the datasource of the second dropdownlist in the Close event instead of Change event which triggers when dropdownlist is closed.

Regards, 

Jeyanth.

 

[Jordi Stevens]

Hello,

I can already confirm that i'm using the latest version( 18.4.0.47).

I'll look into the close event. Not much information is found about the different events in the documenation. For example i can see examples given in the dropdownbutton and menu in the events section, but there is no event section in the dropdownlist documentation. Could you redirect me to the documentation for dropdownlist for the events?

Meanwhile i'll try to figure it out with trial and error.

If the on close event doesn't work for me, i'll try to reproduce the problem with the given example code you posted in your first reply

[Jordi Stevens]

Hello,

I figured out the on close event! Thx for the suggestion. This solves my problem.

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Jordi, 

We are glad to know that your issue has been resolved. Please let us know if you would require any further assistance on this. 

Regards, 

Jeyanth.