We have a AutoComplete that allows the user to select a product
the product has an ID and a NAME
With the following
<SfAutoComplete TValue="string" TItem="SupplyVendorProductModel" AllowCustom="false"
@bind-Value="addItemSelectedProduct"
AllowFiltering="true" DataSource="@autoCompleteProducts">
<AutoCompleteFieldSettings Value="productId" ></AutoCompleteFieldSettings>
</SfAutoComplete>
<SfAutoComplete TValue="string" TItem="SupplyVendorProductModel" AllowCustom="false"
@bind-Value="addItemSelectedProduct"
AllowFiltering="true" DataSource="@autoCompleteProducts">
<AutoCompleteFieldSettings Value="productId" Text="IdAndDescription"></AutoCompleteFieldSettings>
</SfAutoComplete>
the user can now see the id and name but typing the id and hitting tab doesnt work any longer. user would have to type the id and name
thought about templates but there is no template for the display of the value only for the list (itemtemplate)
is there any way to make this work?
thanks
Mike
Based on the shared information, we suspect that you are trying to display the selected Text and Value fields in the AutoComplete component. By default, the AutoComplete component does not support a Value template. You can try Syncfusion's DropdownList component instead of the AutoComplete component for your requirements. You can also use the AllowFiltering property in the DropdownList component. We have prepared a sample for your requirement using the DropdownList component and shared it below for your reference. Please refer to the documentation and online demo shared below for more information.
[DropdownList component]
@using Syncfusion.Blazor @using Syncfusion.Blazor.DropDowns
<h2>Dropdown List</h2> <div style="margin:130px auto;width:300px">
<SfDropDownList TValue="string" TItem="EmployeeData" CssClass="template" AllowFiltering="true" Placeholder="Select a employee" DataSource="@Data"> <DropDownListTemplates TItem="EmployeeData"> <ValueTemplate> <span class="ename">@((context as EmployeeData).FirstName) - @((context as EmployeeData).Id)</span> </ValueTemplate> </DropDownListTemplates> <DropDownListFieldSettings Text="FirstName" Value="Id"></DropDownListFieldSettings> </SfDropDownList> </div> @code { Type models = typeof(EmployeeData); public class EmployeeData { public string FirstName { get; set; } public string Id { get; set; } } List<EmployeeData> Data = new List<EmployeeData> { new EmployeeData() { FirstName = "Andrew Fuller",Id= "7" }, new EmployeeData() { FirstName = "Anne Dodsworth",Id= "1" }, new EmployeeData() { FirstName = "Janet Leverling",Id="3" }, new EmployeeData() { FirstName = "Laura Callahan",Id= "2" }, new EmployeeData() { FirstName = "Margaret Peacock",Id= "6" }, new EmployeeData() { FirstName = "Michael Suyama", Id= "9" }, new EmployeeData() { FirstName = "Nancy Davolio",Id= "4" }, new EmployeeData() { FirstName = "Robert King",Id= "8" }, new EmployeeData() { FirstName = "Steven Buchanan",Id= "10" }, }; }
|
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/DLLTemplate1271794959
Documentation: https://blazor.syncfusion.com/documentation/dropdown-list/templates#value-template
Online Demo: https://blazor.syncfusion.com/demos/dropdown-list/template?theme=fluent