How to integrate a SfDropDownList component in a SfDropDownMenu popup using Blazor Dropdown List?

This article provides a step-by-step guide on how to integrate a SfDropDownList component within a SfDropDownButton using Syncfusion Blazor Dropdown List components. This allows for a nested dropdown functionality where a list of options can be presented within a dropdown menu.

Prerequisites

Before proceeding, ensure that you have the following:

• Syncfusion Blazor components installed in your project.
• The necessary using directives added to your code:

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

Implementation

To create a dropdown list within a dropdown menu, follow the steps below:

1. Define the SfDropDownButton component and specify a reference to it using the @ref directive.

<SfDropDownButton @ref="DropdownButton">
    <ChildContent>
        <DropDownButtonEvents OnClose="OnClose"></DropDownButtonEvents>
    </ChildContent>
    <PopupContent>
        <!-- Dropdown List will be placed here -->
    </PopupContent>
</SfDropDownButton>

2. Within the PopupContent tag, add the SfDropDownList component. Configure it with the necessary properties such as TValue, Placeholder, TItem, and DataSource.

<PopupContent>
    <div style="width:500px;background:red">
        <SfDropDownList TValue="string" Placeholder="e.g. Australia" TItem="Countries" @bind-Value="@DropVal" DataSource="@Country">
            <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings>
            <DropDownListEvents TItem="Countries" TValue="string" OnOpen="OnOpen" OnClose="Close"></DropDownListEvents>
        </SfDropDownList>
    </div>
</PopupContent>

3. Define the code block with the necessary logic and data source for the dropdown list.

@code {
    SfDropDownButton DropdownButton;
    bool IsOpen = false;
    public string DropVal { get; set; } = "Canada";
    public class Countries
    {
        public string Name { get; set; }
        public string Code { get; set; }
    }
    List<Countries> Country = new List<Countries>
    {
        new Countries() { Name = "Australia", Code = "AU" },
        new Countries() { Name = "Bermuda", Code = "BM" },
        new Countries() { Name = "Canada", Code = "CA" },
        new Countries() { Name = "Cameroon", Code = "CM" },
    };

    private void OnClose(BeforeOpenCloseMenuEventArgs args)
    {
        args.Cancel = IsOpen;
    }

    private void OnOpen()
    {
        IsOpen = true;
    }

    private void Close()
    {
        IsOpen = false;
    }
}

4. The OnClose event of the SfDropDownButton and OnOpen and OnClose events of the SfDropDownList controls the opening and closing behavior of the SfDropDownList component.

Additional References

For more information on Syncfusion Blazor components and their usage, refer to the following resources:

• Syncfusion Blazor Documentation
• SfDropDownButton Component Documentation
• SfDropDownList Component Documentation

To see the implementation in action, visit the Blazor Playground and explore the example provided.

By following these steps, you can successfully integrate a dropdown list within a dropdown menu in your Blazor application using Syncfusion components.

Conclusion

I hope you enjoyed learning about how to integrate a SfDropDownList component in a SfDropDownMenu popup using Blazor Dropdownlist.

You can refer to our Blazor Dropdown List page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Dropdown List example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!