How to Add a Clear Button Inside DropDownList

Environment

Product

DropDownList for Blazor

Description

This knowledge base answers the following questions:

• How can I add a reset functionality to the DropDownList for Blazor?
• Is it possible to integrate a clear button within the DropDownList for Blazor?
• What is the approach to clear the selected item in DropDownList for Blazor?

Solution

To add a clear button inside the DropDownList component, follow the steps below:

1. Include CSS style to position the clear button within the DropDownList.
2. Implement a method that resets the selected value upon clicking the clear button.

<style>
    .reset-button {
        margin-left: -3.5em;
        z-index: 10000;
    }
</style>

<TelerikDropDownList @bind-Value="@SelectedItem"
                     DefaultText=""
                     Data="@DropDownData"
                     Width="320px"
                     Id="country">
    <DropDownListSettings>
        <DropDownListPopupSettings Height="auto" />
    </DropDownListSettings>
</TelerikDropDownList>

<TelerikButton Class="reset-button"
               Size="sm"
               Visible="@(SelectedItem != null)"
               FillMode="@ThemeConstants.Button.FillMode.Flat"
               ButtonType="ButtonType.Reset"
               Icon="@SvgIcon.X"
               OnClick="@HandleDropDownListReset">
</TelerikButton>

@code {
    private string? SelectedItem { get; set; }

    private List<string> DropDownData = new List<string>() { "first", "second", "third" };

    private void HandleDropDownListReset()
    {
        SelectedItem = null;
    }
}

See Also

• Blazor DropDownList Overview
• Blazor Button Overview