Introduction: In 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.
In previous articles I have explained How to delete multiple selected records/items based on checkbox in gridview and Bulk insert multiple records from gridview to sql database using xml data type in asp.net and Sqlbulkcopy to bulk insert multiple records from gridview to sql database in asp.net and Send email to multiple users based on checkbox selection inside gridview and Jquery to hide first /last or nth column of table before printing
In previous articles I have explained How to delete multiple selected records/items based on checkbox in gridview and Bulk insert multiple records from gridview to sql database using xml data type in asp.net and Sqlbulkcopy to bulk insert multiple records from gridview to sql database in asp.net and Send email to multiple users based on checkbox selection inside gridview and Jquery to hide first /last or nth column of table before printing
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 {
width: 100%;
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 { get; set; }
public string EmployeeName { get; set; }
public string EmployeeCode { get; set; }
public int Age { get; set; }
}
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.
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..