RadDropDownTree - Setting Background Color Programmatically

[Nigel]

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?

[Aneliya Petkova]

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">
</telerik:RadDropDownTree>

<script type="text/javascript">
    var $ = $telerik.$;
    function OnClientLoad(sender, eventArgs) {
        var dropDownTree = sender;
        var dropDown = dropDownTree.get_element();
        $(dropDown).find(".rddtInner").addClass("test");
    }
</script>

CSS:

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

Hope this will be helpful.

Regards,
Aneliya Petkova
Telerik

 

 

[Nigel]

Thank you.

I've just changed to OnClientLoad to use:
  $(dropDown).find(".rddtFakeInput").addClass("test")
and that is doing exactly what we need.