By: John Kilgo
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.
<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.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
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.