SfAutoComplete data not bound in Blazor

[Amit]

Hi,

   I'm on Syncfusion.Blazor 18.2.0.44. and facing issue in binding data fetched during OnInitializedAsync(). This is my autocomplete section -

 <div class="e-input-group">

            <SfAutoComplete TValue="string" TItem="MyClass" FilterType="Syncfusion.Blazor.DropDowns.FilterType.StartsWith"

                            DataSource="@MyList">

                <AutoCompleteFieldSettings Value="MyField"></AutoCompleteFieldSettings>

            </SfAutoComplete>

        </div>

 And my class will have only a string, I'm doing this as SfAutoComplete doesn't bind to a List<string> directly.

  public class MyClass

    {

        public string MyField { get; set; }

    }

   In my OnInitializeAsync if I invoke this method -

 async Task GetValues()

    {

        var items = await myService.GetStuffAsync();

        MyList = items.ToList().Select(x => new MyClass()

        {

            MyField = x

        }).ToList();

    }

I have entries in items but nothing gets bound and it keeps showing the empty dropdown. If I modify GetValues() to be synchronous, it is working fine.

void GetValues()

    {

        var items = myService.GetStuffSynchronously();

        MyList = items.ToList().Select(x => new MyClass()

        {

            MyField = x

        }).ToList();

    }

Is there something being missed here? I do log the values obtained and I see the data source is just fine, does it need anything else to be triggered once the value is received into MyList?

[Vignesh Srinivasan]

Hi Amit, 

  

Greetings from Syncfusion support. 

  

Instead of using OnInitializedAsync() you can use the create event in the autocomplete component to render the dataSource. Please find the code sample below. 

  

Code snippet:  

  

<SfAutoComplete TValue="string" TItem="Data" Placeholder="e.g: Aero"EnableVirtualization="true" Query="@RemoteDataQuery"  

                DataSource="@Country">  

    <AutoCompleteEvents TValue="string" TItem="Data" Created="OnCreated"></AutoCompleteEvents>  

    <AutoCompleteFieldSettings Value="Name"></AutoCompleteFieldSettings>  

</SfAutoComplete>  

  

  

public void OnCreated(object args)  

    {  

        this.GetValues();  

    }  

  

Kindly check with the above code snippet. Please get back us if you need further assistance. 

  

Regards, 

  

Vignesh Srinivasan. 

[Amit]

Hi Vignesh,

   I modified my code accordingly but I still see the issue.

- I included this " <AutoCompleteEvents TValue="string" Created="@OnCreated"/>"  It won't accept TItem in AutoCompleteEvents, it errors out as an invalid property, so I removed it.

- The provided solution works if the this.GetValues is synchronous. In my case, I've invoked an asynchronous web API with await and I still see an issue. I need to be able to do something like this:

 public async void OnCreated(object args)

    {

        await GetDataAsync();

    }

 

I checked this Syncfusion article but what should I have the InvokeAsync on? Is there a recommended way to fetch data from an async source and bind it or refresh the bound data once the data is retrieved from the async source?

[Amit]

Hi,

   Any suggestions for this async scenario?

[Sureshkumar P]

Hi Amit, 

 

Thanks for your patience. 

 

We have validated the data fetched during OnInitializedAsync() method on Syncfusion.Blazor 18.2.0.44 package version. We have also facing the issue in the 18.2.44 version. But we have fixed this issue when we have improved our component performance in our latest version. So, we suggest you upgrade our Syncfusion blazor latest version 18.4.31 to resolve the issue.  

 

We have created the sample with latest version. Please find the sample here: https://www.syncfusion.com/downloads/support/forum/160597/ze/DropDownDataSource32003072  

 

Regards, 

Sureshkumar P 

[Amit]

Hi,

  I've modified your attachment a bit to fetch data from a service. You may add a service which returns a comma delimited string to this as I can't upload the service code right now. With this change it doesn't load. Task.FromResult won't work for me here as I have an API call which I do invoke so the result that I have to await. 

Attachment: DropDownDataSource32003072_4499aeab.7z

[Berly Christopher]

Hi Amit, 

  

A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates. 

  

http://www.syncfusion.com/Account/Logon?ReturnUrl=%2fsupport%2fdirecttrac  

  

Regards, 

Berly B.C