V24s

"Get Updates : Subscribe to our e-mail newsletter to receive updates........" "Good Luck frnds" Admission 2018 Application Form 2018 Colleges Entrance Exam 2018 Results 2018 Notification 2018 University Educational Jobs 2018 Government Jobs 2018

Search This Blog v24s guys

Follow by Email

15 April, 2013

Highlight Asp.net Gridview Rows on MouseOver in jQuery

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

Post a Comment

Popular Posts

Recent Posts

Google Analytics