How do i change the Background Color of the DROPDOWN portion of a RadDropDownList

14 posts, 0 answers
  1. Curtis
    Curtis avatar
    63 posts
    Member since:
    Oct 2014

    Posted 14 Dec 2017 Link to this post

    Hi folks - I know this same question has been asked several times and each time was extremely helpful except every solution I've seen so far ONLY deals with the "Textbox" region of a RadDropDownList.

     

    What I want to do is change the Border Color (if there is one) AND the background color (Fillcolor?) of JUST the dropdown. 

    You can see my "FromThis.png" and "ToThis.png" attachments to see far more clearly what I'm talking about.

     

    Thanks again in advance everyone!

    -Curtis

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

    Posted 15 Dec 2017 Link to this post

    Hello, Curtis,

    Thank you for writing.  

    In order to customize the popup's fill and border you can use the following code snippet:
    this.radDropDownList1.ListElement.BackColor = Color.DarkGray;
    this.radDropDownList1.ListElement.DrawFill = true;
    this.radDropDownList1.ListElement.BorderColor = Color.Red;
    this.radDropDownList1.ListElement.DrawBorder = true;
    this.radDropDownList1.ListElement.BorderWidth = 2;



    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. Curtis
    Curtis avatar
    63 posts
    Member since:
    Oct 2014

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

    Thank you Dess!

    This was exactly what I was looking for...hopefully another few months and i'll know all of the "insides" of these controls and won't have to rely on the kindness of others - hopefully it'll be me answering a few questions :)

    Kindest regards,

    Curtis.

  4. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3276 posts

    Posted 19 Dec 2017 Link to this post

    Hello, Curtis, 

    Thank you for writing.  

    I am glad that the provided code snippet was useful. Please do not hesitate to write back if you have any further questions. I will 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.
  5. james
    james avatar
    24 posts
    Member since:
    Aug 2014

    Posted 08 Aug 2018 in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Hi,

    How do I change the text area background color? Not the dropdown backcolor but the text area backcolor?

    Thank You

  6. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3276 posts

    Posted 09 Aug 2018 Link to this post

    Hello, James,       

    If you need to set the back color for the editable part in RadDropDownList, it is necessary to set just the RadDropDownList.BackColor property:

    this.radDropDownList1.BackColor = Color.Red;



    I hope this information helps. If you have any additional questions, please let me know.  
     
    Regards,
    Dess
    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.
  7. james
    james avatar
    24 posts
    Member since:
    Aug 2014

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

    Dess,

     

    That's not working for me, perhaps the Skin(Outllook) or the page css is overriding?

     

    James

  8. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3276 posts

    Posted 10 Aug 2018 Link to this post

    Hello, James,      

    I would like to note that this forum is related to RadDropDownList form the Telerik UI for WinForms suite. However, I suppose that you are using some of our web products since you use CSS. Feel free to post your technical questions in the relevant forum: https://www.telerik.com/forums

    Thank you for your understanding.

    Regards,
    Dess
    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.
  9. Ian
    Ian avatar
    20 posts
    Member since:
    Dec 2015

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

    Thanks for the reply. It helped me to get the background of my DDLB correct, but whilst trying every combination of colors to get this bit right, I now have a darker-colored border around my text (see image).

    Where - in the 'Edit UI Elements' pages can I set the color of this? Setting it a runtime in the code is not a good solution for me: too many places to add the same code. And I also find your style builder VERY complicated....

    Thanks

  10. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3276 posts

    Posted 10 Dec 2018 Link to this post

    Hello, Ian,    

    According to the provided brief description, it is not clear enough how you customize the RadDropDownList control. However, I suppose that the DropDownListElement.TextBox.ShowBorder property is set to true on your end. Make sure that it is set to false on your end. I have attached my sample project for your reference. 

    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.
  11. Deasun
    Deasun avatar
    20 posts
    Member since:
    May 2019

    Posted 31 May in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Good morning,

    I have a very similar issue.

    I am trying to set the background color of the individual items in the dropdown based on business rules.

    Currently trying to use: objDDL.ListElement.BackColor = Color.FromName(strColorIs);

    But it appears this sets the background for the dropdown area.

    Is there a way to do each items background?

    Example one could be white another Green and another Orange.

    This is a winforms Telerik.WinControls.UI.RadDropDownListElement object.

    Thanks

    Deasun.

  12. Deasun
    Deasun avatar
    20 posts
    Member since:
    May 2019

    Posted 31 May in reply to Deasun Link to this post

    I found: ddlBillingProcesses_VisualItemFormatting

    And it does seem to allow me to change each items background. :)

    But it seems to fire off anytime the dropdown is clicked on.

    I only need to do this once or or after each databind is redone.

  13. Dess | Tech Support Engineer, Sr.
    Admin
    Dess | Tech Support Engineer, Sr.  avatar
    3276 posts

    Posted 03 Jun Link to this post

    Hello, Deasun,     
     
    As you have already found out, items appearance in RadDropDownList can be customized by making use of the VisualListItemFormatting event. By using this event to customize the items appearance, you should always provide an else clause, where you reset the appearance settings which you have introduced. This is necessary since RadDropDownList uses data virtualization, which might lead to unpredictable appearance results when items are being reused.

    Have in mind that it is absolutely normal that the VisualListItemFormatting event is fired a lot of times. Due to the UI virtualization of the visual elements, this event ensures that the proper style will be applied to the items.

    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.
  14. Deasun
    Deasun avatar
    20 posts
    Member since:
    May 2019

    Posted 04 Jun in reply to Dess | Tech Support Engineer, Sr. Link to this post

    Thanks.

    Got it working the way I wanted at last.

     

Back to Top