How to lazy load a syncfusion autocomplete


Is it possible to lazy load an syncfusion autocomplete in blazor? 

The answer is that it's possible but there are some caveats. In the code below you can see that I made it work with a local datasource. Note however that the autocmpleter has a function that you can use to add some elements to the datesource. But that clearing them doesn't seems to be support completly.

I'm also using a connectorclass to do a default call to a REST api, something that also isn't described in the syncfusion default docs, but is thus possible.

Now how to make this happen?

 

In razor:

<SfAutoComplete TValue="Guid" AllowFiltering="true" TItem="DataDTO"  DataSource="@Data" ref="@Data">
                                        <AutoCompleteFieldSettings Value="Id" Text="Name" />                                                                                                              <AutoCompleteEvents TValue="Guid" TItem="DataDTO" Filtering="@OnFilter" ValueChange="@ValueChangeHandler" />

</SfAutoComplete>

-------------------------------

 private SfAutoComplete<Guid, DataDTO> Autocomplete = default!;

private boolean DLoaded=false;

  private async Task OnFilter(FilteringEventArgs args)
   {
            if (args.Text.Length >= 3 && !DLoaded)
            {
//only load as from 3 chars (lazy) and not yet loaded (avoid double add)
                DLoaded= true;
                args.PreventDefaultAction = true;
                List<DataDTO> datas= (await Connector.GetDatas(args.Text)).Items;
                if (datas != null)
                {
                    Data= new ObservableCollection<DataDTO>(datas);                                 
                   Autocomplete.AddItemsAsync(Companies); //additems seems to work weter than to change the source
                   StateHasChanged();
                }
            }

            else if (args.Text.Length < 3) {
//clear the current list if back below 3 chars
                DLoaded = false;
                args.PreventDefaultAction = true;
                Data= new ObservableCollection<DataDTO>();
                Autocomplete.DataSource = Data;              

            }

        }


12 Jun 2022 - Jan


You need to be authorized to react
An error has occurred. This application may no longer respond until reloaded. Reload 🗙