V24s

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

Search This Blog v24s guys

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

No comments:

Popular Posts

Recent Posts

Google Analytics