In this article I will explain with an example, how to Highlight GridView on CheckBox check and mouseover using JavaScript in ASP.Net.
 
 
HTML Markup
The HTML Markup consists of:
GridView:- For displaying data.
Columns
GridView consists of a TemplateField column and three BoundField columns.
TemplateField column consists of HeaderTemplate and ItemTemplate:
 
HeaderTemplate – It consists of an ASP.Net CheckBox which has been assigned with a JavaScript onclick function.
ItemTemplate - It consists of an ASP.Net CheckBox which has been assigned with a JavaScript onclick function.
 
Events
OnRowDataBound – For getting control of each GridView Row.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" OnRowDataBound="OnRowDataBound">
    <Columns>
        <asp:TemplateField>
            <HeaderTemplate>
                <asp:CheckBox ID="chkAll" runat="server" onclick="SelectAll(this)" />
            </HeaderTemplate>
            <ItemTemplate>
                <asp:CheckBox ID="chk" runat="server" onclick="SelectOne(this)" />
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Id" HeaderText="Customer Id" />
        <asp:BoundField DataField="Name" HeaderText="Name" />
        <asp:BoundField DataField="Country" HeaderText="Country" />
    </Columns>
</asp:GridView>
 
 
Namespaces
You will need to import the following namespace.
C#
using System.Data;
 
VB.Net
Imports System.Data
 
 
Binding the ASP.Net GridView control
Inside the Page Load event handler, GridView is populated with a dynamic DataTable with some dummy data.
Note: You can learn more about this dynamic DataTable in my article Create DataTable dynamically and bind to GridView in ASP.Net.
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country")})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub
 
 
Highlighting GridView Row using JavaScript
Assigning MouseOver and MouseLeave JavaScript events to each GridView Row
Inside the OnRowDataBound event handler, each GridView Row has been assigned with JavaScript MouseOver and MouseLeave functions by setting the onmouseover and onmouseleave attributes respectively.
C#
protected void OnRowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        e.Row.Attributes["onmouseover"] = "MouseOver(this);";
        e.Row.Attributes["onmouseleave"] = "MouseLeave(this);";
    }
}
 
VB.Net
Protected Sub OnRowDataBound(sender As Object, e As GridViewRowEventArgs)
    If e.Row.RowType = DataControlRowType.DataRow Then
        e.Row.Attributes("onmouseover") = "MouseOver(this);"
        e.Row.Attributes("onmouseleave") = "MouseLeave(this);"
    End If
End Sub
 
MouseOver JavaScript function
This function is called when the mouse is moved over the GridView Row.
Inside this function, if the CheckBox in the GridView Row is not checked the GridView Row is set with CSS class hover so that its background color is changed and the GridView Row is highlighted.
 
MouseLeave JavaScript function
This function is called when the mouse leaves the GridView Row.
Inside this function, if the CheckBox in the GridView Row is not checked the CSS class set for the GridView Row is removed which removes the highlight.
<script type="text/javascript">
    function MouseOver(row) {
        //Hightlight GridView Row if not selected.
        if (!row.cells[0].getElementsByTagName("input")[0].checked) {
            row.className = "hover";
        }
    }
    function MouseLeave(row) {
        //Remove Hightlight from GridView Row if not selected.
        if (!row.cells[0].getElementsByTagName("input")[0].checked) {
            row.className = "";
        }
    }
</script>
 
 
CSS Classes
The following CSS class are used to highlight the GridView row on mouseover.
<style type="text/css">
    .hover { background-color: #B8DBFD; }
</style>
 
 
Check Uncheck all CheckBoxes in GridView when Header CheckBox is checked
The SelectAll function is called when the GridView Header Row CheckBox is checked or unchecked.
Inside this JavaScript function, first the reference of the Header Row CheckBox is received as parameter.
Then, with the help of JavaScript parentNode property, the GridView is referenced.
Note: First parent is Cell, second parent is Row and third parent is the GridView.
 
Finally, a loop is executed over the GridView Rows and each CheckBox is checked or unchecked based on state of Header Row CheckBox and if the CheckBoxes are checked, the selected CSS class is applied GridView Rows.
Note: ASP.Net GridView is rendered as HTML Table in browser.
 
<script type="text/javascript">
    function SelectAll(headerCheckBox) {
        //Get the reference of GridView.
        var GridView = headerCheckBox.parentNode.parentNode.parentNode;
 
        //Loop through all GridView Rows except first row.
        for (var i = 1; i < GridView.rows.length; i++) {
            //Reference the CheckBox.
            var checkBox = GridView.rows[i].cells[0].getElementsByTagName("input")[0];
 
            //If CheckBox is checked, change background color the GridView Row.
            if (headerCheckBox.checked) {
                checkBox.checked = true;
                GridView.rows[i].className = "selected";
            } else {
                checkBox.checked = false;
                GridView.rows[i].className = "";
            }
        }
    }
</script>
 
 
When the Row CheckBoxes are checked then check the Header Row CheckBox
The SelectOne function is called when the GridView Row CheckBox is checked.
Inside this JavaScript function, first the reference of the GridView Row CheckBox is received as parameter.
Then, with the help of JavaScript parentNode property, the GridView Row, the GridView and then the Header Row CheckBox is referenced.
If the CheckBox is checked, then the GridView row is set with a CSS class selected which changes its background color.
Finally, a loop is executed over the GridView Rows and each CheckBox is verified whether checked or unchecked, if all Row CheckBoxes are checked then Header Row CheckBox is also checked.
<script type="text/javascript">
    function SelectOne(chk) {
        //Reference the GridView Row.
        var row = chk.parentNode.parentNode;
 
        //Get the reference of GridView.
        var GridView = row.parentNode;
 
        //Reference the Header CheckBox.
        var headerCheckBox = GridView.rows[0].cells[0].getElementsByTagName("input")[0];
 
        //If CheckBox is checked, change background color the GridView Row.
        if (chk.checked) {
            row.className = "selected";
        } else {
            row.className = "";
        }
 
        var checked = true;
 
        //Loop through all GridView Rows.
        for (var i = 1; i < GridView.rows.length; i++) {
            //Reference the CheckBox.
            var checkBox = GridView.rows[i].cells[0].getElementsByTagName("input")[0];
            if (!checkBox.checked) {
                checked = false;
                break;
            }
        }
 
        headerCheckBox.checked = checked;
    };
</script>
 
 
 
Screenshot
Highlight GridView on CheckBox check and mouseover in ASP.Net
 
 
 
Browser Compatibility
The above code has been tested in the following browsers.
Internet Explorer  FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 
Demo
View Demo
 
 
Downloads
Download Code