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

Highlight Asp.net Gridview Rows on MouseOver in jQuery

Nov 17, 2012
Introduction:

Here I will explain how to highlight gridview rows on mouseover and mouseout using jQuery in asp.net.

Description:

In previous post I explained hightlight gridview rows on mouseover in asp.net. Now I will explain how to highlight gridview rows on mouseover and mouseout using jQuery in asp.net.

To implement this functionality in jQuery we need to write the code like this

<script type="text/javascript">
$(document).ready(function() {
$('#gvrecords tr:has(td)').mouseover(function() {
$(this).addClass('highlightRow');
});
$('#gvrecords tr').mouseout(function() {
$(this).removeClass('highlightRow');
})
})
</script>
If you observe above code I written like

$('#gvrecords tr:has(td)').mouseover(function() {
By using this we are identifying row tr with td and applying css style for gridview. Instead of this we can write the code like this

$('#gvrecords tr').mouseover(function() {
But above code will apply css style for gridview header also for that reason we written above code to identity and apply css style for row tr with td

If you want to see it in complete example check below example


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Hightlight Gridview Rows on mouseover and mouseout in jQuery</title>
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#gvrecords tr:has(td)').mouseover(function() {
$(this).addClass('highlightRow');
});
$('#gvrecords tr').mouseout(function() {
$(this).removeClass('highlightRow');
})
})
</script>
<style type="text/css">
.highlightRow
{
background-color:#ffeb95;
text-decoration:underline;
cursor:pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView runat="server" ID="gvrecords"  AutoGenerateColumns="false"
HeaderStyle-BackColor="#7779AF" HeaderStyle-ForeColor="White" >
<Columns>
<asp:BoundField DataField="UserName" HeaderText="UserName" />
<asp:BoundField DataField="FirstName" HeaderText="FirstName" />
<asp:BoundField DataField="LastName" HeaderText="LastName" />
<asp:BoundField DataField="Location" HeaderText="Location" />
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
After that add following namespaces in code behind

C# Code


using System;
using System.Data;
using System.Data.SqlClient;
Once namespaces added then write the following code in code behind


protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridview();
}
}
protected void BindGridview()
{
SqlConnection con =
new SqlConnection("Data Source=SureshDasari;Integrated Security=true;Initial Catalog=MySampleDB");
con.Open();
SqlCommand cmd = new SqlCommand("select UserName,FirstName,LastName,Location from UserInformation", con);
cmd.ExecuteNonQuery();
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
gvrecords.DataSource = ds;
gvrecords.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
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 UserName,FirstName,LastName,Location from UserInformation", con)
cmd.ExecuteNonQuery()
Dim da As New SqlDataAdapter(cmd)
Dim ds As New DataSet()
da.Fill(ds)
gvrecords.DataSource = ds
gvrecords.DataBind()
End Sub
End Class
Demo


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 :

Riaz said...

Not working when "AlternatingRowStyle" is defined. Any Help..?

chaitanya said...

hiii suresh your articles are superb and i have a req on gridview i.e i want to insert data by using gridview into database through multiple tables if thr are 5 columns in the gridview those 5 columns belongs to 5 different tables in th database is it possible if yes how please gimme a suggestion to dis..

udham Singh said...

hi suresh,

i want to show dynamic data on mouse over of link button inside the repeater.
i am searching it from last 1 day.

Please help me asap.

dinesh kumar said...

use this css class* {
padding: 0;
margin: 0;
}
body {
font: 11px Tahoma;
background-color: #F7F7E9;
}
h1 {
font: bold 32px Times;
color: #666;
text-align: center;
padding: 20px 0;
}
#container {
width: 700px;
margin: 10px auto;
}

.mGrid { width: 100%; background-color: #fff; margin: 5px 0 10px 0; border: solid 1px #525252; border-collapse:collapse; }
.mGrid td { padding: 2px; border: solid 1px #c1c1c1; color: #717171; }
.mGrid th { padding: 4px 2px; color: #fff; background: #424242 url(grd_head.png) repeat-x top; border-left: solid 1px #525252; font-size: 0.9em; }
.mGrid .alt { background: #fcfcfc url(grd_alt.png) repeat-x top; }
.mGrid .pgr {background: #424242 url(grd_pgr.png) repeat-x top; }
.mGrid .pgr table { margin: 5px 0; }
.mGrid .pgr td { border-width: 0; padding: 0 6px; border-left: solid 1px #666; font-weight: bold; color: #fff; line-height: 12px; }
.mGrid .pgr a { color: #666; text-decoration: none; }
.mGrid .pgr a:hover { color: #000; text-decoration: none; } on grid ..



Unknown said...

Hi Suresh,

I have been using lots of code from your samples. Everythings work fine. But whenever I try to implement your sample in JQUERY, I have never got any expected result. what could be the issue. I m using master page.

Unknown said...

when i am using master page it is not worked and on simple page it works's like charm


can you explain why this happen please

Unknown said...

plz tel me how bind data list in course,then the coursetype data will be display when mouse over the course.

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.