How to highlight grid view row and change row color on mouse over and Check box selection in ASP.NET

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.

Ebook Download
View all
Learn
View all