Highlighting GridView rows using onmouseover, onclick and using checkbox are all similar features. All are pretty simple to implement. The main problem rises when using the same technique on a GridView with alternate rows with different color. Let's check out how this can be done.
First, here is the HTML code for the GridView control.
<asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="False" BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBox ID="chkSelect" runat="server" onclick="changeColor(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:Label ID="lblCategoryName" runat="server" Text='<%# Eval("CategoryName") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Description">
<ItemTemplate>
<asp:Label ID="lblDescription" runat="server" Text='<%# Eval("Description") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="Tan" />
<PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />
<HeaderStyle BackColor="Tan" Font-Bold="True" />
<AlternatingRowStyle BackColor="PaleGoldenrod" />
</asp:GridView>
The ChangeColor function is fired whenever a checkbox is clicked.
One important point to note about Alternate rows is that there is no color assigned to them. They get the color from the style property of the table. In other words we only assign the style to the even numbered rows.
<script language="javascript" type="text/javascript">
var color = '';
function changeColor(obj)
{
var rowObject = getParentRow(obj);
var parentTable = document.getElementById("gvCategories");
if(color == '')
{
color = getRowColor();
}
if(obj.checked)
{
rowObject.style.backgroundColor = 'Yellow';
}
else
{
rowObject.style.backgroundColor = color;
color = '';
}
// private method
function getRowColor()
{
if(rowObject.style.backgroundColor == '') return parentTable.style.backgroundColor;
else return rowObject.style.backgroundColor;
}
}
// This method returns the parent row of the object
function getParentRow(obj)
{
do
{
obj = obj.parentElement;
}
while(obj.tagName != "TR")
return obj;
}
</script>
