DropDownList - Programmatically setting the background colour of i

Discussion in 'ASP .Net Web Controls' started by Mike Owen, May 4, 2005.

  1. Mike Owen

    Mike Owen Guest

    I have a DropDownList box that I assign values from as follows:

    drpColor.DataSource = myVariancecolor
    drpColor.DataBind()

    Where myVariancecolor is an ArrayList. This works fine and a list of my
    colours is shown in the drop down.

    I would now like to take this one stage further and actually change the
    background colour of each option to be that of the colour.

    Once the control is rendered as HTML in the browser, this can be done for
    the colour RED for example by manually changing the code for a particular
    colour option from:

    <option value="11071">Red</option>

    To:

    <option value="11071" style="COLOR: black; BACKGROUND-COLOR:
    Red">Red</option>

    Has anyone got any idea how or if this 'BACKGROUND-COLOR' style value can be
    changed programmatically for all colours in the list?

    If not is there a better way of doing it without having to write the code to
    build the HTML for the drop down from scratch?


    Thanks, Mike.
     
    Mike Owen, May 4, 2005
    #1
    1. Advertisements

  2. Mike Owen

    Josh Guest

    You should be able to use
    ListItem li = ddlList.Items[0];

    li.Attributes.CssStyle.Add("background-color","Red");

    But you cant because of a known bug. However if you have the know-how you
    can use javascript to do this for you on the client
     
    Josh, May 4, 2005
    #2
    1. Advertisements

  3. Here's some Javascript to do this...


    <form>
    <select name="colors">
    <option value="111">Red</option>
    <option value="222">Blue</option>
    <option value="333">Green</option>
    <option value="444">Yellow</option>
    </select>
    </form>

    <script language="Javascript">
    <!--
    // Get the form
    var f = document.forms[0];

    // Get the dropdown
    var e = f.elements[0];

    // Iterate through the items in the dropdown
    for (var i=0; i < e.options.length; i++)
    {
    // Get the item
    var item = e.options;

    // Get the color
    var text = item.text;

    // Set the background color property
    item.style.backgroundColor = text;
    }
    //-->
    </script>


    Hope this helps,

    Mun
     
    Munsifali Rashid, May 4, 2005
    #3
  4. Mike Owen

    Mike Owen Guest

    Thanks for your replies guys.

    Unfortunately the setting of the colours has to be done server side as some
    of the colours do not directly match their text, e.g. Airforce Blue = #6699FF

    The Attributes.CssStyle.Add would have been perfect.

    Any other suggestions?


     
    Mike Owen, May 5, 2005
    #4
  5. Mike Owen

    Mike Owen Guest

    I have just found a possible solution to the problem suggested elsewhere:

    .....use an html control and make it runat="server".
    So use,
    <SELECT id="listBox1" size="20" runat="server"></SELECT>and add color
    attribute for each item..


    Cheers, Mike.


     
    Mike Owen, May 5, 2005
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.