Introduction: In this article I am going to explain How to highlight
single or all rows in asp.net repeater on checkbox check uncheck using jQuery and CSS.
In previous articles I have explained How to
In previous articles I have explained How to
Description: We usually add checkbox along with each record in repeater
to select specific record and similarly to select all records at once we also
add checkbox in repeater'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 repeater checkboxes on
click of header checkbox
chkItem.prop('checked', $(this).is(':checked'));
});
var chkItem = $('[id*=chkItems]').click(function () {
//If any of the repeater checkbox is
unchecked then uncheck header's checkbox also
chkAll.prop('checked', chkItem.filter(':not(:checked)').length == 0);
});
});
function HighlightAllRow(cb) {
if ($(cb).is(":checked")) {
//If header checkbox is checked then add
class 'highlight' to each row of table
$('#tbEmployee tr').addClass('highlight');
}
else {
//If header checkbox is unchecked then
add class 'white' to each row of table
$('#tbEmployee tr').removeClass('highlight');
}
}
function HighlightSingleRow(cb) {
//Find row of the checkbox clicked
var row = $(cb).closest('tr');
if ($(cb).is(":checked")) {
//If any of the repeater checkbox is
checked then
//add class 'highlight' to row where checkbox was checked
$(row).addClass('highlight');
}
else {
//If any of the repeater checkbox is
unchecked then
//add class 'white' to row where checkbox was unchecked
$(row).removeClass('highlight');
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tbEmployee" border="1" cellspacing="2" cellpadding="2" style="width: 400px;">
<tr style="background-color: #E36C0A; color:
#FFFFFF; height: 30px;">
<td style="width: 20px;">Sr.No</td>
<td style="text-align: center;">
<asp:CheckBox ID="chkHeader" runat="server" CssClass="header" onclick="HighlightAllRow($(this));" />
</td>
<td>Employee Name</td>
<td>Code</td>
<td>Age</td>
</tr>
<asp:Repeater ID="repEmployees" runat="server">
<ItemTemplate>
<tr>
<td style="text-align:
center;">
<%#Container.ItemIndex+1 %>
</td>
<td style="text-align:
center;">
<asp:CheckBox ID="chkItems" runat="server" CssClass="item" onclick="HighlightSingleRow($(this));" />
</td>
<td>
<%#Eval("EmployeeName") %>
</td>
<td>
<%#Eval("EmployeeCode") %>
</td>
<td>
<%#Eval("Age") %>
</td>
</tr>
</ItemTemplate>
</asp:Repeater>
</table>
</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
}
};
repEmployees.DataSource
= employees;
repEmployees.DataBind();
}
Note: For demonstration purpose Employee List with
fix values have been used to bind repeater, but in actual practice you will bind
it with data from database.
Explanation: As you can see we have created jquery’s
functions HighlightAllRow() and HighlightSingleRow()
and called on Repeater’s header checkbox and repeater body checkbox respectively.
Both of this jquery 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..