In my previous tutorials, I’d explained how to export gridview data to word excel text and pdf, get gridview selected row hiddenfield value using jquery, bind gridview using executereader and other more cracking tutorials on GridView, Asp.net here.
Now here in this tutorial, I’ll explain how you can highlight gridview row when you check or select from checkbox or check all rows with select all checkbox functionality from client-side using jQuery in asp.net with example code and step by step guide.
Function To Highlight GridView Row In jQuery
First add the following selected css class to highlight gridview row in head section in your .aspx page.
.selected
{
background-color: #f5f5f5;
}
</style>
Now add the following code snippet that will call on Checkbox click/checked jquery client-side event and get the selected or checked row and add or remove selected class respectively.
</script>
<script type=”text/javascript”>
$(document).ready(function () {
//Checkbox header select all settings
$(‘#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”);
}
});//Checkbox gridview row select settings
$(‘.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>
HTML Markup To Highlight GridView Row – [.aspx]
Here is the complete HTML markup code for .aspx page:
<head id=”Head1″ runat=”server”>
<title>Highlight gridview rows on row check or selection in asp.net
using c# or vb.net</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 () {
//Checkbox header select all settings
$(‘#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”);
}
});//Checkbox gridview row select settings
$(‘.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>
<h4>
Highlight gridview rows on row check or selection in asp.net using c# or vb.net</h4>
<asp:GridView ID=”grdResult” 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=”SubjectName” ItemStyle-HorizontalAlign=”Center”
HeaderText=”Subject Name” ItemStyle-Width=”200″ />
<asp:BoundField DataField=”Marks” HeaderText=”Marks” ItemStyle-Width=”200″
ItemStyle-HorizontalAlign=”Center” />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
After adding HTML markup to .aspx page, we need to bind the grid view. So choose your language (that is C# or Vb.net) and paste it to your code-behind file.
Binding Asp.net Gridview In C# – [.cs]
Now add the following namespace:
{
if (!IsPostBack)
{
LoadResultData();
}
}private void LoadResultData()
{
DataTable dt = new DataTable();//Creating Column
dt.Columns.Add(“SubjectId”);
dt.Columns.Add(“SubjectName”);
dt.Columns.Add(“Marks”);
//Adding Results in rows
dt.Rows.Add(1, “Asp.net”, 95);
dt.Rows.Add(2, “C#”, 88);
dt.Rows.Add(3, “Vb.net”, 78);
dt.Rows.Add(4, “HTML”, 89);
dt.Rows.Add(5, “CSS”, 90);
dt.Rows.Add(6, “JavaScript”, 85);
dt.Rows.Add(7, “jQuery”, 96);
//Binding Results to gridview
grdResult.DataSource = dt;
grdResult.DataBind();
}
Binding Asp.net Gridview In Vb.net – [.vb]
Now add the following namespace:
If Not IsPostBack Then
LoadResultData()
End If
End SubPrivate Sub LoadResultData()
Dim dt As New DataTable()‘Creating Column
dt.Columns.Add(“SubjectId”)
dt.Columns.Add(“SubjectName”)
dt.Columns.Add(“Marks”)
‘Adding Results in rows
dt.Rows.Add(1, “Asp.net”, 95)
dt.Rows.Add(2, “C#”, 88)
dt.Rows.Add(3, “Vb.net”, 78)
dt.Rows.Add(4, “HTML”, 89)
dt.Rows.Add(5, “CSS”, 90)
dt.Rows.Add(6, “JavaScript”, 85)
dt.Rows.Add(7, “jQuery”, 96)
‘Binding Results to gridview
grdResult.DataSource = dt
grdResult.DataBind()
End Sub
Example Result
