Description:
As we know, gridview is a powerful control
to display data in tabular format. But some client side features makes user
unhappy.
Highlighting gridview row on mouse over
event not provided with gridview control. In order to overcome this, we are
using Jquery.
When mouse is moved over gridview row,
background color is changed and gridrow looks highlighted. When mouse is moved
out, color is changed and it will back to normal.
In order to implement highlight gridview
row, mouse hover() event and mouse click() event is used in the following
program.
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<style type="text/css">
.Highlightgridrowsonclick
{
background-color: green;
cursor: pointer;
}
.Highlightgridrowsonhover
{
background-color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("tr").filter(function () {
return $('td', this).length &&
!$('table', this).length
}).click(function ()
{
$(this).toggleClass('Highlightgridrowsonclick');
});
$("#GridView1 tr").mouseover(function () {
$(this).addClass("Highlightgridrowsonhover");
});
$("#GridView1 tr").mouseout(function () {
$(this).removeClass("Highlightgridrowsonhover");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</div>
</form>
</body>
</html>
Code Behind
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection con = new SqlConnection("Data Source=----;Initial
Catalog=dbname;User ID=uid;Password=pwd;");
SqlCommand cmd = new SqlCommand("select * from sample", con);
DataSet ds = new DataSet();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(ds);
GridView1.DataSource = ds;
GridView1.DataBind();
}
Highlight a row in gridview using Jquery, Highlight
gridview row on mousehover using Jquery, Jquery Highlight gridview row,
Highlight row on mouseover using css and Jquery, Highlight gridview selected
row, Highlight gridview row by clicking anywhere in the row, Select row
on mouse click in gridview, Select row in gridview on click
No comments:
Post a Comment