DropDownList - Programmatically setting the background colour of i

[Mike Owen]

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.

 

[Josh]

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]

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

 

[Mike Owen]

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?

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/

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]

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.

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?

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/

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