Create Dropdown List in Popup of Blazor Dropdown Menu Component

9 Mar 20222 minutes to read

We have render the DropDownList component in DropDownMenu popup using PopupContent property.

In the following example, render DropDownList component in popup.

@using Syncfusion.Blazor.SplitButtons
@using Syncfusion.Blazor.DropDowns

<SfDropDownButton CssClass="e-caret-hide" Content="Games">
        <div id="dropDownFilterExpenses">
            <SfDropDownList TValue="string" TItem="GameFields" PopupHeight="230px" Placeholder="Select a game" DataSource="@Games">
                <DropDownListFieldSettings Text="Text" Value="ID"></DropDownListFieldSettings>
                <DropDownListEvents Opened="OpenPopup" OnClose="beforeClose" TValue="string" TItem="GameFields"></DropDownListEvents>
        <DropDownButtonEvents OnClose="popupClose"></DropDownButtonEvents>

@code {

    private bool ispopUp = false;

    private void popupClose(BeforeOpenCloseMenuEventArgs args)
        args.Cancel = this.ispopUp;

    private void OpenPopup(PopupEventArgs args)
        this.ispopUp = true;

    private void beforeClose(PopupEventArgs args)
        this.ispopUp = false;

    public class GameFields
        public string ID { get; set; }
        public string Text { get; set; }
    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" },
        new GameFields(){ ID= "Game5", Text= "Football" }


    .e-dropdown-popup.e-transparent div {
        display: none;

Creating DropDown List in Popup of Blazor DropDownMenu