Answer:
Item template is shown only on filtering the AutoComplete component. So in order to dynamically change the template, we can change based on if condition. We have prepared a sample to dynamically changing the template using button click. Initially, ID and FirstName will be shown while filtering. After clicking on APPLY button, FirstName and Country will be shown.
<div id="wrapper">
<SfAutoComplete TValue="string" TItem="EmployeeData" Placeholder="Select a
customer" DataSource="@Data">
<AutoCompleteTemplates TItem="EmployeeData">
<ItemTemplate>
@if (this.isAllowed)
{
<span><span class='name'>@((context as EmployeeData).FirstName)span><span class='country'>@((context as EmployeeData).Country)span>span>
}
else
{
<span><span class='name'>@((context as EmployeeData).Id)span><span class='country'>@((context as EmployeeData).FirstName)span>span>
}
ItemTemplate>
AutoCompleteTemplates>
<AutoCompleteFieldSettings Value="FirstName">AutoCompleteFieldSettings>
SfAutoComplete>
div>
<button class="e-btn
apply-limit" @onclick="@ApplyRange">Applybutton>
@code {
public bool isAllowed { get; set; } = false;
public void ApplyRange()
{
this.isAllowed = true;
}
...
} |
Find the sample to change the item template dynamically in Blazor Autocomplete from
here.
