|
| 1 | +--- |
| 2 | +title: How to Add a Clear Button Inside DropDownList |
| 3 | +description: Learn how to integrate a clear button within the DropDownList for Blazor to enable users to reset the selected value easily. |
| 4 | +type: how-to |
| 5 | +page_title: How to Add a Clear Button Inside the DropDownList for Blazor |
| 6 | +slug: dropdownlist-kb-add-clear-button |
| 7 | +tags: dropdownlist, clear, button, reset |
| 8 | +res_type: kb |
| 9 | +ticketid: 1680480, 1612125 |
| 10 | +--- |
| 11 | + |
| 12 | +## Environment |
| 13 | +<table> |
| 14 | + <tbody> |
| 15 | + <tr> |
| 16 | + <td>Product</td> |
| 17 | + <td>DropDownList for Blazor</td> |
| 18 | + </tr> |
| 19 | + </tbody> |
| 20 | +</table> |
| 21 | + |
| 22 | +## Description |
| 23 | + |
| 24 | +This knowledge base answers the following questions: |
| 25 | + |
| 26 | +- How can I add a reset functionality to the [DropDownList for Blazor](slug:components/dropdownlist/overview)? |
| 27 | +- Is it possible to integrate a clear button within the DropDownList for Blazor? |
| 28 | +- What is the approach to clear the selected item in DropDownList for Blazor? |
| 29 | + |
| 30 | +## Solution |
| 31 | + |
| 32 | +To add a clear button inside the DropDownList component, follow the steps below: |
| 33 | + |
| 34 | +1. Include CSS style to position the clear button within the DropDownList. |
| 35 | +2. Implement a method that resets the selected value upon clicking the clear button. |
| 36 | + |
| 37 | +`````RAZOR |
| 38 | +<style> |
| 39 | + .reset-button { |
| 40 | + margin-left: -3.5em; |
| 41 | + z-index: 10000; |
| 42 | + } |
| 43 | +</style> |
| 44 | +
|
| 45 | +<TelerikDropDownList @bind-Value="@SelectedItem" |
| 46 | + DefaultText="" |
| 47 | + Data="@DropDownData" |
| 48 | + Width="320px" |
| 49 | + Id="country"> |
| 50 | + <DropDownListSettings> |
| 51 | + <DropDownListPopupSettings Height="auto" /> |
| 52 | + </DropDownListSettings> |
| 53 | +</TelerikDropDownList> |
| 54 | +
|
| 55 | +<TelerikButton Class="reset-button" |
| 56 | + Size="sm" |
| 57 | + Visible="@(SelectedItem != null)" |
| 58 | + FillMode="@ThemeConstants.Button.FillMode.Flat" |
| 59 | + ButtonType="ButtonType.Reset" |
| 60 | + Icon="@SvgIcon.X" |
| 61 | + OnClick="@HandleDropDownListReset"> |
| 62 | +</TelerikButton> |
| 63 | +
|
| 64 | +@code { |
| 65 | + private string? SelectedItem { get; set; } |
| 66 | +
|
| 67 | + private List<string> DropDownData = new List<string>() { "first", "second", "third" }; |
| 68 | +
|
| 69 | + private void HandleDropDownListReset() |
| 70 | + { |
| 71 | + SelectedItem = null; |
| 72 | + } |
| 73 | +} |
| 74 | +````` |
| 75 | + |
| 76 | +## See Also |
| 77 | + |
| 78 | +- [Blazor DropDownList Overview](slug:components/dropdownlist/overview) |
| 79 | +- [Blazor Button Overview](slug:components/button/overview) |
0 commit comments