I want to update the background color of GridView rows when the mouse hovers over them. It's working fine for columns within <boundfield>, but the background color of labels inside <itemtemplate> does not change on MouseHover.
This is how my Gridview looks:
<asp:GridView ID="gvStudentTraining" runat="server" AutoGenerateColumns="False" Width="100%" ShowFooter="true" CssClass="mydatagrid" HeaderStyle-CssClass="header" PagerStyle-CssClass="pager" RowStyle-CssClass="rows" OnPageIndexChanging="gvStudentTraining_PageIndexChanging" OnRowDataBound="gvStudentTraining_RowDataBound">
<Columns>
<asp:BoundField DataField="TS_TrainingLocation" HeaderText="University" SortExpression="University">
<HeaderStyle HorizontalAlign="Center" Wrap="false" />
<ItemStyle HorizontalAlign="Center" />
</asp:BoundField>
<asp:BoundField DataField="TS_TrainingName" HeaderText="Training Name" SortExpression="Training Name">
<HeaderStyle HorizontalAlign="Center" Wrap="false" />
<ItemStyle HorizontalAlign="Center" Wrap="false" />
</asp:BoundField>
<asp:TemplateField HeaderText="Total">
<ItemTemplate>
<asp:Label CssClass="rownumber" ID="Total" Text='<%#Eval("Total")%>' runat="server" />
</ItemTemplate>
<HeaderStyle Wrap="false" />
<ItemStyle HorizontalAlign="Center" Wrap="False" />
</asp:TemplateField>
</Columns>
</asp:GridView>
Here are some CSS Styles for rows and hover:
<style>
.rows {
background-color: #fff;
font-family: Arial;
font-size: 14px;
color: #000;
min-height: 25px;
text-align: left;
}
.rows:hover td {
background-color: #5badff;
color: #fff;
}
.rownumber:hover {
background-color: #5badff;
color: #fff;
}
.mydatagrid a /** FOR THE PAGING ICONS **/ {
background-color: Transparent;
padding: 5px 5px 5px 5px;
color: #fff;
text-decoration: none;
font-weight: bold;
}
.mydatagrid a:hover /** FOR THE PAGING ICONS HOVER STYLES**/ {
background-color: #000;
color: #fff;
}
.pager span /** FOR THE PAGING ICONS CURRENT PAGE INDICATOR **/ {
background-color: #fff;
color: #000;
padding: 5px 5px 5px 5px;
}
</style>
I've attempted various solutions, including the following:
protected void gvStudentTraining_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
string onmouseoverStyle = "this.style.backgroundColor='#5badff'";
string onmouseoutStyle = "this.style.backgroundColor='white'";
if (e.Row.HasControls())
{
Label temp = (Label)e.Row.FindControl("lblTotal");
temp.Attributes.Add("onmouseover", onmouseoverStyle);
temp.Attributes.Add("onmouseout", onmouseoutStyle);
}
}
}
Can anyone suggest a way to change the background-color of a row, including the labels inside <itemtemplate>, when hovering the mouse over that row?
Thank you in advance.