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:
$(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:
.selected
{
background-color: #f5f5f5;
}
</style>
To add selected row class you need to apply the following script:
//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:
//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:
<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=”http://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#
{
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
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
