Mouseover Highlighting and the Repeater Control...

The Repeater Control is a lightweight control that really comes in handy. In this article we examine one use of the Repeater and show how to implement row highlighting and selection.

By: John Kilgo

Date: March 29, 2003

Download the code.

The Repeater control does not have any of the features of the DataGrid, or even the DataList, but it does have its uses for quick and easy presentations of data, especially where you have a need to carefully control the formatting of the output.

Recently I was asked to create a search facility whereby a database table containing thousands of rows could be searched by certain key fields such as ID number, name, and Date of Birth. ID number would bring back the one row needed, but was not always known. Names contained three to five names (mostly foreign) and were all in one column. Users usually were not even sure which were last names as opposed to first or middle. There were also many duplicate last names. Dates of Birth, of course, could also be duplicated within the table. The idea was to bring back a small resultset of close matches and allow the user to use the displayed information to choose the correct row. That row needed to be a link to a page displaying the dozens of columns that made up the table row.

I wanted the visual presentation to be as helpful as possible for the users. I decided I wanted a mouseover (changing background color) effect on the rows, and I wanted the cursor to change to a hand as it passed over the hyperlinked rows.

What I will present in this article is a very much scaled down version of what I came up with. We will use the Customers table of the Northwind database. We will present a simple search facility allowing a search on Company Name (using a LIKE in the WHERE clause). If you type in a "a" or "f" or some other letter you will get back a small resultset to see how the mouseover works. You can click on a row and that will take you to a page with all columns of information displayed. I used an HREF with a querystring value to go to a separate page. You could, however, use a link button and show the full information on the same page if you wanted to. I had too much information to display in real life to do that effectively.

Actually, as you will shortly see, the mouseover effect and the cursor change to hand have nothing at all to do with .Net and everything to do with HTML. But still, it is a technique that you may very well want to incorporate in your ASP.Net programs.

First the .aspx page for the search and the display of the resulting resultset. The special things we are doing all appear within the <ItemTemplate></ItemTemplate> tags in the lower third of the program. The first thing is the setting of the <a href= which wraps the entire table row. To the href we have appended as a querystring the CustomerID, which is a primary key and what we will use to do our lookup on the second page used to display the full set of data. The line of code which handles the cursor change and the mouseover effect is as follows:

After that we simply present the three data elements returned from our SQL SELECT statement which appears in the code-behind file shown further below. In the <FooterTemplate> we simply close out our html table and we are through.

<%@ Page Language="vb" Src="HighlightRepeater.aspx.vb" Inherits="HighlightRepeater"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>HighlightRepeater</title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
</head>
<body MS_POSITIONING="GridLayout">
<table width="50%">
  <tr>
    <td bgcolor="black" align="center"><font color="white"><b>Customer Search</b></font></td>
  </tr>
</table>
<form id="Form1" method="post" runat="server">
<asp:Label ID="lblInstruct" Text="Enter all or part of a Company Name: " Runat="server" />
<asp:TextBox ID="txtSearch" Runat="server" />
<asp:Button ID="btnSearch" Text="Search" OnClick="btnSearch_Click" Runat="server" />
<p></p>
<asp:Repeater ID="rptSearch" Runat="server">
  <HeaderTemplate>
    <table width="50%" cellspacing="0" cellpadding="0">
      <tr>
        <td bgcolor="black" align="left"><font color="white"><b>Customer ID</b></font></td>
        <td bgcolor="black" align="left"><font color="white"><b>Company Name</b></font></td>
        <td bgcolor="black" align="left"><font color="white"><b>Contact Name</b></font></td>
      </tr>
  </HeaderTemplate>
  <ItemTemplate>
      <a href="ShowCust.aspx?id=<%# Container.DataItem("CustomerID") %>">
      <tr style="cursor:hand" onmouseover="style.backgroundColor='LightBlue'" onmouseout="style.backgroundColor=''">
        <td align="left"><%# Container.DataItem("CustomerID") %></td>
        <td align="left"><%# Container.DataItem("CompanyName") %></td>
        <td align="left"><%# Container.DataItem("ContactName") %></td>
      </tr>
      </a>
  </ItemTemplate>
  <FooterTemplate>
    </table>
  </FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>

The code-behind file simply creates a DataReader which is used as the DataSource for the Repeater control. Notice the SQL statement uses a LIKE in the WHERE clause. When you run the example program, just enter one letter of the alphabet in the search textbox to ensure that you get a decent resultset returned.

Imports System.Web.UI.WebControls
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration

Public Class HighlightRepeater : Inherits System.Web.UI.Page

  Protected txtSearch As TextBox
  Protected rptSearch As Repeater

  Public Sub btnSearch_Click(sender As System.Object, e As System.EventArgs)
    Dim objConn As SqlConnection
    Dim objCmd As SqlCommand
    Dim strSql As String
    Dim dataReader As SqlDataReader

    objConn = New SqlConnection(ConfigurationSettings.AppSettings("ConnectionString"))

    strSql = "SELECT CustomerID, CompanyName, ContactName " _
           & "FROM Customers " _
           & "WHERE Upper(CompanyName) LIKE '" & txtSearch.Text.Trim().ToUpper() & "%'"

    objCmd = New SqlCommand(strSql, objConn)
    Try
      objConn.Open()
      dataReader = objCmd.ExecuteReader()
      rptSearch.DataSource = dataReader
      rptSearch.DataBind()
    Catch
    Finally
      objConn.Close()
      objConn.Dispose()
    End Try
  End Sub

End Class

If you haven't been using the Repeater control I hope this article has given you some ideas on how you might make use of it in the future. The mouseover trick, while not a .Net feature, still is quite useful in your .Net program. I did not include the program that displays all the columns once you click on a link in the discussion above, but it is included in the Zip'd download file. I would like to thank Elizabeth Castleberry for her help with the code for this program.

You may download the program here.