Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles
(untagged)

Custom List Box with Cool Effects

0.00/5 (No votes)
15 Apr 2009 1  
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 has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here