How do I add a clear button icon to a dropdown list so the user can clear the selected value?

[Tejas]

I am currently utilizing a KendoReact Form with an integrated DropDownList component. However, the selected value cannot be cleared by the user. I have reviewed external documentation, but a clear explanation for implementing this functionality is absent. Could you provide a coding example demonstrating how to implement a clear button on the dropdown within this form structure?  

I need to add a clear icon to my dropdown list so that the user can click it to clear the selected value

[Yanko]

Hello, Tejas,

The KendoReact DropDownList does not currently offer a built-in clear button, but you can achieve this functionality by customizing the value rendering using the valueRender prop. This allows you to display a clear icon next to the selected value, and when the icon is clicked, the value is reset in your form state.

Below is a concise example of how to integrate a clear button into a DropDownList inside a KendoReact Form:

• https://stackblitz.com/edit/react-1ahvwbyy?file=app%2Fapp.tsx 

Alternatively, if you have the licensed version of the packages,  you can use the ComboBox component, as it has this functionality built in.

Let me know if I can further assist you.

Regards,
Yanko
Progress Telerik