Changing the background color of the selected item in a listbox.

[Karen Grube]

Hi!

I'm working on an ASP.Net page that has our company logo and a colored
banner to customize the appearance. The page also includes an asp listbox
control. However, the colors I see inside the listbox when your cursor is on
an item as well as the colors of the scrollbarand the box's border all seem
to be just the standard windows colors. On msdn, I located a page that
showed how to set

listbox1.selecteditembackcolor [= ncolor ]

but the language was Foxpro and it didn't work in the code behind a Web
Form. I've even found some information on using styles (or CSS Style
Sheets) to change the attributes of listboxes. I have successfully change
the background color of the entire box itself by setting the color within the
style in the html portion of the code. The problem is that I can't locate
the correct syntax or properties to change this specific item! I realize
it's probabaly just a single little line of code, but I sure can't figure it
out.

I know the phrase "All I want to do is . . ." is highly overused, but gosh!
This shouldn't be that hard! Why isn't all this stuff part of the listbox
properties?

Any guidance you can give me would be greatly appreciated. I've been
researching this for about four hours, and it's really getting frustrating
not being able to find it.

Thanks!

 

[Alessandro Zifiglio]

hi Karen, this is a known bug in the listbox control confirmed by microsoft
here :

http://support.microsoft.com/default.aspx?scid=kb;en-us;Q309338

To work around you can try and read various articles showing how to work
around, one of the first two results i came by on google are :

http://www.codeproject.com/aspnet/ColorListBox.asp

http://www.c-sharpcorner.com/Code/2003/July/DropDownListBox.asp

This bug is due to the fact that the dropdownlist, radiobuttonlist and
listbox controls do not render any attributes you set for list items. If you
are unhappy with working around providing in the previous two articles then
you can try to create your own custom control deriving from the listbox and
overriding the RenderContents() method, making sure attributes set for list
items are provided.

Regards,
Alessandro Zifiglio
http://www.dotnetbox.com (The custom web control that lets you drag and
resize content on your pages like as if you were in Visual Studio.NET
designer.)

 

[Karen Grube]

Hi!

Thanks for answering. This always seems to happen to me! Something I
want to do that seems so simple turns out to be the result of a 'by design'
bug, which really means no one at Microsoft thought the problem was important
enough to fix. I'm really getting fed up with running in to these issues.
I'm having the same problem with SharePoint, and not being able to apply a
FrontPage theme to all the pages in a SharePoint Portal site. Of course
there's a work-around. There always is, and it's always one that is time
consuming and frusttrating and requires hours and even days of research and
work. Oh well. Typical.

Might you be able to direct me to an already designed replacement listbox
control that provides this functionality? I see a number or lisbox controls
available, but I'm not sure if any of them have this capability. If you
happen to know of one - preferably a FREE one - please let me know.

Thanks!
Karen

 

[Alessandro Zifiglio]

hi Karen, I understand your frustration and it seems like its gotten the
better of you ;p
This is an easy fix however so i'm going to post the code. You dont need a
free third party component for this.
You probably know all this but just in case i'll tell you anyway:
Create a new project in VS.NET, choose "web control Library" as the project
type and add the following code in there. Compile(Build) and you have your
new control. If this is getting too complicated let me know and i'll email
you the compiled dll.


Imports System.Web
Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls
<ToolboxData("<{0}:FixedListbox runat=server></{0}:FixedListbox>")> _
Public Class FixedListbox
Inherits System.Web.UI.WebControls.ListBox


Protected Overrides Sub RenderContents(ByVal writer As
System.Web.UI.HtmlTextWriter)

Dim myFlag1 As Boolean = False
Dim myFlag2 As Boolean = (Me.SelectionMode =
ListSelectionMode.Single)
Dim collection1 As ListItemCollection = Me.Items
Dim listItemsCount As Integer = collection1.Count
If (listItemsCount > 0) Then
For num2 As Integer = 0 To listItemsCount - 1
Dim item1 As ListItem = collection1.Item(num2)
writer.WriteBeginTag("option")
If item1.Selected Then
If myFlag2 Then
If myFlag1 Then
Throw New HttpException("A ListBox cannot have
multiple items selected when the SelectionMode is Single")
End If
myFlag1 = True
End If
writer.WriteAttribute("selected", "selected")
End If
writer.WriteAttribute("value", item1.Value, True)
'The line below is why the listbox never
' rendered any attributes you set for list items.
item1.Attributes.Render(writer) '<-- Missing line
writer.Write(">")
HttpUtility.HtmlEncode(item1.Text, writer)
writer.WriteEndTag("option")
writer.WriteLine()
Next num2
End If
End Sub

End Class

----------------------------------------------------------------------------
----------------------------------------------

To test the control, add the compiled dll to toolbox, drag it onto the
project where you want to consume the control, add a few ListItems and in
the Page_Load method try :
FixedListBox1.Items(0).Attributes.CssStyle.Item("BACKGROUND-COLOR")
= "red"
FixedListBox1.Items(1).Attributes.CssStyle.Item("BACKGROUND-COLOR")
= "green"
This will change the background color for the first 2 items in the listbox


Regards,
Alessandro Zifiglio
http://www.dotnetbox.com (The custom web control that lets you drag and
resize content on your pages like as if you were in Visual Studio.NET
designer.)

 

