jQuery to highlight gridview's single or all rows on checkbox check uncheck.

IntroductionIn this article I am going to explain How to highlight single or all rows in asp.net gridview on checkbox check uncheck using jQuery and CSS.  


jQuery to highlight gridview's single or all rows on checkbox check uncheck.
  
Description: We usually add checkbox along with each record in gridview to select specific record and similarly to select all records at once we also add checkbox in gridview's header. 
Here I am going to highlight the selected records so that it look more users friendly and attractive as shown in image above. To highlight we are simply using css class for changing background color. We are adding class for check event and removing that class for uncheck event. You can change the colors as per your choice that suits your project theme.

Implementation:Let’s create an asp.net demo page for demonstration purpose.

.aspx file code

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Highlight.aspx.cs" Inherits="Highlight" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title> 
    <style>
        .highlight {
            width100%;
            background-color#eaba93;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var chkAll = $('#chkHeader').click(function () {
                //Check header and gridview checkboxes on click of header checkbox
                chkItem.prop('checked', $(this).is(':checked'));
            });
            var chkItem = $('[id*=chkItems]').click(function () {
                //If any of the gridview checkbox is unchecked then uncheck header's checkbox also
                chkAll.prop('checked', chkItem.filter(':not(:checked)').length == 0);
            });
        });

$(document).on('click', '#chkHeader', function () {
            if ($(this).is(":checked")) {
                //If header checkbox is checked then
    //add class 'highlight' to each row of table
                $('#grdEmp tr').addClass('highlight');
            }
            else {
                $('#grdEmp tr').removeClass('highlight');
            }
        });

        $(document).on('click', '#chkItems', function () {           
            if ($(this).is(":checked")) {
                //If checkbox is checked then add
     //class 'highlight' to the row where checkbox was checked
                $(this).closest('tr').addClass('highlight');
            }
            else {
                $(this).closest('tr').removeClass('highlight');
            }

        });      
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
            <asp:GridView ID="grdEmp" runat="server" AutoGenerateColumns="False" CellPadding="4" ForeColor="#333333">             
                <Columns>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            <input type="checkbox" id="chkHeader" class="header" />
                        </HeaderTemplate>
                        <ItemTemplate>
                            <input type="checkbox" id="chkItems" class="item" />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField HeaderText="Employee Name" DataField="EmployeeName" />
                    <asp:BoundField HeaderText="Code" DataField="EmployeeCode" />
                    <asp:BoundField HeaderText="Age" DataField="Age" />
                </Columns>
                <EditRowStyle BackColor="#2461BF" />
                <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#E36C0A" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
              
                <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                <SortedAscendingCellStyle BackColor="#F5F7FB" />
                <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                <SortedDescendingCellStyle BackColor="#E9EBEF" />
                <SortedDescendingHeaderStyle BackColor="#4870BE" />
            </asp:GridView>
        </div>
    </form>
</body>
</html>

.aspx.cs file code

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindEmployeeData();
        }
    }
    public class Employee
    {
        public int EmployeeId { getset; }
        public string EmployeeName { getset; }
        public string EmployeeCode { getset; }
        public int Age { getset; }
    }

    private void BindEmployeeData()

    {
        List<Employee> employees = new List<Employee>()
        {
            new Employee()
            {
                EmployeeId = 1,
                EmployeeName = "Arjun",
                EmployeeCode = "EMP001",
                Age =22
            },
            new Employee()
            {
                EmployeeId = 2,
                EmployeeName = "Ranbeer",
                EmployeeCode = "EMP002",
                Age =25
            },
            new Employee()
            {
                EmployeeId = 3,
                EmployeeName = "Shahid",
                EmployeeCode = "EMP003",
                Age =21},
            new Employee()
            {
                EmployeeId = 4,
                EmployeeName = "Salman",
                EmployeeCode = "EMP004",
                Age =22
            },
            new Employee()
            {
                EmployeeId = 5,
                EmployeeName = "Hrithik",
                EmployeeCode = "EMP005",
                Age =24
            }
        };
        grdEmp.DataSource = employees;
        grdEmp.DataBind();
    }


Note: For demonstration purpose Employee List with fix values have been used to bind gridview, but in actual practice you will bind it with data from database.

Explanation: As you can see we have created 3 jquery’s functions and  these functions are self explanatory as I have mentioned the meaning of each row in comments.

Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linked in and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
Previous
Next Post »

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..