Custom text and value with OData endpoint

Question

Hi all, i'm trying to use the autocomplete with an odata endpoint, and it works, however, I need to filter by "Name" and get the "Id" as the value, I already try to use AutoCompleteFieldSettings with that configuration but the query send the Id in the filter, searching for this, I found the following post: https://www.syncfusion.com/forums/155340/autocomplete-autoformat-display-text-vs-search-text-binding and I try to use that approach, but the filter now contains the Id and the Name property in the filter like this:https://localhost:44310/odata/Customers?$count=true&$filter=contains(tolower(Name),%27ca%27)%20and%20contains(tolower(Id),%27ca%27)&$select=Id,Name,MainEmail&$skip=0&$top=20At the end, I need to filter just by Name but get the Id as the value, this is my code:

@((context as CustomerOData).Name)

@((context as CustomerOData).MainEmail)

And the OnFiltering;public async Task OnFiltering(FilteringEventArgs e) { RemoteDataQuery = new Query() .Select(new List { "Id", "Name", "MainEmail" }) .Where(new WhereFilter { Field = "Name", IgnoreCase = true, Operator = "contains", value = e.Text }) .Take(20) .RequiresCount();} Thanks

Sevvandhi Nagulan · Accepted Answer

Hi Julio,

We checked your query. When you choose an item from the popup, the select event will be triggered. When you use the clear button to clear a value, the ValueChange event will be triggered. If you need to perform some operations while clearing the value, we recommend using the ValueChange event. If the value was selected from the popup, the ValueChange event will also be triggered. Kindly refer the following code.

@using Syncfusion.Blazor.Data;

@using Syncfusion.Blazor.DropDowns;

<SfAutoComplete @ref="autoObj" ID="autocomplete" TValue="string" TItem="Countries" ShowClearButton="true" @bind-Value="@AutoVal" Placeholder="e.g. Australia" DataSource="@Country">

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

<AutoCompleteEvents TValue="string" TItem="Countries" OnValueSelect="OnSelect" ValueChange="onChange"></AutoCompleteEvents>

</SfAutoComplete>

@code {

public string AutoVal;

SfAutoComplete<string, Countries> autoObj;

public Query query;

public class Countries

{

public string Name { get; set; }

public string Code { get; set; }

}

List<Countries> Country = new List<Countries>

{

new Countries() { Name = "Australia", Code = "AU" },

new Countries() { Name = "Bermuda", Code = "BM" },

new Countries() { Name = "Canada", Code = "CA" },

new Countries() { Name = "Cameroon", Code = "CM" },

};

public void OnSelect(SelectEventArgs<Countries> args)

{

var id = args.ItemData.Code;

}

public void onChange(ChangeEventArgs<string,Countries> args)

{

var id = args.ItemData?.Code;

}

Kindly get back to us for further assistance.

Regards,

Sevvandhi N

Sevvandhi Nagulan · Answer

Hi Julio,

Greetings from Syncfusion support.

Solution 1:

We checked your query. The AutoComplete component does not have a text field in its field settings, but it does have a value property, which is used for filtering. So, we request you to map the “Name” field directly to the value property. You can also get the id of the selected item via the select event of the component. Kindly refer the following code.

<SfAutoComplete @ref="autoObj" ID="autocomplete" TValue="string" TItem="Countries" @bind-Value="@AutoVal" Placeholder="e.g. Australia" DataSource="@Country">

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

<AutoCompleteEvents TValue="string" TItem="Countries" OnValueSelect="OnSelect"></AutoCompleteEvents>

</SfAutoComplete>

@code {

public string AutoVal;

SfAutoComplete<string, Countries> autoObj;

public Query query;

public class Countries

{

public string Name { get; set; }

public string Code { get; set; }

}

List<Countries> Country = new List<Countries>

{

new Countries() { Name = "Australia", Code = "AU" },

new Countries() { Name = "Bermuda", Code = "BM" },

new Countries() { Name = "Canada", Code = "CA" },

new Countries() { Name = "Cameroon", Code = "CM" },

};

public void OnSelect(SelectEventArgs<Countries> args)

{

var id = args.ItemData.Code;

}

Solution 2:

Else, if you want to map the value property also to the component, then we suggest that you to use filtering event and pass filter the text “Name” to the where query. Then pass the result to the filter method. Kindly refer the following code.

public async Task OnFiltering(FilteringEventArgs e)

{

e.PreventDefaultAction = true;

query = new Query().Where(new WhereFilter()

{

Field = "Name",

value = e.Text,

Operator = "startswith",

IgnoreCase = true

});

await this.autoObj.Filter(Country, query);

}

If you want to use the above method, then the ID of the corresponding selected item can be obtained by accessing the bind-Value attribute’s variable. This variable stores the component's currently selected values. Also, can be get the Id of the selected value in the select event which described above in the code example. Kindly refer the following code.

<SfAutoComplete @ref="autoObj" ID="autocomplete" TValue="string" TItem="Countries" @bind-Value="@AutoVal" AllowCustom="false" Placeholder="e.g. Australia" DataSource="@Country">

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

<AutoCompleteEvents Filtering="OnFiltering" TValue="string" TItem="Countries" OnValueSelect="OnSelect"></AutoCompleteEvents>

</SfAutoComplete>

Screenshot:

Please find the sample below.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/AutoComplete1904736647

Kindly get back to us for further assistance.

Regards,

Sevvandhi N

julio Avellaneda · Answer

Hi Sevvandh, thanks for the solution, solution 1 is ok, however, I have a question:

The autocomplete has an "X" to delete the selected item, but when i click that "X" the OnValueSelecte is not trigger, do you know how I can manage that event?

Thanks,