Changing background color of DropDownList in client-side code

[Justin]

Hello. We are using a RadFormDecorator on our pages. What we want to do is that when you change the value of DownDown #1, you change the background color of DropDown #2. We need to do this on the client side to prevent an unnecessary postback.

We cannot figure out how to do this. Here is the code:

var eventType = $get("<%=ddlEventType.ClientID %>");
var moveType = $get("<%=ddlMoveType.ClientID %>");
var decorator = Telerik.Web.UI.RadFormDecorator.getDecoratedElement(moveType);
if (eventType.options[eventType.selectedIndex].text == "foo") {
    decorator.style.backgroundColor = "blue";
}
else {
   decorator.style.backgroundColor = "blue";
}

This code has no effect. Note that when I do Telerik.Web.UI.RadFormDecorator.set_enabled(moveType, false) - the control disables just fine. I just can't get the color changed.

Does anyone know how to do this? Thanks in advance for the help.

[Bozhidar]

Hi Justin,

For Dropdown decoration background color RadFormDecorator uses spite background image, that`s why just by applying background-color it is not possible to change it.

To do that, you should use custom sprite background image. Attached is ComboSprites.gif how the sprite for Black skin looks like.

You have two options, to create sprite with transparent part for the dorpdown text and to leave just the the borders and arrows. Then, applying background color will be visible through the transparent part of the image. Other option is to create several different sprites with different colors and to change the background image instead background color as you do it with your javascript.

You could find useful the following resources: Creating RadFormDecorator Custom Skin and as it is a older, you could also check Creating RadButton Custom Skin the way of custom skin creation is the same for all skins.

Best wishes,
Bojo
the Telerik team