Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Highlight Gridview Row When CheckBox is Checked in Asp.Net

Sep 12, 2012
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.

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 RSS subscribe by email Subscribe by Email

7 comments :

Anonymous said...

Not working properly

Suresh Dasari said...

It's working properly i tested it in all broswers. Please check your code.

Unknown said...

hi suresh


how to write insert(query) gridview checkbox values in database

(multiplerows insert)

Anonymous said...

css is not working so background is not changed after checked on checkbox...

Marco said...

only changed background of checkbox,why?
i have
jQuery_JavaScript_Library_1_8_2.js
jquery-ui-1.9.1.custom.js

Unknown said...

Thanks Sures...

Unknown said...

Its working perfectly...................thanks

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.