[Mike Craig]

Alessandro,
Thanks for posting, and sharing your code, I too came upon this
frustration, and since it wasn't a project requirement I didn't spend
much time on this problem. But with your example, I've been able to add
in this 'nice to have' feature to the joy of my program manager.

Thanks, you rock!

Michael Craig

 

[Alessandro Zifiglio]

I'm Glad that got helpful to you, Mike

Regards,
Alessandro Zifiglio
http://www.dotnetbox.com (The custom web control that lets you drag and
resize content on your pages like as if you were in Visual Studio.NET
designer.)

 

[Nate Reck]

Alessandro,
One issue with this that I cannot seem to get past. If the page is
reposted, say by another dropdownlist or button, the styles I added on the
page load functionality to fill that original list have disappeared and the
attribute collection for each listitem is empty on the postback. I cannot
seem to find any useful help on this. Any ideas?

Sincerely,
Nate Reck

 

[lisa]

Did anyone ever find an answer to this? I can't get past it either.

Thanks,
Lisa

Alessandro,
One issue with this that I cannot seem to get past. If the page is
reposted, say by another dropdownlist or button, the styles I added on the
page load functionality to fill that original list have disappeared and the
attribute collection for each listitem is empty on the postback. I cannot
seem to find any useful help on this. Any ideas?

Sincerely,
Nate Reck

I'm Glad that got helpful to you, Mike

Regards,
Alessandro Zifiglio
http://www.dotnetbox.com (The custom web control that lets you drag and
resize content on your pages like as if you were in Visual Studio.NET
designer.)

Alessandro,
Thanks for posting, and sharing your code, I too came upon this
frustration, and since it wasn't a project requirement I didn't spend
much time on this problem. But with your example, I've been able to add
in this 'nice to have' feature to the joy of my program manager.

Thanks, you rock!

Michael Craig


Alessandro Zifiglio wrote:
hi Karen, I understand your frustration and it seems like its gotten the
better of you ;p
This is an easy fix however so i'm going to post the code. You

dont need
a

free third party component for this.
You probably know all this but just in case i'll tell you anyway:
Create a new project in VS.NET, choose "web control Library" as

the
project

type and add the following code in there. Compile(Build) and

you have
your

new control. If this is getting too complicated let me know and

i'll
email

you the compiled dll.


Imports System.Web
Imports System.ComponentModel
Imports System.Web.UI
Imports System.Web.UI.WebControls
<ToolboxData("<{0}:FixedListbox

Public Class FixedListbox
Inherits System.Web.UI.WebControls.ListBox


Protected Overrides Sub RenderContents(ByVal writer As
System.Web.UI.HtmlTextWriter)

Dim myFlag1 As Boolean = False
Dim myFlag2 As Boolean = (Me.SelectionMode =
ListSelectionMode.Single)
Dim collection1 As ListItemCollection = Me.Items
Dim listItemsCount As Integer = collection1.Count
If (listItemsCount > 0) Then
For num2 As Integer = 0 To listItemsCount - 1
Dim item1 As ListItem = collection1.Item(num2)
writer.WriteBeginTag("option")
If item1.Selected Then
If myFlag2 Then
If myFlag1 Then
Throw New HttpException("A ListBox

cannot
have

multiple items selected when the SelectionMode is Single")
End If
myFlag1 = True
End If
writer.WriteAttribute("selected", "selected")
End If
writer.WriteAttribute("value", item1.Value, True)
'The line below is why the listbox never
' rendered any attributes you set for list items.
item1.Attributes.Render(writer) '<-- Missing line
writer.Write(">")
HttpUtility.HtmlEncode(item1.Text, writer)
writer.WriteEndTag("option")
writer.WriteLine()
Next num2
End If
End Sub

End Class

--------------------------------------------------------------------------
-- ListItems and
in

the Page_Load method try :
FixedListBox1.Items(0).Attributes.CssStyle.Item("BACKGROUND-COLOR")
= "red"
FixedListBox1.Items(1).Attributes.CssStyle.Item("BACKGROUND-COLOR")
= "green"
This will change the background color for the first 2 items in

the
listbox

Regards,
Alessandro Zifiglio
http://www.dotnetbox.com (The custom web control that lets

you drag
and

resize content on your pages like as if you were in Visual Studio.NET
designer.)


Hi!

Thanks for answering. This always seems to happen to me!

Something
I

want to do that seems so simple turns out to be the result of a 'by

design'

bug, which really means no one at Microsoft thought the problem was

important

enough to fix. I'm really getting fed up with running in to

these
issues.

I'm having the same problem with SharePoint, and not being able

to apply
a

FrontPage theme to all the pages in a SharePoint Portal site. Of course
there's a work-around. There always is, and it's always one

that is
time

consuming and frusttrating and requires hours and even days of research

and

work. Oh well. Typical.

Might you be able to direct me to an already designed replacement

listbox

control that provides this functionality? I see a number or lisbox

controls

available, but I'm not sure if any of them have this capability. If you
happen to know of one - preferably a FREE one - please let me know.

Thanks!
Karen