Introduction:
In this article I will explain how to highlight
gridview rows when checkbox is checked or selected in asp.net
using JQuery.
Description:
In previous article I explained select/deselect checkboxes in gridview using JQuery, select header checkbox when all child checkboxes selected in JQuery and many articles relating to JQuery. Here I am using select header checkbox when all child checkboxes selected in JQuery concept to highlight gridview row when checkbox is checked in JQuery.
In previous article I explained select/deselect checkboxes in gridview using JQuery, select header checkbox when all child checkboxes selected in JQuery and many articles relating to JQuery. Here I am using select header checkbox when all child checkboxes selected in JQuery concept to highlight gridview row when checkbox is checked in JQuery.
If we want to highlight checkbox selected
gridview rows using JQuery we need to write the code like this
$("[id$=chkChild]").click(function() {
if(this.checked) {
$(this).parent().parent().addClass('highlightRow');
}
else {
$(this).parent().parent().removeClass('highlightRow');
}
});
|
Above Code Snippet will highlight
checkbox selected row and remove highlight of row when checkbox unselected. If
you want to see it in detailed manner for that first design one table UserInformation
in your database
Column
Name
|
Data
Type
|
Allow
Nulls
|
UserName
|
varchar(50)
|
Yes
|
LastName
|
varchar(50)
|
Yes
|
Location
|
Varchar(50)
|
Yes
|
After that enter some dummy data in
table and design aspx page like this
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1"
runat="server">
<title>Highlight row when checkbox is checked in gridview asp.net</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function()
{
// Header Checkbox click function
$('[id$=chkHeader]').click(function() {
if ($('[id$=chkHeader]:checked').length>0)
{
$('[id$=chkChild]').parent().parent().addClass('highlightRow');
}
else {
$('[id$=chkChild]').parent().parent().removeClass('highlightRow');
}
$("[id$=chkChild]").attr('checked', this.checked);
});
// Child Checkbox click function
$("[id$=chkChild]").click(function() {
if(this.checked) {
$(this).parent().parent().addClass('highlightRow');
}
else {
$(this).parent().parent().removeClass('highlightRow');
}
if ($('[id$=chkChild]').length
== $('[id$=chkChild]:checked').length) {
$('[id$=chkHeader]').attr("checked", "checked");
}
else {
$('[id$=chkHeader]').removeAttr("checked");
}
});
});
</script>
<style type="text/css">
.highlightRow
{
background-color:Green;
Color:White;
}
</style>
</head>
<body>
<form id="form1"
runat="server">
<div>
<asp:GridView ID="gvUserInfo"
runat="server">
<HeaderStyle BackColor="#df5015" Font-Bold="true" ForeColor="White" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkHeader"
runat="server"
/>
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chkChild" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
|
Now add following
namespaces in codebehind
C#
Code
using
System;
using
System.Data;
using
System.Data.SqlClient;
|
After
that add following code in code behind
protected
void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
BindGridview();
}
}
// This method is used to bind gridview from database
protected
void BindGridview()
{
SqlConnection con = new SqlConnection("Data
Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB");
con.Open();
SqlCommand cmd = new SqlCommand("select
TOP 10 UserName,LastName,Location from UserInformation", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet
ds = new DataSet();
da.Fill(ds);
gvUserInfo.DataSource
= ds;
gvUserInfo.DataBind();
}
|
VB.NET
Code
Imports
System.Data
Imports
System.Data.SqlClient
Partial
Class VBCode
Inherits
System.Web.UI.Page
Protected
Sub Page_Load(ByVal
sender As Object,
ByVal e As
EventArgs) Handles Me.Load
If
Not IsPostBack Then
BindGridview()
End
If
End
Sub
' This method is used to bind gridview from database
Protected
Sub BindGridview()
Dim
con As New
SqlConnection("Data Source=SureshDasari;Integrated
Security=true;Initial Catalog=MySampleDB")
con.Open()
Dim
cmd As New
SqlCommand("select TOP 10
UserName,LastName,Location from UserInformation", con)
Dim
da As New
SqlDataAdapter(cmd)
Dim
ds As New
DataSet()
da.Fill(ds)
gvUserInfo.DataSource
= ds
gvUserInfo.DataBind()
End
Sub
End
Class
|
|
Demo
 |
Download
sample code attached
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
7 comments :
Not working properly
It's working properly i tested it in all broswers. Please check your code.
hi suresh
how to write insert(query) gridview checkbox values in database
(multiplerows insert)
css is not working so background is not changed after checked on checkbox...
only changed background of checkbox,why?
i have
jQuery_JavaScript_Library_1_8_2.js
jquery-ui-1.9.1.custom.js
Thanks Sures...
Its working perfectly...................thanks
Note: Only a member of this blog may post a comment.