Introduction:
Here I will explain how to highlight gridview rows on mouseover and mouseout using jQuery in asp.net.
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 Email
|
|||
7 comments :
Not working when "AlternatingRowStyle" is defined. Any Help..?
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..
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.
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 ..
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.
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
plz tel me how bind data list in course,then the coursetype data will be display when mouse over the course.
Note: Only a member of this blog may post a comment.