Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > ASP .Net Web Controls > REPOST: How can I change the color of the Selected Item in a list

Reply
Thread Tools

REPOST: How can I change the color of the Selected Item in a list

 
 
Karen Grube
Guest
Posts: n/a
 
      07-13-2005
Hi!

I'm reposting this because I never received a good answer. Please remember,
I'm asking about how to change the color in a server-side ASP.Net box, not a
client side or Windows control.

I'm using a standard server side ASP.Net listbox control on a web form. The
page is basically various shades of green. The listbox itself has a pale
green background and forest green text and a forest green border. However,
when you move the cursor from one item to the next within the listbox or you
click on an item in the listbox to select it, the background turns to the
standard windows dark blue with white letters. Well, I want the background
to turn 'forest green' and the characters to turn 'wheat' when the item is
selected. I already have one app in blue and this one needs to be slightly
different in design, so I"ve chosen to use shades of green.

How do I do this without having to completely re-create the whole listbox
control? I really don't think I should have to do that just to control the
color of the selected item. The same goes for the listbox scrollbars, by the
way.

If there are attributes for setting these colors or 'styles' that I'm
unaware of, any code samples would be greatly appreciated.

If there's a free replacement listbox control somewhere that I can download
that just allows the style of the selected item(s) in a listbox to be
modified, I'd appreciate knowing about that. Or, if there is a free or
lowcost one available that also has the capability to define the scrollbar
colors as well as the selected item color within the control, that would be
very cool! But only if it's free or very low cost under $30).

Please let me know. I seem to be finding this question in a lot of forums
without good answers! I'm surprised Microsoft hasn't fixed this yet.

Thanks!
Karen Grube

 
Reply With Quote
 
 
 
 
Steve Walker
Guest
Posts: n/a
 
      07-13-2005
In message <(E-Mail Removed)>, Karen
Grube <(E-Mail Removed)> writes
>Hi!
>
>I'm reposting this because I never received a good answer. Please remember,
>I'm asking about how to change the color in a server-side ASP.Net box, not a
>client side or Windows control.
>
>I'm using a standard server side ASP.Net listbox control on a web form. The
>page is basically various shades of green. The listbox itself has a pale
>green background and forest green text and a forest green border. However,
>when you move the cursor from one item to the next within the listbox or you
>click on an item in the listbox to select it, the background turns to the
>standard windows dark blue with white letters. Well, I want the background
>to turn 'forest green' and the characters to turn 'wheat' when the item is
>selected. I already have one app in blue and this one needs to be slightly
>different in design, so I"ve chosen to use shades of green.


As far as I know, you simply can't. The selected colour does not appear
to be controllable from HTML, and the ASP.Net ListBox must ultimately be
rendered in HTML. I've just changed the colour scheme for my PC from
blue to silver and now my selected listbox items are grey instead of
blue in both Firefox and IE6.

>Please let me know. I seem to be finding this question in a lot of forums
>without good answers! I'm surprised Microsoft hasn't fixed this yet.


To be fair to them, it doesn't seem to be part of the W3C standards for
HTML or CSS.

You can't achieve this with a listbox rendered as a <Select> tag, but
you could fairly easily achieve it through an HTML table and a bit of
javascript. I'd suggest that route.

--
Steve Walker
 
Reply With Quote
 
 
 
 
Karen Grube
Guest
Posts: n/a
 
      07-13-2005
Yes, Steve, you're right. The colors are controlled by the theme or system
colors you select unless they are assigned within the control itself. But
you CAN change them within a listbox. I just don't know how. You can
specify the color when it's rendered, but I don't know what that code looks
like or where you have to put it. My guess is that you have to create a
custom control based on the listbox and modify something. I just don't know
what.

I'm not sure what you mean by changing the html or how that will affect the
rendering of a listbox. If you could explain or show me what you're talking
about that might be helpful.

Again, if anyone knows of a free or low cost alternative listbox control,
I'd appreciate hearing about that as well.

Thanks!
Karen


