By: John Kilgo Date: January 11, 2003 Download the code. Printer Friendly Version
I like the idea of highlighting rows in a DataGrid as the user scrolls the mouse up and down over the grid. The effect can be achieved using several lines of client-side JavaScript, but why do that when two lines of .Net code will accomplish the same thing? The trick is to implement an ItemDataBound event handler and add OnMouseOver and OnMouseOut attributes to handle the color change.
The code for this project is in two parts. An aspx page is used to define the datagrid and its attributes, while a .vb code-behind page is used to implement the database activity and handle the ItemDataBound method. First the .aspx page.
Notice the line OnItemDataBound="dtgCustomers_ItemDataBound". OnItemDataBound is a DataGrid method that raises the ItemDataBound event. "dtgCustomers_ItemDataBound" is the event handler which is contained in the code-behind file. One note: I chose to display rows from the NorthWind Customers table. Since this table contains over 90 rows, I also implemented paging for the datagrid. If you have used datagrids at all the rest of the attributes should be self explantory. I won't spend any more time on the .aspx page.
<%@ Page Language="vb" Src="HighlightDataGrid.aspx.vb" Inherits="HighlightDataGrid" %> <html> <head> <title>Mouseover Highlighting of DataGrid Rows</title> </head> <body> <form runat="server" ID="Form1"> <asp:DataGrid id="dtgCustomers" runat="server" OnItemDataBound="dtgCustomers_ItemDataBound" CellPadding="4" BackColor="White" BorderWidth="1px" BorderStyle="None" BorderColor="Indigo" AllowPaging="True" PageSize="10" OnPageIndexChanged="dtgCustomers_PageIndexChanged" PagerStyle-Mode="NumericPages" EnableViewState="False" AutoGenerateColumns="True"> <SelectedItemStyle font-bold="True" forecolor="#663399" backcolor="#FFCC66"> </SelectedItemStyle> <ItemStyle forecolor="Navy" backcolor="White"> </ItemStyle> <AlternatingItemStyle ForeColor="Navy" BackColor="Yellow"> </AlternatingItemStyle> <HeaderStyle font-bold="True" forecolor="Navy" backcolor="LightYellow"> </HeaderStyle> <PagerStyle horizontalalign="Center" forecolor="Navy" backcolor="LightYellow"> </PagerStyle> </asp:DataGrid> </form> </body> </html> |
Imports System Imports System.Web.UI Imports System.Web.UI.WebControls Imports System.Data.SqlClient Imports System.Data Public Class HighlightDataGrid : Inherits Page Protected dtgCustomers As DataGrid Sub Page_Load(Sender As Object, E As System.EventArgs) BindTheGrid() End Sub Sub BindTheGrid() Dim sqlConn As New SqlConnection( _ "server=localhost;database=NorthWind;uid=sa;pwd=secret") Dim dtaCustomers As New SqlDataAdapter( _ "Select CustomerID, CompanyName, ContactName, Phone " _ & "From Customers", sqlConn) Dim dsCustomers As DataSet Try dsCustomers = New DataSet() dtaCustomers.Fill(dsCustomers) dtgCustomers.DataSource = dsCustomers dtgCustomers.DataBind() Catch SQLEx As SqlException Response.Write(SQLEx.Message.ToString()) Catch Ex As Exception Response.Write(Ex.Message.ToString()) Finally sqlConn.Close() End Try End Sub |
Sub dtgCustomers_ItemDataBound(sender As Object, e As DataGridItemEventArgs) If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then e.Item.Attributes.Add("onmouseover", "this.style.backgroundColor='Silver'") End If If e.Item.ItemType = ListItemType.Item Then e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='White'") Else e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='Yellow'") End If End Sub Sub dtgCustomers_PageIndexChanged(sender As Object, e As DataGridPageChangedEventArgs) dtgCustomers.CurrentPageIndex = e.NewPageIndex BindTheGrid() End Sub End Class |
You may download the code by clicking Here.