How to show complex value?

[Amar]

You provide ItemTemplate for customizing List items inside the autocomplete container, but how would one customize the Selected Value?

For example, I have a Person model with FirstName and LastName properties. How do I show both combined for selected value, instead of providing just one String value to Value parameter.

[Mohanraj Mathaiyan]

Hi Amar,

We suggest using Dropdownlist component which is support the Value Template. As per your example by using the Value template, we can combine text of both FirstName and lastname with the selected value in the DropDownList input. We have attached the documentation for your reference.

Documentation : https://blazor.syncfusion.com/documentation/dropdown-list/templates#value-template

<SfDropDownList TValue="string" TItem="EmployeeData" Placeholder="Select a customer" Query="@Query">

    <DropDownListTemplates TItem="EmployeeData">

        <ItemTemplate>

            <span><span class='name'>@((context as EmployeeData).FirstName)</span><span class='destination'>@((context as EmployeeData).Designation)</span></span>

        </ItemTemplate>

        <ValueTemplate>

            <span>@((context as EmployeeData).FirstName) - @((context as EmployeeData).Designation)</span>

        </ValueTemplate>

    </DropDownListTemplates>

    <SfDataManager Url="https://ej2services.syncfusion.com/production/web-services/api/Employees" Adaptor="Syncfusion.Blazor.Adaptors.WebApiAdaptor" CrossDomain="true"></SfDataManager>

    <DropDownListFieldSettings Text="FirstName" Value="Designation"></DropDownListFieldSettings>

</SfDropDownList>

 

Regards,

Mohanraj M

Attachment: Valuetemplate_f6049f9a.zip