Binding Autocomplete to an Object Property but Fetching from API

[Milton Sampaio]

I have this component working normally.

<SfAutoComplete TValue="int" @bind-Value="LancamentoTarefaDTO.TarefaId" TItem="Tarefa" Placeholder="Digite a tarefa" AllowFiltering="true" Autofill="true" Query="@RemoteDataQueryTarefas">
    <SfDataManager Url="/api/autocomplete/ListaTarefas" CrossDomain="true" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor"></SfDataManager>
    <AutoCompleteFieldSettings Value="Id" Text="Descricao" />
    <AutoCompleteEvents TValue="int" TItem="Tarefa" Filtering="OnFilteringTarefas" ValueChange="OnTarefaValueChange" />
</SfAutoComplete>

But I want that upon entering the page with an ID in the URL, everything should be filled with the values of a record already found in the database. 

When doing this, the autocomplete is not working, even though I am changing the value of LancamentoTarefaDTO.TarefaId, which is its bind-value. The text being shown is always empty. 

When placing a breakpoint on the API call, I can also see that the ID is not sent for the query, only null.

Using the component normally, that is, typing values into it, the query call works and LancamentoTarefaDTO.TarefaId gets its value filled normally. The error occurs when I try to fill LancamentoTarefaDTO.TarefaId through code.

Could I have any help?

[UdhayaKumar Duraisamy]

In the shared code snippet, `TValue` is set as `int`, and you are using a remote data source with both value and text fields mapped. Please note that the AutoComplete component operates based on the value field exclusively, and filtering is also performed based on the value field alone.

When using the Autocomplete component with a local data source and setting `TValue` to a number (other than `string`), filtering is handled based on `TValue` at the source level. However, for remote data, input values are interpreted as strings and are transmitted to the server. Therefore, on the server side, it's necessary to convert the received string to the respective number type and filter the values before sending back the results.

Note: To ensure consistent filtering behavior across both local and remote data sources, we recommend using `TValue` as a `string` for the Autocomplete component.

Online Demo: Blazor AutoComplete Data Binding Example - Syncfusion Demos

[Milton Sampaio]

Thank you for your answer but I don't know if I don't get it or if I didn't explain well.

The problem is not exactly in the API side, I mentioned it's receiving null because I thought it could be a hint of what is happening.

My main issue here is that the two-way binding is not working. When I set  LancamentoTarefaDTO.TarefaId  the autocomplete element is not updated.

[UdhayaKumar Duraisamy]

Hello Milton Sampaio,




To assist you more effectively, we request that you provide the following additional details:




• A runnable sample that demonstrates the issue you are experiencing. This will help us understand how you are integrating and handling the components in your project.
• Detailed replication steps that we can follow to reproduce the issue.
• A video illustration of the issue.




This information will be very helpful in helping us resolve your issue as quickly and efficiently as possible.