>
> To be fair to them, it doesn't seem to be part of the W3C standards for
> HTML or CSS.
>
> You can't achieve this with a listbox rendered as a <Select> tag, but
> you could fairly easily achieve it through an HTML table and a bit of
> javascript. I'd suggest that route.
>
> --
> Steve Walker
>

 
Reply With Quote
 
Steve Walker
Guest
Posts: n/a
 
      07-13-2005
In message <(E-Mail Removed)>, Karen
Grube <(E-Mail Removed)> writes
>Yes, Steve, you're right. The colors are controlled by the theme or system
>colors you select unless they are assigned within the control itself. But
>you CAN change them within a listbox.


If you can give me the url of an example of someone doing this, I can
probably figure out for you how they are doing it; if it's possible, I'd
like to know how it's done just for the sake of curiosity.

> I just don't know how. You can
>specify the color when it's rendered, but I don't know what that code looks
>like or where you have to put it. My guess is that you have to create a
>custom control based on the listbox and modify something. I just don't know
>what.


My best guess would be that if it can be done it would be through CSS,
but I've looked through the complete list of CSS attributes for the
<select> tag, and none of them appear to me to fit the bill.

>I'm not sure what you mean by changing the html or how that will affect the
>rendering of a listbox. If you could explain or show me what you're talking
>about that might be helpful.


A listbox server control will render itself as a <select> tag in HTML.
So this C# code:

public class WebForm1 : System.Web.UI.Page
{
protected System.Web.UI.WebControls.ListBox ListBox1;

private void Page_Load(object sender, System.EventArgs e)
{
for(int i=0;i<10;i++)
{
this.ListBox1.Items.Add("Item Number #" + i.ToString());
}
}
}

results in this HTML output:


<select name="ListBox1" size="4" id="ListBox1"
style="height:164px;width:335px;Z-INDEX: 101; LEFT: 86px; POSITION:
absolute; TOP: 26px">
<option value="Item Number #0">Item Number #0</option>
<option value="Item Number #1">Item Number #1</option>
<option value="Item Number #2">Item Number #2</option>
<option value="Item Number #3">Item Number #3</option>
<option value="Item Number #4">Item Number #4</option>
<option value="Item Number #5">Item Number #5</option>
<option value="Item Number #6">Item Number #6</option>
<option value="Item Number #7">Item Number #7</option>
<option value="Item Number #8">Item Number #8</option>
<option value="Item Number #9">Item Number #9</option>
</select>

My approach to this kind of problem is to take the HTML output, tweak it
to look how I want it, and then modify the ASP.Net code so that it
generates the desired output.

If, as I understand, what you want to achieve is not supported by the
<select> tag, all is not lost. You can write your own control which
renders as some form of HTML which *does* support the behaviour you
want. So what you want is a scrolling window containing items which can
be selected by clicking them. You can get a scrolling window by using
something like:

<div style="OVERFLOW: auto; WIDTH: 100px; HEIGHT: 50px"></div>

You can mimic the appearance of a <select> list by putting a table
within that:

<div style="OVERFLOW: auto; WIDTH: 100px; HEIGHT: 50px">
<table>
<tr><td>Item Number #0</td></tr>
<tr><td>Item Number #1</td></tr>
<tr><td>Item Number #2</td></tr>
</table>
</div>

You can then add some javascript which colours the <td> with your
selected colour (and resets the colour of any previously selected
<td>)when it is clicked and which places the value of the <td> in a
hidden field.

<script language=javascript>

var lastSelected;
function SetSelected(source, value)
{
source.bgColor = 'green';
if(lastSelected != null)
{
lastSelected.bgColor='white';
}
selectedValue=value;
lastSelected=source;
}

</script>

<div style="OVERFLOW: auto; WIDTH: 100px; HEIGHT: 50px">
<input type=hidden id=selectedValue>
<table>
<tr><td onclick='SetSelected(this, 0)'>Item Number #0</td></tr>
<tr><td onclick='SetSelected(this, 1)'>Item Number #1</td></tr>
<tr><td onclick='SetSelected(this, 2)'>Item Number #2</td></tr>
</table>
</div>

