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();
       
    }
}