Customization in Blazor DropDown List
7 Jul 20221 minute to read
Open Dropdown list dropdown on focus
You can automatically open the dropdown by using ShowPopupAsync() method on Focus event. The ShowPopupAsync()
method opens the popup that displays the list of items.
@using Syncfusion.Blazor.DropDowns
<SfDropDownList @ref=@popup TItem="GameFields" TValue="string" DataSource="@Games">
<DropDownListEvents TItem="GameFields" TValue="string" Focus="@FocusHandler"></DropDownListEvents>
<DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
</SfDropDownList>
@code {
public class GameFields
{
public string ID { get; set; }
public string Text { get; set; }
}
SfDropDownList<string, GameFields> popup;
private List<GameFields> Games = new List<GameFields>() {
new GameFields(){ ID= "Game1", Text= "American Football" },
new GameFields(){ ID= "Game2", Text= "Badminton" },
new GameFields(){ ID= "Game3", Text= "Basketball" },
new GameFields(){ ID= "Game4", Text= "Cricket" },
};
private void FocusHandler()
{
popup.ShowPopupAsync();
}
}