So, you need then to write a webcontrol which generates this output, and
which exposes the value of the hidden field as the selected value. You
then have a webcontrol which looks like an ordinary listbox, but which
behaves as you wish it to. This really isn't difficult to do, once you
have got your head around writing webcontrols. Not difficult, maybe a
bit fiddly getting it to work exactly as you want it to, and you then
have a reusable control which provides the behaviour you want.

Let me know if you want to go this route, and I can give a few pointers
to approaching writing a control to do this.

--
Steve Walker
 
Reply With Quote
 
clintonG
Guest
Posts: n/a
 
      07-14-2005
There's a project (and maybe more) at Codeproject that documents how to
change the color of items selected in listbox controls. I've seen it myself
noting this is best done on the client using the JavaScript getElementById
method and CSS.

<%= Clinton Gallagher
METROmilwaukee (sm) "A Regional Information Service"
NET csgallagher AT metromilwaukee.com
URL http://metromilwaukee.com/
URL http://clintongallagher.metromilwaukee.com/

[1] http://codeproject.com/




"Steve Walker" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
> In message <(E-Mail Removed)>, Karen
> Grube <(E-Mail Removed)> writes
>>Yes, Steve, you're right. The colors are controlled by the theme or
>>system
>>colors you select unless they are assigned within the control itself. But
>>you CAN change them within a listbox.

>
> If you can give me the url of an example of someone doing this, I can
> probably figure out for you how they are doing it; if it's possible, I'd
> like to know how it's done just for the sake of curiosity.
>
>> I just don't know how. You can
>>specify the color when it's rendered, but I don't know what that code
>>looks
>>like or where you have to put it. My guess is that you have to create a
>>custom control based on the listbox and modify something. I just don't
>>know
>>what.

>
> My best guess would be that if it can be done it would be through CSS,
> but I've looked through the complete list of CSS attributes for the
> <select> tag, and none of them appear to me to fit the bill.
>
>>I'm not sure what you mean by changing the html or how that will affect
>>the
>>rendering of a listbox. If you could explain or show me what you're
>>talking
>>about that might be helpful.

>
> A listbox server control will render itself as a <select> tag in HTML.
> So this C# code:
>
> public class WebForm1 : System.Web.UI.Page
> {
> protected System.Web.UI.WebControls.ListBox ListBox1;
>
> private void Page_Load(object sender, System.EventArgs e)
> {
> for(int i=0;i<10;i++)
> {
> this.ListBox1.Items.Add("Item Number #" + i.ToString());
> }
> }
> }
>
> results in this HTML output:
>
>
> <select name="ListBox1" size="4" id="ListBox1"
> style="height:164px;width:335px;Z-INDEX: 101; LEFT: 86px; POSITION:
> absolute; TOP: 26px">
> <option value="Item Number #0">Item Number #0</option>
> <option value="Item Number #1">Item Number #1</option>
> <option value="Item Number #2">Item Number #2</option>
> <option value="Item Number #3">Item Number #3</option>
> <option value="Item Number #4">Item Number #4</option>
> <option value="Item Number #5">Item Number #5</option>
> <option value="Item Number #6">Item Number #6</option>
> <option value="Item Number #7">Item Number #7</option>
> <option value="Item Number #8">Item Number #8</option>
> <option value="Item Number #9">Item Number #9</option>
> </select>
>
> My approach to this kind of problem is to take the HTML output, tweak it
> to look how I want it, and then modify the ASP.Net code so that it
> generates the desired output.
>
> If, as I understand, what you want to achieve is not supported by the
> <select> tag, all is not lost. You can write your own control which
> renders as some form of HTML which *does* support the behaviour you
> want. So what you want is a scrolling window containing items which can
> be selected by clicking them. You can get a scrolling window by using
> something like:
>
> <div style="OVERFLOW: auto; WIDTH: 100px; HEIGHT: 50px"></div>
>
> You can mimic the appearance of a <select> list by putting a table
> within that:
>
> <div style="OVERFLOW: auto; WIDTH: 100px; HEIGHT: 50px">
> <table>
> <tr><td>Item Number #0</td></tr>
> <tr><td>Item Number #1</td></tr>
> <tr><td>Item Number #2</td></tr>
> </table>
> </div>
>
> You can then add some javascript which colours the <td> with your
> selected colour (and resets the colour of any previously selected
> <td>)when it is clicked and which places the value of the <td> in a
> hidden field.
>
> <script language=javascript>
>
> var lastSelected;
> function SetSelected(source, value)
> {
> source.bgColor = 'green';
> if(lastSelected != null)
> {
> lastSelected.bgColor='white';
> }
> selectedValue=value;
> lastSelected=source;
> }
>
> </script>
>
> <div style="OVERFLOW: auto; WIDTH: 100px; HEIGHT: 50px">
> <input type=hidden id=selectedValue>
> <table>
> <tr><td onclick='SetSelected(this, 0)'>Item Number #0</td></tr>
> <tr><td onclick='SetSelected(this, 1)'>Item Number #1</td></tr>
> <tr><td onclick='SetSelected(this, 2)'>Item Number #2</td></tr>
> </table>
> </div>
>
> So, you need then to write a webcontrol which generates this output, and
> which exposes the value of the hidden field as the selected value. You
> then have a webcontrol which looks like an ordinary listbox, but which
> behaves as you wish it to. This really isn't difficult to do, once you
> have got your head around writing webcontrols. Not difficult, maybe a
> bit fiddly getting it to work exactly as you want it to, and you then
> have a reusable control which provides the behaviour you want.
>
> Let me know if you want to go this route, and I can give a few pointers
> to approaching writing a control to do this.
>
> --
> Steve Walker



 
Reply With Quote
 
