How to add Clear Button in RadDropDownList

[Zan]

Hello Telerik Team,

I want to add Clear Button in RadDropDownList like RadTextBox.

I have tried this in design time (Edit UI Elements >> RadDropDown TextBoxElement >> ShowClearButton).

But Nothing was happened.

How Can I add Clear Button in DropDownList ?

[Dess | Tech Support Engineer, Principal]

Hello, AungKo,

Thank you for writing.  

It seems to be an issue with the theme for the clear button. There is no image applied to the button element. I have logged it in our feedback portal. You can track its progress, subscribe for status changes and add your comments on the following link - feedback item.

I have also updated your Telerik points.

Currently, the possible solution that I can suggest is to set text for the button: 

this.radDropDownList1.DropDownListElement.TextBox.ShowClearButton = true;
this.radDropDownList1.DropDownListElement.TextBox.ClearButton.Text = "X";

I hope this information helps. Should you have further questions I would be glad to help.
 
Regards,
Dess
Progress Telerik

[Zan]

Thank Dess.

[Daryl]

This does not work for me. How can I show a clear button in a RadDropDownList control?

[Dess | Tech Support Engineer, Principal]

Hello, Daryl, 

I have attached a sample project for your reference. Please note that the clear button is expected to be displayed only when there is some text in the editable area of RadDropDownList.

I hope this information helps. 

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Daryl]

Ok, I see what the problem is.... I have the DropDownStyle set to DropDownList. The "X" does not appear when it is set in this mode. I still need to clear the selection, so how can I do this? I also need to subscribe to the event to make other things happen such as clearing a ListBox when the "X" has been clicked.

[Dess | Tech Support Engineer, Principal]

Hello, Daryl,    

The RadDropDownList.DropDownStyle property determines if the text area at the top of the control can be edited. A setting of DropDown (the default) allows editing and the DropDownList setting shows the text area as read-only.As it was demonstrated in the previously provided code snippet, the clear button is enabled for the text box in the editable area of RadDropDownList. If you set the DropDownStyle property to DropDownList, note that the text box won't be shown at all. That is why the clear button is not visible. 

However, the possible solution that I can suggest is to insert a LightVisualElement to simulate the clear button:

        LightVisualElement clearElement = new LightVisualElement();

        public RadForm1()
        {
            InitializeComponent();

            this.radDropDownList1.DropDownStyle = Telerik.WinControls.RadDropDownStyle.DropDownList;

            clearElement.StretchHorizontally = false;
            clearElement.Visibility = Telerik.WinControls.ElementVisibility.Collapsed;
            clearElement.Alignment = ContentAlignment.MiddleRight;
            clearElement.Text = "X";
            clearElement.Click += clearElement_Click;
            this.radDropDownList1.DropDownListElement.EditableElement.Children.Add(clearElement);
            this.radDropDownList1.SelectedIndexChanged += radDropDownList1_SelectedIndexChanged;
        }

        private void radDropDownList1_SelectedIndexChanged(object sender, Telerik.WinControls.UI.Data.PositionChangedEventArgs e)
        {
            clearElement.Visibility = this.radDropDownList1.SelectedIndex == -1 ? Telerik.WinControls.ElementVisibility.Collapsed : 
                                      Telerik.WinControls.ElementVisibility.Visible;
        }

        private void clearElement_Click(object sender, EventArgs e)
        {
            this.radDropDownList1.SelectedIndex = -1;
        }

Should you have further questions please let me know.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik

[Daryl]

Seems to work perfectly. Thank you!

[MORDECHAI]

Is it possible to get the clear button when using DropDownStyle.DropDownList?

[MORDECHAI]

Oh, now I noticed the code snippet above.

[Dess | Tech Support Engineer, Principal]

Hello, MORDECHAI,

Note that the clear button is relevant for text boxes only. When you use DropDownStyle.DropDownList, there is not input area. 

Feel free to use the suggested solution for inserting a LightVisualElement for clearing the text or simply use the DropDownStyle.DropDown.

I hope this information helps. If you need any further assistance please don't hesitate to contact me.

Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik