Maintain placeholder after selection is made to allowsetting it back to placeholder

I'm building an employee search page and I have multiple dropdowns the user can select when doing their search. One of them is department which I've listed below. It's similar to the other dropdowns I've created. So when I run the page it renders fine and I see --- Any --- displayed in my dropdowns. I open the Department one and see my items and selected one of the items and did my search, no problem. But then I wanted to change my criteria because the person I was looking for didn't exist in this department. So I entered part of their last name in my textbox for last name. Then I went to change the Department back to --- Any --- but it's not available. The only thing I can do is select one of my Departments.

How do I maintain this placeholder so I can set it back to --- Any --- if I made a mistake and don't want to search on this field?

<ejs-dropdownlist id="DepartmentDropdown" dataSource="@Model.Departments" placeholder="-- Any --" ejs-for="@Model.employeeMatch.Department"></ejs-dropdownlist>



1 Reply 1 reply marked as answer

UD UdhayaKumar Duraisamy Syncfusion Team April 18, 2022 12:49 PM UTC

Hi Joseph,


We suggest you to use showClearButton property to clear the selected value. Once the clear button is clicked the placeholder will maintained. Please find the api documentation below for reference.


 

<ejs-dropdownlist id="games" placeholder="-- Any --" showClearButton="true" dataSource="data"> </ejs-dropdownlist>

 



API Documentation : https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.DropDowns.DropDownList.html#Syncfusion_EJ2_DropDowns_DropDownList_ShowClearButton


Regards,

Udhaya Kumar D


Attachment: 174416_DDL_(2)_4b309b60.zip

Marked as answer
Loader.
Up arrow icon