How to get colour template?

Richard Deeming

For Internet Explorer only:

To set the colour of an item in the list, use the background-color and color style attributes:

<select size="1">
<option
value="black"
style="background-color:black; color:white;">
Black
</option>
<option
value="green"
style="background-color:green;">
Green
</option>
</select>

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

Raymond Ooi

Then how can i capture which colour the user has selected? I'm working on ASP.net with C# code, can u show me the simple code? Million thanks =)

Richard Deeming

You would need to store the selected colour in a field on the form, and post it back to the server. For example:

<%@ Import Namespace="System.Drawing" %>
<script language="c#" runat="server">
private void cmdTest_Click(object sender, EventArgs e)
{
Color c = ColorTranslator.FromHtml(bgcolor.Text);

if (Color.Empty == c)
{
    lblColor.Text = "Please select a colour!";
}
else
{
    lblColor.Text = "You selected " + ColorTranslator.ToHtml(c);
    bgcolor.BackColor = c;
}

}
</script>

<html>
<head>
<title>Test Colour Picker</title>

var color = selectColor(txt.value);
txt.value = color;
txt.style.backgroundColor = color;

}

function selectColor(color)
{
var ret = dlgHelper.ChooseColorDlg(color);
ret = ret.toString(16);
if (ret.length < 6)
{
var temp = "000000".substring(0, 6 - ret.length);
ret = temp.concat(ret);
}
return "#" + ret;
}
//-->
</script>

</head>
<body>

<label for="bgcolor"><u>B</u>ackground color:</label>
<asp:textbox
id="bgcolor" runat="server"
text="#ffffff" accesskey="B" readonly="true" />
<button onclick="chooseColor()">...</button>
<br />
<asp:button
id="cmdTest" runat="server"
text="Update" onclick="cmdTest_Click" />
<br />
<asp:literal id="lblColor" runat="server" />

</form>
</body>
</html>

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

Raymond Ooi

wow, it works great.. millions thanks =) Can i share with someone else in other forum? coz i saw that they are ppl looking for this help as well... =)

Raymond Ooi

By the way, do you is it possible to make each item in dropdown list has its own different background colour?

Richard Deeming

Feel free! :-D

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

Richard Deeming

Look at the second half of my original response. ;)

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

Raymond Ooi

What if i store the colour of each item in db, how can i call it out and bind it to the dropdownlist with each item in the list has different color background?? Apart from that, do you think is it possible make the same effect in a radiobuttonlist? Thanks again.. :)

Richard Deeming

The list controls in the System.Web.UI.WebControls namespace don't support adding attributes to the individual items. You would need to write your own control to add support for the item styles. For example, the DropDownList would be quite simple:

using System;
using System.Drawing;
using System.Web.UI;
using System.Web.UI.WebControls;

public class ColorDropDownList : DropDownList
{
protected override void RenderContents(HtmlTextWriter writer)
{
bool seenSelected = false;

    for (int i=0; i<Items.Count; i++)
    {
        ListItem item = Items\[i\];
        
        writer.AddAttribute("value", item.Value);
        
        if (item.Selected)
        {
            if (seenSelected)
                throw new InvalidOperationException(
                    "Can't have multiple selected items!");
            
            writer.AddAttribute("selected", "selected");
            seenSelected = true;
        }
        
        item.Attributes.AddAttributes(writer);
        
        writer.RenderBeginTag("option");
        HttpUtility.HtmlEncode(item.Text, writer);
        writer.RenderEndTag();
    }
}

}

...
// Bind the list
list.DataBind();

// Set the style attribute for each item
for(int i=0; i<list.Items.Count; i++)
{
    ListItem item = list.Items\[i\];
    
    Color c = ColorTranslator.FromHtml(item.Value);
    if (Color.Empty != c)
    {
        string style = "background-color: " + item.Value + ";";
        if (c.GetBrightness() < 0.4)
            style += "color: white;";
        
        item.Attributes\["style"\] = style;
    }
}

...

The ListBox would be very similar - you would just need to allow multiple selected items if the SelectionMode was ListSelectionMode.Multiple. The other list controls are more complicated. You would have to override the entire rendering of the control to add support for item styles. If you wanted built-in support for data-binding the attributes, you would need to override the OnDataBinding method, which would be much more complicated.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

Raymond Ooi

Thanks a lot.. where can i find the related references on this? :)

Richard Deeming

I've not seen anything, but it's not too hard to figure out from the code for the existing controls. Have a look at http://www.saurik.com/net/exemplar/[^] and http://www.aisto.com/roeder/dotnet/[^] for tools to get at the code.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer