Now here in this tutorial, I’ll explain how to select asp.net gridview rows by check uncheck checkbox in jquery. I’ll also cover how to highlight the selected rows background color (add or remove selected row class) when gridview row is check uncheck or select deselect checkboxes in asp.net.
In my previous tutorials, I’d explained how to export only gridview selected row data to word excel text pdf, send gridview selected row data in email body, get gridview selected row data from code-behind, highlight gridview selected rows and other more cracking tutorials on GridView, Asp.net here.
Check Uncheck CheckBox In jQuery
Following is the jquery script that is used to implement the check uncheck checkbox in asp.net gridview:
<script type="text/javascript">
$(document).ready(function () {
$('#chkSelectAll').click(function () {
if ($(this).is(":checked")) {
$('.chkSelect').prop('checked', true);
//add the selected class from each row
$('.chkSelect').closest("tr").addClass("selected");
} else {
$('.chkSelect').prop('checked', false);
//remove selected class from each row
$('.chkSelect').closest("tr").removeClass("selected");
}
});
$('.chkSelect').click(function () {
//remove chkSelectAll checked when any of the child checkbox clicked
$('#chkSelectAll').removeAttr("checked");
if ($(this).is(":checked")) {
//add the selected class to selected row
$($(this).closest("tr")).addClass("selected");
} else {
//remove the selected class from selected row
$($(this).closest("tr")).removeClass("selected");
}
});
});
</script>
In above example we are handling two click events to maintain this functionality.
- First we need click event of gridview header checkbox that is chkSelectAll to check/uncheck or select/deselect all the checkboxes in asp.net gridview.
- In last, we need to also manage a specific checkbox’s click event that is chkSelect for gridview rows to select/deselect it. I have used CSS Class Selector for it because it is easy to access multiple elements with same class instead using separate ids.
Everyone likes bonus with the tutorials, so I decided to put bonus in it. In bonus, I added some code that will differentiate the selected rows with background color.
CSS for selected row:
<style type="text/css">
.selected {
background-color: #f5f5f5;
}
</style>
To add selected row class you need to apply the following script:
<script type="text/javascript">
//add the selected class from each row when select all checked
$('.chkSelect').closest("tr").addClass("selected");
//add the selected class to selected row when specific row checked
$($(this).closest("tr")).addClass("selected");
</script>
To remove selected row class you need to apply the following script:
<script type="text/javascript">
//remove the selected class from each row when select all unchecked
$('.chkSelect').closest("tr").removeClass("selected");
//remove the selected class from selected row when specific row unchecked
$($(this).closest("tr")).removeClass("selected");
</script>
Select GridView Rows by Check Uncheck CheckBox In Asp.net
Following is the complete HTML Markup code that I used for my .aspx page to select asp.net gridview rows by check uncheck checkbox in jQuery:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Check/Uncheck checkboxes in asp.net gridview</title>
<style type="text/css">
.selected {
background-color: #f5f5f5;
}
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#chkSelectAll').click(function () {
if ($(this).is(":checked")) {
$('.chkSelect').prop('checked', true);
//add the selected class from each row
$('.chkSelect').closest("tr").addClass("selected");
} else {
$('.chkSelect').prop('checked', false);
//remove selected class from each row
$('.chkSelect').closest("tr").removeClass("selected");
}
});
$('.chkSelect').click(function () {
//remove chkSelectAll checked when any of the child checkbox clicked
$('#chkSelectAll').removeAttr("checked");
if ($(this).is(":checked")) {
//add the selected class to selected row
$($(this).closest("tr")).addClass("selected");
} else {
//remove the selected class from selected row
$($(this).closest("tr")).removeClass("selected");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="grdSubjectList" runat="server" AutoGenerateColumns="false">
<HeaderStyle Font-Bold="true" BackColor="#9a9a9a" BorderColor="#222"
ForeColor="White" Height="30" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<input type="checkbox" id="chkSelectAll" style="width: 50px;">
</HeaderTemplate>
<ItemTemplate>
<input type="checkbox" class="chkSelect" style="width: 50px;">
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Subjects" HeaderText="Subjects"
ItemStyle-Width="200" ItemStyle-HorizontalAlign="Center" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Binding Asp.net GridView In C#
protected void Page_Load(object sender, EventArgs e) {
System.Data.DataTable dtSubData = new System.Data.DataTable();
//Creating Column
dtSubData.Columns.Add("Subjects");
//Adding Subjects in column
dtSubData.Rows.Add("Asp.net");
dtSubData.Rows.Add("C#");
dtSubData.Rows.Add("Vb.net");
dtSubData.Rows.Add("HTML");
dtSubData.Rows.Add("CSS");
dtSubData.Rows.Add("JavaScript");
dtSubData.Rows.Add("jQuery");
//Binding Subjects to gridview
grdSubjectList.DataSource = dtSubData;
grdSubjectList.DataBind();
}
Binding Asp.net GridView In Vb.net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim dtSubData As New DataTable()
'Creating Column'
dtSubData.Columns.Add("Subjects")
'Adding Subjects in column'
dtSubData.Rows.Add("Asp.net")
dtSubData.Rows.Add("C#")
dtSubData.Rows.Add("Vb.net")
dtSubData.Rows.Add("HTML")
dtSubData.Rows.Add("CSS")
dtSubData.Rows.Add("JavaScript")
dtSubData.Rows.Add("jQuery")
'Binding Subjects to gridview'
grdSubjectList.DataSource = dtSubData
grdSubjectList.DataBind()
End Sub
Example Result
Download Example Code
Git Repo
That’s it, this is one of the best way to select asp.net gridview rows by check or uncheck checkbox using jquery in .net aspx page.
Let me know if you’ve any questions or doubts about this tutorial by writing down your queries in comment below. I would be happy to provide you my feedback as soon as possible.
Happy Coding!
