RadDropDownTree - Setting Background Color Programmatically

3 posts, 1 answers
  1. Nigel
    Nigel avatar
    7 posts
    Member since:
    Oct 2012

    Posted 22 Jan 2015 Link to this post

    I'm trying to set the background color of the selected text area (ie: displayed when the drop down is closed) on the RadDropDownTree programmatically.

    The screen has multiple RadDropDownTree controls, each of which the client can configure to be mandatory or optional, and when mandatory the client can also select for these to be displayed in a different color.   

    Setting the dropdowntree.BackColor is not working (setting dropdowntree.EmbeddedTree.BackColor sets the drop down background which is not what we want).

    I can set the area I need the background color applied to in the css with
    .RadDropDownTree_WebBlue .rddtInner .rddtFakeInput
        background-image: none !important;
        background-color: White;

    but need to do this on a control-by-control basis from the code behind.

    Can you advise how I can go about this?
  2. Answer
    Aneliya Petkova
    Aneliya Petkova avatar
    207 posts

    Posted 26 Jan 2015 Link to this post

    Hello Nigel,

    I would suggest you to add CSS class to the DOM element you need using client-side code in one of the RadDropDownTree event handlers. For example try the following:
    <telerik:RadDropDownTree ID="RadDropDownTree1" runat="server" OnClientLoad="OnClientLoad" DefaultMessage="Test_RadDropDownTree" RenderMode="Classic" EnableFiltering="true"
        DataFieldID="ID" DataFieldParentID="ParentID" TextMode="FullPath" ExpandNodeOnSingleClick="true" CheckBoxes="None"
        DataTextField="Text" DropDownSettings-AutoWidth="Enabled" ButtonSettings-ShowCheckAll="true" ButtonSettings-ShowClear="true">
    <script type="text/javascript">
        var $ = $telerik.$;
        function OnClientLoad(sender, eventArgs) {
            var dropDownTree = sender;
            var dropDown = dropDownTree.get_element();

    .test {
        background-color: #9eda29 !important;
        background-image: none !important;

    Hope this will be helpful.

    Aneliya Petkova

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. Nigel
    Nigel avatar
    7 posts
    Member since:
    Oct 2012

    Posted 26 Jan 2015 in reply to Aneliya Petkova Link to this post

    Thank you.

    I've just changed to OnClientLoad to use:
    and that is doing exactly what we need.

Back to Top