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. Advertising

  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. Advertising

  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
    http://www.munit.co.uk/blog/



    "Josh" <> wrote in message
    news:...
    > 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
    >
    >
     
    Munsifali Rashid, May 4, 2005
    #3
  4. Mike Owen

    Mike Owen Guest

    Re: DropDownList - Programmatically setting the background colour

    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?


    "Munsifali Rashid" wrote:

    > 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
    > http://www.munit.co.uk/blog/
    >
    >
    >
    > "Josh" <> wrote in message
    > news:...
    > > 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
    > >
    > >

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

    Mike Owen Guest

    Re: DropDownList - Programmatically setting the background colour

    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" wrote:

    > 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?
    >
    >
    > "Munsifali Rashid" wrote:
    >
    > > 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
    > > http://www.munit.co.uk/blog/
    > >
    > >
    > >
    > > "Josh" <> wrote in message
    > > news:...
    > > > 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
    > > >
    > > >

    > >
    > >
    > >
     
    Mike Owen, May 5, 2005
    #5
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. John Doe

    Set the background colour of a grid

    John Doe, Oct 21, 2003, in forum: ASP .Net
    Replies:
    7
    Views:
    369
    Alvin Bruney
    Oct 22, 2003
  2. JezB
    Replies:
    9
    Views:
    362
    Curt_C [MVP]
    Apr 30, 2004
  3. Scott Steiner

    Setting background colour of JFrame

    Scott Steiner, May 5, 2005, in forum: Java
    Replies:
    1
    Views:
    26,601
    Roland
    May 5, 2005
  4. Dj Frenzy
    Replies:
    3
    Views:
    312
    Robert
    Feb 10, 2004
  5. jodleren
    Replies:
    2
    Views:
    204
    Thomas 'PointedEars' Lahn
    Jan 12, 2008
Loading...

Share This Page