On this blog you will learn how to highlight a grid
view row on mouse over event and how to change row color and check box
selection and how to select all rows on check box selection in asp.net.
First of all drag and drop a grid view on page.
<asp:GridView ID="GridView1"
runat="server"
BackColor="White"
AutoGenerateColumns="False"
BorderColor="#DEDFDE" BorderStyle="None" BorderWidth="1px" CellPadding="4" ForeColor="Black"
GridLines="Vertical" Height="215px" Width="489px" AllowPaging="True" AllowSorting="True"
DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1"
onrowdatabound="GridView1_RowDataBound">
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="#6B696B" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="White" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAllCheckBox" runat="server" onclick="CheckAllCheckBoxes(this);"
/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="SelectedCheckBox" runat="server" onclick="CheckSelected_Click(this)"
/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="150px" DataField="EmployeeID" HeaderText="EmployeeID"
InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID">
<ItemStyle Width="150px"></ItemStyle>
</asp:BoundField>
<asp:BoundField ItemStyle-Width="150px" DataField="LastName" HeaderText="LastName"
SortExpression="LastName">
<ItemStyle Width="150px"></ItemStyle>
</asp:BoundField>
<asp:BoundField ItemStyle-Width="150px" DataField="FirstName" HeaderText="FirstName"
SortExpression="FirstName">
<ItemStyle Width="150px"></ItemStyle>
</asp:BoundField>
<asp:BoundField ItemStyle-Width="150px" DataField="City" HeaderText="City" SortExpression="City">
<ItemStyle Width="150px"></ItemStyle>
</asp:BoundField>
<asp:BoundField ItemStyle-Width="150px" DataField="PostalCode" HeaderText="PostalCode"
SortExpression="PostalCode">
<ItemStyle Width="150px"></ItemStyle>
</asp:BoundField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$
ConnectionStrings:NorthwindConnectionString %>"
SelectCommand="SELECT DISTINCT [EmployeeID], [LastName],
[FirstName], [City], [PostalCode] FROM [Employees] ORDER BY
[EmployeeID]">
</asp:SqlDataSource>
<script type="text/javascript">
function
CheckSelected_Click(obj) {
var
row = obj.parentNode.parentNode;
if
(objRef.checked) {
row.style.backgroundColor = "Red";
}
else
{
if
(row.rowIndex % 2 == 0) {
row.style.backgroundColor =
"white";
}
else
{
row.style.backgroundColor =
"white";
}
}
var
GridView = row.parentNode;
var
inputList = GridView.getElementsByTagName("input");
for
(var i = 0; i < inputList.length; i++)
{
var
headerCheckBox = inputList[0];
var checked = true;
if
(inputList[i].type == "checkbox"
&& inputList[i] != headerCheckBox) {
if
(!inputList[i].checked) {
checked = false;
break;
}
}
}
headerCheckBox.checked = checked;
}
function
MouseEvents(obj, evt) {
var
checkbox = obj.getElementsByTagName("input")[0];
if
(evt.type == "mouseover") {
obj.style.backgroundColor = "Green";
}
else
{
if
(checkbox.checked) {
obj.style.backgroundColor =
"Red";
}
else
if (evt.type == "mouseout")
{
if
(obj.rowIndex % 2 == 0) {
obj.style.backgroundColor = "white";
}
else
{
obj.style.backgroundColor = "white";
}
}
}
}
function
CheckAllCheckBoxes(obj) {
var
GridView = obj.parentNode.parentNode.parentNode;
var
inputList = GridView.getElementsByTagName("input");
for
(var i = 0; i < inputList.length; i++) {
var row =
inputList[i].parentNode.parentNode;
if
(inputList[i].type == "checkbox"
&& obj != inputList[i]) {
if
(obj.checked) {
row.style.backgroundColor = "Red";
inputList[i].checked = true;
}
else
{
if (row.rowIndex % 2 == 0) {
row.style.backgroundColor = "white";
}
else {
row.style.backgroundColor =
"white";
}
inputList[i].checked = false;
}
}
}
}
</script>
protected void GridView1_RowDataBound(object
sender, GridViewRowEventArgs e)
{
if
(e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "MouseEvents(this,
event)");
e.Row.Attributes.Add("onmouseout", "MouseEvents(this,
event)");
}
}
Output:
![Animation2.gif]()
Image 1.