How to pre-select an item in SfDropDownList?

[Leon Potgieter]

Hi, please could someone assist with the following?

I would like to be able to return to a page containing a SfDropDownlist but with the previously selected item already selected.  How can I do this?

So if you consider the example below, I have a list of "Profile Types" which works fine. The profile type can be selected and saved... but if I want to return to this page and allow the user to change his profile type I would like his previously selected profile type to be pre-selected.

How can this be done?

Many thanks,

Leon

<SfDropDownList TValue="string" TItem="string" Placeholder="Choose a Profile Type" ValueChanged="ProfileTypeValueChanged" DataSource="@_profileTypes">
    <DropDownListFieldSettings Value="Name" Text="Name"></DropDownListFieldSettings>
</SfDropDownList>

[Deepak Ramakrishnan]

Hi Leon, 

 

Greetings from Syncfusion support. 

 

Yes we can preselect the values using @bind-Value attribute  to the component . You can refer the below demo , documentation and code snippet for more details. 

 

 

<SfDropDownList TItem="GameFields" TValue="string" PopupHeight="230px"  Placeholder="Select a game" @bind-Value="@DropDownValue" DataSource="@Games"> 

                <DropDownListEvents TItem="GameFields" TValue="string" ValueChange="OnChange"></DropDownListEvents> 

                <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings> 

            </SfDropDownList> 

 

@code { 

public string DropDownValue = "Game3"; 

} 

 

 

 

Demo Link :  https://blazor.syncfusion.com/demos/dropdown-list/default-functionalities?theme=bootstrap5  

 

Documentation : https://blazor.syncfusion.com/documentation/dropdown-list/data-binding  

 

 

Thanks, 

Deepak R.