Michael Baltic
Guest
Posts: n/a
 
      07-14-2005
You will need a custom drop down control. Infragistics ultrawebcombo control
has properties for all of these things that you want to control.

Building your own would require serious time for development and debugging.
--
Direct Email: Michael.Baltic@RemoveCharactersUpTo#NCMC.Com

Staff Consultant II
Enterprise Web Services
Cardinal Solutions Group


"clintonG" wrote:

> There's a project (and maybe more) at Codeproject that documents how to
> change the color of items selected in listbox controls. I've seen it myself
> noting this is best done on the client using the JavaScript getElementById
> method and CSS.
>
> <%= Clinton Gallagher
> METROmilwaukee (sm) "A Regional Information Service"
> NET csgallagher AT metromilwaukee.com
> URL http://metromilwaukee.com/
> URL http://clintongallagher.metromilwaukee.com/
>
> [1] http://codeproject.com/
>
>
>
>
> "Steve Walker" <(E-Mail Removed)> wrote in message
> news:(E-Mail Removed)...
> > In message <(E-Mail Removed)>, Karen
> > Grube <(E-Mail Removed)> writes
> >>Yes, Steve, you're right. The colors are controlled by the theme or
> >>system
> >>colors you select unless they are assigned within the control itself. But
> >>you CAN change them within a listbox.

> >
> > If you can give me the url of an example of someone doing this, I can
> > probably figure out for you how they are doing it; if it's possible, I'd
> > like to know how it's done just for the sake of curiosity.
> >
> >> I just don't know how. You can
> >>specify the color when it's rendered, but I don't know what that code
> >>looks
> >>like or where you have to put it. My guess is that you have to create a
> >>custom control based on the listbox and modify something. I just don't
> >>know
> >>what.

> >
> > My best guess would be that if it can be done it would be through CSS,
> > but I've looked through the complete list of CSS attributes for the
> > <select> tag, and none of them appear to me to fit the bill.
> >
> >>I'm not sure what you mean by changing the html or how that will affect
> >>the
> >>rendering of a listbox. If you could explain or show me what you're
> >>talking
> >>about that might be helpful.

