Highlight GridView Row Values on MouseHover
Display Gridview Details Want To Highlight GridView Row on Mousehover Using JQuery in Asp.Net C#.
Download Coding
Download
DEMO
Next - Change Header Text For BoundField - Add Database Field Name
Next - Add - Script File Call JQuery Plugin - Assign Gridview if Mouse
Display Gridview Details Want To Highlight GridView Row on Mousehover Using JQuery in Asp.Net C#.
Download Coding
Download
DEMO
HTML CODING
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>HighLight GridView Row on MouseHover Using JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" lang="javascript">
$(document).ready(function ()
{ $("#<%=GridView1.ClientID%> tr").hover(
function ()
{
$(this).css("background-color", "pink");
},
function ()
{
$(this).css("background-color", "white");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div align="center">
<br /><br />
<asp:GridView ID="GridView1" runat="server" ShowHeader="true" AutoGenerateColumns="False">
<AlternatingRowStyle BackColor="Silver" />
<Columns>
<asp:BoundField ShowHeader="true" DataField="filename" HeaderText="File
Name" />
<asp:BoundField ShowHeader="true" DataField="filepath" HeaderText="File
Path" />
</Columns>
<HeaderStyle BackColor="#CC3300" />
</asp:GridView>
<br />
</div>
</form>
</body>
</html>
C# CODING
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["dbcon"].ToString());
con.Open();
SqlCommand cmd = new SqlCommand("select * from
reg", con);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
adp.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
}
}
First Create - New Web Form - Add Gridview From
ToolBox - Edit Column - Add BoundField - Add
Next - Change Header Text For BoundField - Add Database Field Name
Next - Add - Script File Call JQuery Plugin - Assign Gridview if Mouse
0 comments:
Post a Comment