Geeks With Blogs

News
Welcome to my blog.
Here's what we've got on the menu today:

Lorin Thwaits A geek says what?

Yesterday the question was posted to the Arizona Groups list:

How do you have the selected values in an ASP.Net Listbox control scroll into view?

Simple answer: By default in IE whatever is selected does get scrolled to the top.  In ASP.NET, the ListBox is rendered as a <SELECT> element with a SIZE attribute.  For whatever item is selected, as appropriate the selected attribute gets applied.  Here's an example to set the stage, both the HTML generated by ASP.NET and the actual control:

<select name="listBox1" size="3" id="listBox1">
 <option value="Red">Red</option>
 <option value="Green">Green</option>
 <option value="Blue">Blue</option>
 <option selected="selected" value="Yellow">Yellow</option>
 <option value="Cyan">Cyan</option>
 <option value="Magenta">Magenta</option>
</select>

So we see that by just setting the SelectedIndex property in ASP.NET then when it's presented in IE that member is scrolled into view and placed all the way at the top.  Haven't tested it with other browsers, but I would bet in Mozilla and Safari it's similar behavior.

So now here's a button that uses Javascript to select and scroll the above ListBox to the “Green“ entry in the list:

In the onclick attribute it simply says "listBox1.selectedIndex=1;". Very easy.

Incidentally, with IE6 there is a scrollTop property which looks like it should set the amount a <SELECT> gets scrolled.  But I don't know why it was even included because when referenced it always returns 0, and doesn't do anything when it's set.  So perhaps in future versions of IE we'll be able to precisely set where things are scrolled using scrollTop in conjunction with selectedIndex, scrollHeight, and length.

Posted on Friday, December 16, 2005 1:03 AM ASP.NET | Back to top


Comments on this post: Scrolling an ASP.NET ListBox to right where you want it to be

# re: Scrolling an ASP.NET ListBox to right where you want it to be
Requesting Gravatar...
I am trying to do the same thing you describe here, but it doesn't work for me. I am using asp.net 2.0 and have a listbox that the user wants to be able to search by typing text into a text box. For example, if we have the following items in a listbox:

1
2
3
4
5
6
7
8
9
10

and we only display 3 items, if the user types 9, they want to see 9 show up in the listbox without having to scroll to see it. I am using internet explorer 6 or higher and it doesn't work.

Any ideas would be appreciated.

Thanks,
Don
Left by Don on Dec 06, 2006 7:05 AM

# re: Scrolling an ASP.NET ListBox to right where you want it to be
Requesting Gravatar...
Even though IE6 scrollTop doesn't work on select elements, you can still use a different scrollTop feature of IE6 to scroll to a specific position in a list box. You have to set the select element's SIZE equal to its OPTIONS.LENGTH first though, so that you lose the automatic scrollbars. Then you have to wrap the whole thing inside a DIV, set the DIV's height, and set its OVERFLOW to AUTO. Now you have DIV scrollbars, which do not always return zero and can be set in JavaScript.

Check out the following URL for more info:
http://www.codeproject.com/useritems/ListBoxComponent01.asp
Left by danludwig on Jun 18, 2007 1:43 PM

# re: Scrolling an ASP.NET ListBox to right where you want it to be
Requesting Gravatar...
Only one comment:
This works fine if the list box is used to select only item of the list. If the mutliple attribute is set to mutliple( multiple = "multiple") then the code dosn't work as expected and that defeats the purpose of having a list box. If I wanted a list box that allow me select a single item , I would use the dropdown box. I am looking for code that visibly displays the first selecteditem from multiselect options.
Left by BC on Aug 28, 2007 5:01 AM

# re: Scrolling an ASP.NET ListBox to right where you want it to be
Requesting Gravatar...
God bless you! I'm desparately trying to get our clients over to IE 7 (or, you know, not IE at all) but they still for the most part use IE 6... And my god, I needed to set scrollTop on a select element or the whole page wasn't going to work. You saved my day. I owe you a beer.
Left by Stephen Weiss on Sep 19, 2007 2:07 PM

# re: Scrolling an ASP.NET ListBox to right where you want it to be
Requesting Gravatar...
It's hard to get excited about low-quality answers to questions, but this has got to be one of the worst I have ever seen.
Question: How do I mmake this happen?
Answer: You dont do anything, it does it by itself.
If it really did it by itself, why would I ask the question? I should give this guy some credit, at least he read the question, which is more then some do when posting.
Left by Shocked on Sep 20, 2007 4:03 AM

# re: Scrolling an ASP.NET ListBox to right where you want it to be
Requesting Gravatar...
nice idea, but it's given me so much grief with Opera I've given it.
Left by zorb on Aug 12, 2008 1:03 AM

# re: Scrolling an ASP.NET ListBox to right where you want it to be
Requesting Gravatar...
the listbox control that I used in my application works perfectly with IE6 and lower versions and on FireFox too. But it does not work on IE7. I am not able to scroll through the list box nor select from it. Any ideas?
Left by vid on Sep 17, 2008 2:51 AM

# re: Scrolling an ASP.NET ListBox to right where you want it to be
Requesting Gravatar...
Hi all,

In IE6, before ADD/Modify/Delete operations for any option element, U need to remove the multiple attribute and do the operation and then set multiple attribute. This will maintain select's scroll position

Prosanta Kundu
Left by Prosanta Kundu on Aug 05, 2009 7:01 AM

# re: Scrolling an ASP.NET ListBox to right where you want it to be
Requesting Gravatar...
2 projects in 1 solution had the same assembly name
Left by DDos Protection on Nov 06, 2009 8:50 PM

# re: Scrolling an ASP.NET ListBox to right where you want it to be
Requesting Gravatar...
thanks,dear! It is very useful, I have done it well.
Left by aaa replica bag on Jun 03, 2010 9:19 AM

Your comment:
 (will show your gravatar)


Copyright © Lorin Thwaits | Powered by: GeeksWithBlogs.net