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">
    <PopupContent>
        <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>
            </SfDropDownList>
        </div>
    </PopupContent>
    <ChildContent>
        <DropDownButtonEvents OnClose="popupClose"></DropDownButtonEvents>
    </ChildContent>
</SfDropDownButton>


@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" }
     };

}

<style>
    .e-dropdown-popup.e-transparent div {
        display: none;
    }
</style>