Click here to Skip to main content
Click here to Skip to main content

Custom List Box with Cool Effects

, 15 Apr 2009
Rate this:
Please Sign up or sign in to vote.
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.
clistbox.jpg

Introduction

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

Problem

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:

Solution

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;
try
{
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");
MyListControl1.Items.Add(cli);

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.

License

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
http://mansoorsarfraz.blogspot.com
Follow on   Twitter

Comments and Discussions

 
QuestionMultiple selection Pinmemberlatchman singh22-Nov-11 4:32 
GeneralMy vote of 5 PinmemberMember 28154523-Oct-11 8:05 
QuestionSelected Item PinmemberMember 28154522-Oct-11 4:02 
QuestionDataBinding? PinmemberLooNy200614-Dec-09 20:45 
AnswerRe: DataBinding? [modified] PinmemberMansoor Sarfraz21-Dec-09 17:54 
Questioni want to use a simple list box Pinmemberboogus delecti25-Aug-09 18:51 
AnswerRe: i want to use a simple list box [modified] PinmemberMansoor Sarfraz26-Aug-09 17:00 
GeneralOnClick events PinmemberStuart Greig10-Aug-09 0:05 
GeneralRe: OnClick events [modified] PinmemberMansoor Sarfraz10-Aug-09 17:49 
QuestionCould you provide Instructions for putting this in place, Please? Pinmemberkaren bench7-Apr-09 6:03 
AnswerRe: Could you provide Instructions for putting this in place, Please? [modified] PinmemberMansoor Sarfraz15-Apr-09 6:14 

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

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

| Advertise | Privacy | Mobile
Web03 | 2.8.140721.1 | Last Updated 15 Apr 2009
Article Copyright 2006 by Mansoor Sarfraz
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid