Custom List Box with Cool Effects

• Download source - 1.82 KB
• Download demo- 11.26 KB

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.