Click here to Skip to main content
15,867,308 members
Articles / Web Development / ASP.NET
Article

Coloring items in a ListBox

Rate me:
Please Sign up or sign in to vote.
4.19/5 (14 votes)
30 Aug 20041 min read 192.4K   2.5K   48   14
This article describes the "bug/feature" in the ASP.NET ListBox.

ColorListBox

Introduction

This is my first article and it's a very simple one at that. However, I felt that it was necessary to post it because when I need to find an answer to a programming question, I always come to CP first, and then if I can't find my answer here, I hit Google. A few days ago, I needed to do some coloring in a ListBox on the web. I found that due to a known "bug/feature" by Microsoft, I couldn't do this. (KB Article.)

So, here are the steps to work around this bug in VS.NET 2003.

Creating your ListBox

  1. First off, you don't need to use the WebControl ListBox. Instead, you need to use the HTML Control ListBox.
  2. You need to right click on the ListBox and select "Run as server control" so that you may use this ListBox from code behind.
  3. Set the following properties (optional): ID=ColorListBox1 and Size=8.

You now have your ListBox created but it's not very useful yet now, is it? Next, we will load it up with some data and change some colors.

Loading the ListBox with data

I'm not going to do any databinding although you can. This ListBox now works just like the normal WebControl ListBox as far as I can tell. Go to your code behind and edit the Page_Load event. Add the following lines of code:

C#
ColorListBox1.Items.Clear(); //Clears the contents of the ListBox 

ListItem liRed = new ListItem("Red", "Red"); //Create a Red item
liRed.Attributes.Add("style", 
     "background-color: RED"); //Make the back color Red

ListItem liBlue = new ListItem("Blue", "Blue"); //Create a Blue item
liBlue.Attributes.Add("style", 
     "background-color: BLUE"); //Make the back color Blue

ListItem liGreen = new ListItem("Green", "Green"); //Create a Green item
liGreen.Attributes.Add("style", 
     "background-color: GREEN"); //Make the back color Green

//Add the items to the ListBox
ColorListBox1.Items.AddRange(new ListItem[]{liRed, liBlue, liGreen});

Now you're done. If you view your aspx page, you should now see the same thing as the picture above.

Points of Interest

The only real point of interest is that Microsoft has a KB article about this, and in that article they say this bug is "by design".

History

Version 1.0 - 8/27/2004.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
Richard is a contract developer that currently lives in Arkansas. He has spent most of his career working in healthcare related companies. On his first job he was programming asp using VBScript and his boss walked in and told the whole group to get in their cars and drive to Barnes and Nobles. Once there he let everyone buy a few books about .NET and then he dropped the bomb, he said we would no longer write asp code. Starting Monday we were to be .NET developers.

Five years later Richard is a competent and self motivated .NET developer that can tackle most any problem. He has recently started his own business BellaDev which is proving to be a fun and challenging opportunity.

Comments and Discussions

 
GeneralRe: it doesn't work.... Pin
Dinao31-Aug-04 21:05
Dinao31-Aug-04 21:05 
GeneralRe: it doesn't work.... Pin
Richard Parsons1-Sep-04 3:20
Richard Parsons1-Sep-04 3:20 
GeneralSerendipity Pin
doctrane31-Aug-04 0:26
doctrane31-Aug-04 0:26 
GeneralRe: Serendipity Pin
Richard Parsons31-Aug-04 5:46
Richard Parsons31-Aug-04 5:46 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.