Click here to Skip to main content
11,644,286 members (65,807 online)
Click here to Skip to main content

Custom List Box with Cool Effects

, 15 Apr 2009 CPOL 72.5K 1.8K 27
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)

Share

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

You may also be interested in...

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    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 | Terms of Use | Mobile
Web01 | 2.8.150731.1 | Last Updated 15 Apr 2009
Article Copyright 2006 by Mansoor Sarfraz
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid