Apply Style to ListItem in List Controls

| December 26, 2010 | 0 Comments

We can apply CSS class or styles to our List Controls (CheckBoxList, RadioButtonList, DropDownList and ListBox). But there is no way to add or apply style to ListItem within them in .aspx. So this article deals with how to add attributes to ListItems in all ListControls.

We would apply required style or attributes at runtime (dynamically) by accessing each ListItem in foreach loop. And then applying attributes by ListItem.Attributes.Add(“style”,”value”). We have developed a simple website consisting of all four List Controls. And then we have changed their background color and color properties at runtime.

Applying attributes to list controls

Check out code snippet below for how to change background color and color of ListItems in List Controls.

Code Snippet for .aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %></pre>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>Colored CheckBoxList</title>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <h3>
 Applying Attributes to List Controls</h3>
 <table>
 <tr>
 <td>
 <asp:CheckBoxList ID="checkBoxListColors" runat="server" RepeatDirection="Vertical">
 <asp:ListItem Text="Yellow" Value="yellow"></asp:ListItem>
 <asp:ListItem Text="Red" Value="red"></asp:ListItem>
 <asp:ListItem Text="Blue" Value="blue"></asp:ListItem>
 <asp:ListItem Text="Orange" Value="orange"></asp:ListItem>
 <asp:ListItem Text="Green" Value="green"></asp:ListItem>
 </asp:CheckBoxList>
 </td>
 <td>
 <asp:RadioButtonList ID="radioButtonListColors" runat="server" RepeatDirection="Vertical">
 <asp:ListItem Text="Yellow" Value="yellow"></asp:ListItem>
 <asp:ListItem Text="Red" Value="red"></asp:ListItem>
 <asp:ListItem Text="Blue" Value="blue"></asp:ListItem>
 <asp:ListItem Text="Orange" Value="orange"></asp:ListItem>
 <asp:ListItem Text="Green" Value="green"></asp:ListItem>
 </asp:RadioButtonList>
 </td>
 <td>
 <asp:DropDownList ID="ddlColors" runat="Server">
 <asp:ListItem Text="Yellow" Value="yellow"></asp:ListItem>
 <asp:ListItem Text="Red" Value="red"></asp:ListItem>
 <asp:ListItem Text="Blue" Value="blue"></asp:ListItem>
 <asp:ListItem Text="Orange" Value="orange"></asp:ListItem>
 <asp:ListItem Text="Green" Value="green"></asp:ListItem>
 </asp:DropDownList>
 </td>
 <td>
 <asp:ListBox ID="listBoxColors" runat="Server">
 <asp:ListItem Text="Yellow" Value="yellow"></asp:ListItem>
 <asp:ListItem Text="Red" Value="red"></asp:ListItem>
 <asp:ListItem Text="Blue" Value="blue"></asp:ListItem>
 <asp:ListItem Text="Orange" Value="orange"></asp:ListItem>
 <asp:ListItem Text="Green" Value="green"></asp:ListItem>
 </asp:ListBox>
 </td>
 </tr>
 </table>
 </div>
 </form>
</body>
</html>

Code Snippet for .aspx.cs:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// CheckBoxList
foreach (ListItem li in this.checkBoxListColors.Items)
{
SetItemsColor(li);
}

// RadioButtonList
foreach (ListItem li in this.radioButtonListColors.Items)
{
SetItemsColor(li);
}

// DropDownList
foreach (ListItem li in this.ddlColors.Items)
{
SetItemsColor(li);
}

// ListBox
foreach (ListItem li in this.listBoxColors.Items)
{
SetItemsColor(li);
}
}

public void SetItemsColor(ListItem li)
{
if (li.Text.Equals("Yellow"))
{
li.Attributes.Add("style", "background: yellow;");
}

if (li.Text.Equals("Red"))
{
li.Attributes.Add("style", "background: red;");
}

if (li.Text.Equals("Blue"))
{
li.Attributes.Add("style", "background: blue; color:white;");
}

if (li.Text.Equals("Orange"))
{
li.Attributes.Add("style", "background: orange;");
}

if (li.Text.Equals("Green"))
{
li.Attributes.Add("style", "background: green;");
}
}
}

Category: Asp.Net, C#

Leave a Reply

%d bloggers like this: