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
 |
No comments:
Post a Comment