> >
> > A listbox server control will render itself as a <select> tag in HTML.
> > So this C# code:
> >
> > public class WebForm1 : System.Web.UI.Page
> > {
> > protected System.Web.UI.WebControls.ListBox ListBox1;
> >
> > private void Page_Load(object sender, System.EventArgs e)
> > {
> > for(int i=0;i<10;i++)
> > {
> > this.ListBox1.Items.Add("Item Number #" + i.ToString());
> > }
> > }
> > }
> >
> > results in this HTML output:
> >
> >
> > <select name="ListBox1" size="4" id="ListBox1"
> > style="height:164px;width:335px;Z-INDEX: 101; LEFT: 86px; POSITION:
> > absolute; TOP: 26px">
> > <option value="Item Number #0">Item Number #0</option>
> > <option value="Item Number #1">Item Number #1</option>
> > <option value="Item Number #2">Item Number #2</option>
> > <option value="Item Number #3">Item Number #3</option>
> > <option value="Item Number #4">Item Number #4</option>
> > <option value="Item Number #5">Item Number #5</option>
> > <option value="Item Number #6">Item Number #6</option>
> > <option value="Item Number #7">Item Number #7</option>
> > <option value="Item Number #8">Item Number #8</option>
> > <option value="Item Number #9">Item Number #9</option>
> > </select>
> >
> > My approach to this kind of problem is to take the HTML output, tweak it
> > to look how I want it, and then modify the ASP.Net code so that it
> > generates the desired output.
> >
> > If, as I understand, what you want to achieve is not supported by the
> > <select> tag, all is not lost. You can write your own control which
> > renders as some form of HTML which *does* support the behaviour you
> > want. So what you want is a scrolling window containing items which can
> > be selected by clicking them. You can get a scrolling window by using
> > something like:
> >
> > <div style="OVERFLOW: auto; WIDTH: 100px; HEIGHT: 50px"></div>
> >
> > You can mimic the appearance of a <select> list by putting a table
> > within that:
> >
> > <div style="OVERFLOW: auto; WIDTH: 100px; HEIGHT: 50px">
> > <table>
> > <tr><td>Item Number #0</td></tr>
> > <tr><td>Item Number #1</td></tr>
> > <tr><td>Item Number #2</td></tr>
> > </table>
> > </div>
> >
> > You can then add some javascript which colours the <td> with your
> > selected colour (and resets the colour of any previously selected
> > <td>)when it is clicked and which places the value of the <td> in a
> > hidden field.
> >
> > <script language=javascript>
> >
> > var lastSelected;
> > function SetSelected(source, value)
> > {
> > source.bgColor = 'green';
> > if(lastSelected != null)
> > {
> > lastSelected.bgColor='white';
> > }
> > selectedValue=value;
> > lastSelected=source;
> > }
> >
> > </script>
> >
> > <div style="OVERFLOW: auto; WIDTH: 100px; HEIGHT: 50px">
> > <input type=hidden id=selectedValue>
> > <table>
> > <tr><td onclick='SetSelected(this, 0)'>Item Number #0</td></tr>
> > <tr><td onclick='SetSelected(this, 1)'>Item Number #1</td></tr>
> > <tr><td onclick='SetSelected(this, 2)'>Item Number #2</td></tr>
> > </table>
> > </div>
> >
> > So, you need then to write a webcontrol which generates this output, and
> > which exposes the value of the hidden field as the selected value. You
> > then have a webcontrol which looks like an ordinary listbox, but which
> > behaves as you wish it to. This really isn't difficult to do, once you
> > have got your head around writing webcontrols. Not difficult, maybe a
> > bit fiddly getting it to work exactly as you want it to, and you then
> > have a reusable control which provides the behaviour you want.
> >
> > Let me know if you want to go this route, and I can give a few pointers
> > to approaching writing a control to do this.
> >
> > --
> > Steve Walker

>
>
>

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Re: How include a large array? Edward A. Falk C Programming 1 04-04-2013 08:07 PM
DropDownList 2 always returns Selected = 0 for all items - even selected item Iain ASP .Net 3 12-11-2006 11:07 AM
How to change the color of the selected item in a web listbox cont =?Utf-8?B?S2FyZW4gR3J1YmU=?= ASP .Net 1 06-26-2005 09:54 AM
Change style of a single row of the item list of datagrid, based on a field value of current item... QUASAR ASP .Net Datagrid Control 6 01-17-2004 07:46 PM
dropdown list does not change selected item? SSP ASP .Net Web Controls 2 10-29-2003 08:31 PM



Advertisments