Overview: This code snippet demonstrates how to highlight a gridview row and change the textbox backcolor while tabbing or entering a textbox. The client side javascript code retains the original back color and restores on the onblur dom event. The javascript dom events onchange and onblur and onmouseover and onmouseout are attached by attribute during the gridview rowdatabound event.
Sub mygridview_rowdatabound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
txtProjMaterial = e.Row.FindControl("txtProjMaterial")
txtProjHours = e.Row.FindControl("txtProjHours")
If (e.Row.RowType = DataControlRowType.DataRow) Then
e.Row.Attributes.Add("onmouseover", "this.originalcolor=this.style.backgroundColor; this.style.backgroundColor='lightblue'")
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=this.originalcolor;")
txtProjHours.Attributes.Add("onfocus", "this.originalcolor=this.style.backgroundColor;this.style.backgroundColor='#f8ebbb'")
txtProjHours.Attributes.Add("onblur", "this.style.backgroundColor=this.originalcolor;")
txtProjMaterial.Attributes.Add("onfocus", "this.originalcolor=this.style.backgroundColor;this.style.backgroundColor='#f8ebbb'")
txtProjMaterial.Attributes.Add("onblur", "this.style.backgroundColor=this.originalcolor;")
End If
end sub
<asp:GridView ID="dgProjection" DataKeyNames="acctnum" UseAccessibleHeader="true" BorderColor="Black" BorderWidth="1px"
CellPadding="3" Font-Names="Verdana" Font-Size="7pt" FooterStyle-BackColor="#aaaadd" FooterStyle-Font-Size="X-Small" HeaderStyle-BackColor="#aaaadd"
runat="server" ShowFooter="true" OnRowDataBound="projection_rowdatabound" AllowSorting="True" AutoGenerateColumns="False">
<Columns>
<asp:CommandField ShowSelectButton="false" Visible="false" />
<asp:CommandField ShowEditButton="false" Visible="false" />
<asp:CommandField ShowDeleteButton="false" Visible="false" />
<asp:TemplateField HeaderStyle-VerticalAlign="Top" ItemStyle-Wrap="false" HeaderText="Proj Hrs" ItemStyle-VerticalAlign="bottom"
ItemStyle-HorizontalAlign="right" HeaderStyle-Width="120px" ItemStyle-Width="120px">
<HeaderTemplate>
<asp:Label ID="lblReportProjHrs" runat="server" Text='<%# getReportTotals("Proj Hrs") %>'></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="txtProjHours" TabIndex="1" Font-Size="Small" Width="100" CssClass="AlignRight"
runat="server" ForeColor="black" Text='<%# FormatNumber(Eval("projhrs"), 1)%>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-VerticalAlign="Top" ItemStyle-Wrap="false" HeaderText="Proj Mat" ItemStyle-VerticalAlign="bottom"
ItemStyle-HorizontalAlign="right" HeaderStyle-Width="120px" ItemStyle-Width="120px">
<HeaderTemplate>
<asp:Label ID="lblReportProjMat" runat="server" Text='<%# getReportTotals("Proj Mat") %>'></asp:Label>
</HeaderTemplate>
<ItemTemplate>
<asp:TextBox ID="txtProjMaterial" TabIndex="1" ForeColor="black" Font-Size="small" Width="100" CssClass="AlignRight"
runat="server" Text='<%# FormatNumber(Eval("projmat"), 2)%>' />
</ItemTemplate>
</asp:TemplateField>
</asp:GridView>
Or you can highlight the whole row during tabbing by turning off the onmouseover and onmouseout and just detect the control onfocus and onblur to highlight the row.
txtProjHours.Attributes.Add("onfocus", e.Row.ClientID & ".originalcolor=" & e.Row.ClientID & ".style.backgroundColor;" & e.Row.ClientID & ".style.backgroundColor='lightblue';")
txtProjHours.Attributes.Add("onblur", e.Row.ClientID & ".style.backgroundColor=" & e.Row.ClientID & ".originalcolor;")
txtProjMaterial.Attributes.Add("onfocus", e.Row.ClientID & ".originalcolor=" & e.Row.ClientID & ".style.backgroundColor;" & e.Row.ClientID & ".style.backgroundColor='lightblue';")
txtProjMaterial.Attributes.Add("onblur", e.Row.ClientID & ".style.backgroundColor=" & e.Row.ClientID & ".originalcolor;")
