How to add Clear Button in RadDropDownList

11 posts, 1 answers
  1. Zan
    Zan avatar
    19 posts
    Member since:
    Feb 2017

    Posted 11 Dec 2017 Link to this post

    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 ?

  2. Answer
    Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4129 posts

    Posted 12 Dec 2017 Link to this post

    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
    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.
  3. Zan
    Zan avatar
    19 posts
    Member since:
    Feb 2017

    Posted 13 Dec 2017 Link to this post

    Thank Dess.
  4. Daryl
    Daryl avatar
    6 posts
    Member since:
    Jan 2017

    Posted 09 Dec 2019 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    This does not work for me. How can I show a clear button in a RadDropDownList control?
  5. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4129 posts

    Posted 12 Dec 2019 Link to this post

    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

    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.
  6. Daryl
    Daryl avatar
    6 posts
    Member since:
    Jan 2017

    Posted 12 Dec 2019 Link to this post

    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.
  7. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4129 posts

    Posted 12 Dec 2019 Link to this post

    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

    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.
  8. Daryl
    Daryl avatar
    6 posts
    Member since:
    Jan 2017

    Posted 12 Dec 2019 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Seems to work perfectly. Thank you!
  9. MORDECHAI
    MORDECHAI avatar
    6 posts
    Member since:
    Feb 2019

    Posted 12 Mar 2020 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Is it possible to get the clear button when using DropDownStyle.DropDownList?
  10. MORDECHAI
    MORDECHAI avatar
    6 posts
    Member since:
    Feb 2019

    Posted 12 Mar 2020 in reply to MORDECHAI Link to this post

    Oh, now I noticed the code snippet above.
  11. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    4129 posts

    Posted 13 Mar 2020 Link to this post

    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

    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.
Back to Top