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 ?
10 Answers, 1 is accepted
0
Accepted
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 hope this information helps. Should you have further questions I would be glad to help.
Regards,
Dess
Progress Telerik
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";Regards,
Dess
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Zan
Top achievements
Rank 1
Rank 1
answered on 13 Dec 2017, 06:02 AM
Thank Dess.
0
Daryl
Top achievements
Rank 1
Rank 1
answered on 09 Dec 2019, 09:59 PM
This does not work for me. How can I show a clear button in a RadDropDownList control?
0
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.
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Daryl
Top achievements
Rank 1
Rank 1
answered on 12 Dec 2019, 12:53 PM
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.
0
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:
Should you have further questions please let me know.
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;
}Regards,
Dess | Tech Support Engineer, Sr.
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Daryl
Top achievements
Rank 1
Rank 1
answered on 12 Dec 2019, 02:33 PM
Seems to work perfectly. Thank you!
0
MORDECHAI
Top achievements
Rank 1
Rank 1
answered on 12 Mar 2020, 07:05 PM
Is it possible to get the clear button when using DropDownStyle.DropDownList?
0
MORDECHAI
Top achievements
Rank 1
Rank 1
answered on 12 Mar 2020, 07:07 PM
Oh, now I noticed the code snippet above.
0
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.
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.