Mouse over row highlighting can be added to a DataGrid with the addition of onmouseover and onmouseout references to the table rows.
I like to define the DataGrid’s ItemStyle and AlternatingItemStyle, within the the code behind row handler so is not included in the DataGrid definition below. In the code example, there are a couple of columns showing an application reference, together with the associated description.
<asp:datagrid id="gdvApplications" AllowPaging="False" Visible="False" width="100%" bordercolor="transparent" Borderwidth="0" cellpadding="4" AutoGenerateColumns="False" runat="server" GridLines="None" ShowHeader="False" ShowFooter="False"> <Columns> <asp:TemplateColumn> <ItemTemplate> <asp:Label runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.AppId") %>' id="ApplId"> </asp:Label> </ItemTemplate> </asp:TemplateColumn> <asp:TemplateColumn> <ItemTemplate> <asp:Label runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Description") %>'> </asp:Label> </ItemTemplate> </asp:TemplateColumn> <asp:TemplateColumn> <ItemTemplate> <asp:Label runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Status") %>' id="Status"> </asp:Label> </ItemTemplate> </asp:TemplateColumn> </Columns> </asp:datagrid>
The sub routine, given below, is called each time a row of the DataGrid is prepared. It allows actions to be taken on the row, based upon the entries retrieved from the database.
In the example below mouse over attributes will be added, for mouseover hover effect and an onclick action added, linking to another page with the reference ID passed in the querystring.
Private Sub gdvApplications_RowCreated(ByVal sender As Object, ByVal e As GridViewRowEventArgs) Handles gdvApplications.RowDataBound
Try
' Four styles are defined, for the row and the alternating row
' together with their hovers
Dim gdvRow As String = "gdvRow"
Dim gdvRowO As String = "gdvRowO"
Dim gdvRowA As String = "gdvRowA"
Dim gdvRowAO As String = "gdvRowAO"
'Ensure that the row is an item row not the header or footer
If e.Row.RowType = ListItemType.Item Then
'Add the onclick action to the row
'open in a new window, with a return reference for the current page and filter parameters
e.Row.Attributes.Add("onclick", "javascript:window.location.href='" & EditUrl("ApplId", CType(e.Row.FindControl("ApplId"), Label).Text, "articles_edit") & "?returnurl=" & Server.UrlEncode(Request.Url.ToString) & "'")
'Assign different CSS class according to status of row.
If e.Row.RowState = DataControlRowState.Alternate Then
e.Row.CssClass = gdvRowA
e.Row.Attributes.Add("onmouseover", "this.className='" & gdvRowAO & "'")
e.Row.Attributes.Add("onmouseout", "this.className='" & gdvRowA & "'")
Else
e.Row.CssClass = gdvRow
e.Row.Attributes.Add("onmouseover", "this.className='" & gdvRowO & "'")
e.Row.Attributes.Add("onmouseout", "this.className='" & gdvRow & "'")
End If
End If
Catch exc As Exception 'Module failed to load
ProcessModuleLoadException(Me, exc)
End Try
End Sub
I also handle rows which reflect a particular status in a similar way. Checking to find the status of the row and applying the base CSS style and adding the related mouse over class to the row.
Private Sub gdvApplications_RowCreated(ByVal sender As Object, ByVal e As GridViewRowEventArgs) Handles gdvApplications.RowDataBound
Try
Dim CurrentColour As String
Dim gdvRow As String = "gdvRow"
Dim gdvRowO As String = "gdvRowO"
'Ensure that the row is an item row not the header or footer
If e.Row.RowType = ListItemType.Item Then'Add the onclick action to the row
'open in a new window, with a return reference for the current page and filter parameters
e.Row.Attributes.Add("onclick", "javascript:window.location.href='" & EditUrl("ApplId", CType(e.Row.FindControl("ApplId"), Label).Text, "articles_edit") & "?returnurl=" & Server.UrlEncode(Request.Url.ToString) & "'")
'Assign different CSS class according to status of row.
Select Case CType(e.Row.FindControl("status"), Label).Text.ToLower
Case "a"
gdvRow = "gdvRow_a"
gdvRowO = "gdvRowO_a"
Case "b"
gdvRow = "gdvRow_b"
gdvRowO = "gdvRowO_b"
End Select
If e.Row.RowState = DataControlRowState.Alternate Then
e.Row.CssClass = gdvRow
e.Row.Attributes.Add("onmouseover", "this.className='" & gdvRowO & "'")
e.Row.Attributes.Add("onmouseout", "this.className='" & gdvRow & "'")
Else
e.Row.CssClass = gdvRow
e.Row.Attributes.Add("onmouseover", "this.className='" & gdvRowO & "'")
e.Row.Attributes.Add("onmouseout", "this.className='" & gdvRow & "'")
End If
End If
Catch exc As Exception 'Module failed to load
ProcessModuleLoadException(Me, exc)
End Try
End Sub
Using a change in the defined CSS for the row highlighting allows for changes other than the background colour described above.
