Introduction
Sometimes you may need to apply styles to the list items of a DropDownList, but these keep only until a postback occurs. The example I present is a list of products where the red items are those that have been saved.
Using the code
In the ASPX page you have a DropDownList to apply colors, a HiddenField is added in which you store the indices of the list items that have a color.
<asp:HiddenField ID="hfValuesSelectForColor" runat="server" />
<asp:DropDownList ID="drpProduct" runat="server"
DataTextField="Text" DataValueField="Value" ><asp:DropDownList/>
It also requires a JavaScript function that is responsible for coloring the DropDownList as the indices stored in hfValuesSelectForColor; this function is between the head tags.
<head runat="server">
<title>DropDownListColor</title>
<script language="javascript" type="text/javascript">
<!--
function drpSetColors(DrpName, Color, StyleType, indicesForSplit, SeparatorSplit)
{
if (document.getElementById(DrpName) != null) {
var indices = indicesForSplit.split(SeparatorSplit);
if (indices[0] == "")
return;
for (j = 0; j < indices.length; j++) {
if (StyleType.toUpperCase() == "COLOR")
document.getElementById(DrpName).options[indices[j]].style.color = Color;
else if (StyleType.toUpperCase() == "BACKGROUND-COLOR")
document.getElementById(DrpName).options[indices[j]].style.backgroundColor = Color;
}
}
}
-->
</script />
In the code-behind in Page_load, you need to call a JavaScript function. To construct the sentence, I use a StringBuider (needs to add the namespace System.Text), but you can use a simple string.
protected void Page_Load(object sender, EventArgs e)
{
StringBuilder drpSetColors = new StringBuilder();
drpSetColors.Append("<script>");
drpSetColors.Append("drpSetColors('DrpProduct', 'Red', 'color', '" +
hfValuesSelectForColor.Value + "','|');");
drpSetColors.Append("</script>");
this.Page.ClientScript.RegisterStartupScript(this.Page.GetType(),
"drpColor", drpSetColors.ToString());
}
You already have everything you need in order to keep the colors, now you only need to indicate which items are colored. For that, I work in the code-behind, assuming you have more development on the server than the client, and therefore needs to keep the colors of the items in the list in a postback.
To accomplish this, you must have stored somewhere, the reason for coloring the items in the list. In my example, I am extracting data from a Viewstate which contains a datatable with three columns Text, Value, and IsSave. The columns Text and Value are the DataTextField and DataValueField for the DropDownList, and IsSave is a value that indicates if you must color an item (product) when it is saved.
DataTable dt = (DataTable)ViewState["vsTable"];
hfValuesSelectForColor.Value = "";
DataRow[] drColors = dt.Select("IsSave = 1");
for (int i = 0; i < drColors.Length; i++)
{
int index = drpProduct.Items.IndexOf(
drpProduct.Items.FindByValue(drColors[i]["Value"].ToString()));
drpProduct.Items[index].Attributes.Add("style", "color: red");
drpProductCopy.Items[index].Attributes.Add("style",
"background-Color: red");
drpProductCopy.SelectedIndex = index;
if (hfValuesSelectForColor.Value == "")
hfValuesSelectForColor.Value = index.ToString();
else
hfValuesSelectForColor.Value = hfValuesSelectForColor.Value + "|" + inde;
}
Points of interest
Well, that's all there is to it. To complete the code, you need to download the source... I hope you take this hint useful.
Ana B. Ochoa. Three years working like web developer for airlines in courier and national/international cargo.
Submit an article or tip
