diff --git a/knowledge-base/dropdownlist-add-clear-button.md b/knowledge-base/dropdownlist-add-clear-button.md new file mode 100644 index 000000000..0441ae5f0 --- /dev/null +++ b/knowledge-base/dropdownlist-add-clear-button.md @@ -0,0 +1,79 @@ +--- +title: How to Add a Clear Button Inside DropDownList +description: Learn how to integrate a clear button within the DropDownList for Blazor to enable users to reset the selected value easily. +type: how-to +page_title: How to Add a Clear Button Inside the DropDownList for Blazor +slug: dropdownlist-kb-add-clear-button +tags: dropdownlist, clear, button, reset +res_type: kb +ticketid: 1680480, 1612125 +--- + +## Environment + + + + + + + +
ProductDropDownList for Blazor
+ +## Description + +This knowledge base answers the following questions: + +- How can I add a reset functionality to the [DropDownList for Blazor](slug:components/dropdownlist/overview)? +- 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. + +`````RAZOR + + + + + + + + + + + +@code { + private string? SelectedItem { get; set; } + + private List DropDownData = new List() { "first", "second", "third" }; + + private void HandleDropDownListReset() + { + SelectedItem = null; + } +} +````` + +## See Also + +- [Blazor DropDownList Overview](slug:components/dropdownlist/overview) +- [Blazor Button Overview](slug:components/button/overview)