Click here to Skip to main content
15,039,149 members
Articles / Web Development / XHTML
Posted 2 May 2006


27 bookmarked

Custom List Box with Cool Effects

Rate me:
Please Sign up or sign in to vote.
2.33/5 (12 votes)
15 Apr 2009CPOL1 min read
This article provides solutions to the problem of horizontal scrolling in web list box. Also the custom list box provides cool effects and user friendliness as compared to regular list box.


This article describes how to:

  1. add horizontal scrolling in list box
  2. add images with each list item
  3. use list box as list view


As discussed above, there are problems in list box:

  1. It doesn't provide horizontal scrolling
  2. It cannot add images with list item
  3. Multi column view is not possible

One way of adding horizontal scroll in list box is to put it in a div with fixed height and width. In this way, the horizontal scrolling appears and the problem seems solved. But another issue comes up, i.e. two vertical scroll bars appear as shown below:


To solve the issue, you can use the custom list box. It provides horizontal scrolling without any extra vertical scroll bar. The custom list box is basically a rendered table based on items but it behaves like a list box. In this list box, you can add your own cool effects as required, e.g. change the background color when mouse hovers and add image with each list item.

The following code renders the list of items in a custom list box at run time:

public void RenderCustomControl()
String HtmlList = String.Empty;
HtmlList = HtmlList + "<TABLE width=\"100%\" bgColor=\"white\" border=\"0\"
	cellpadding =\"0\" cellspacing=\"0\" > <TBODY class=\"list\">";
for (int i = 0; i < Items.Count; i++)
string imgPath = Items[i].ImagePath;
HtmlList += string.Format("<tr ID=\"tr{0}\"" +
" onmouseover=\"mouseoverelem('tr{0}');\" " +
" onmouseout=\"mouseoutelem('tr{0}');\" " +
" onclick=\"select('tr{0}');\">"
, Items[i].Value);
HtmlList += "<td width='1%'>";
if (imgPath != "")
HtmlList += "<img src=\"" + imgPath + "\">";
HtmlList += "</td>";
HtmlList += string.Format("<td ID=\"td{0}\" " +
"> {1}</td>"
, Items[i].Value, Items[i].Text);
for (int j = 0; j < Items[i].DetailDataItem.Count; j++)
HtmlList += "<td style='border-left-width:1px'> " +
		Items[i].DetailDataItem[j] + "</td>";
HtmlList += "</tr>";
HtmlList = HtmlList + "</tbody></TABLE>";
divListControl.InnerHtml = HtmlList;
catch (Exception ex)
HtmlList = HtmlList + "</tbody></TABLE>";

The list of items can be passed as follows:

MyListControl1.Items.Add(new CListItem("abcdefghijklmnopqrestuvwxyz", "1"));

MyListControl1.Items.Add(new CListItem
	"abcdefghijklmnopqrestuvwxyz", "3", "images/comments.gif"));
MyListControl1.Items.Add(new CListItem
	"<a href='#'>my list 2</a>", "2", "images/comments.gif"));

CListItem cli = new CListItem
		abcdefghijklmnopqrestuvwxyz", "4", "images/comments.gif");

As you can see from the above code, the item can be:

  • a simple text value pair
  • text, value and an optional image
  • text can be any HTML, e.g. hyperlink

You can get the selected value at the server side as follows:

lblInfo.Text = MyListControl1.SelectedValue;

The source code included with the article contains the two approaches of providing horizontal scrolling and the above code. The custom list box is tested on Internet Explorer and Firefox successfully.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Mansoor Sarfraz
Web Developer
Pakistan Pakistan
Mansoor Sarfraz works in a well reputed multinational software development company. Software development is not only his duty but his passion too. In his professional career he was Involved in the development of resource/content management system, workflow based systems, enterprise projects based on MS Windows DNA architecture and .NET framework, web based rich client UI development, Rest based backend web services and windows services for different systems. He was also involved in software designing and architecture. He has expertise in C#.NET, ASP.NET, Sql Server, Adobe Flex, Java, Ajax and JavaScript.

You can reach him through his blog

Comments and Discussions

QuestionMultiple selection Pin
latchman singh22-Nov-11 4:32
Memberlatchman singh22-Nov-11 4:32 
GeneralMy vote of 5 Pin
Member 28154523-Oct-11 8:05
MemberMember 28154523-Oct-11 8:05 
QuestionSelected Item Pin
Member 28154522-Oct-11 4:02
MemberMember 28154522-Oct-11 4:02 
QuestionDataBinding? Pin
LooNy200614-Dec-09 20:45
MemberLooNy200614-Dec-09 20:45 
AnswerRe: DataBinding? [modified] Pin
Mansoor Sarfraz21-Dec-09 17:54
MemberMansoor Sarfraz21-Dec-09 17:54 
Questioni want to use a simple list box Pin
boogus delecti25-Aug-09 18:51
Memberboogus delecti25-Aug-09 18:51 
AnswerRe: i want to use a simple list box [modified] Pin
Mansoor Sarfraz26-Aug-09 17:00
MemberMansoor Sarfraz26-Aug-09 17:00 
GeneralOnClick events Pin
Stuart Greig10-Aug-09 0:05
MemberStuart Greig10-Aug-09 0:05 
GeneralRe: OnClick events [modified] Pin
Mansoor Sarfraz10-Aug-09 17:49
MemberMansoor Sarfraz10-Aug-09 17:49 
QuestionCould you provide Instructions for putting this in place, Please? Pin
karen bench7-Apr-09 6:03
Memberkaren bench7-Apr-09 6:03 
AnswerRe: Could you provide Instructions for putting this in place, Please? [modified] Pin
Mansoor Sarfraz15-Apr-09 6:14
MemberMansoor Sarfraz15-Apr-09 6:14 

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.