Changing background color of DropDownList in client-side code

2 posts, 0 answers
  1. Justin
    Justin avatar
    11 posts
    Member since:
    Feb 2011

    Posted 08 Jul 2011 Link to this post

    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.
  2. Bozhidar
    Admin
    Bozhidar avatar
    677 posts

    Posted 11 Jul 2011 Link to this post

    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
    Explore the entire set of ASP.NET AJAX controls we offer here and browse the myriad online demos to learn more about the components and the features they incorporate.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top