In this article I will explain how
to highlight GridView rows on
Mouseover and Mouseout in ASP.NET using JavaScript.
In my previous article I explained how to insert, update, Delete in gridview and Upload Images in gridview and
Upload files & Download in gridview. In the present article I got the
requirement like change GridView rows color based on Mouseover and Mouseout
using asp.net for that I used JavaScript functionality to handle onmouseover
and onmouseout situations.
First we need to establish a connection in
Web.config file.
<connectionStrings>
<add name="connectionString" connectionString="Data Source=LocalHost;uid=sa1;password=Con@123;Initial Catalog=practice"/>
</connectionStrings>
JavaScript
code for MouseOver and MouseOut event code:
<script type="text/javascript">
var Priviousgridcolor;
function
GridMouseOver(element) {
Priviousgridcolor = element.style.backgroundColor;
element.style.backgroundColor = '#C0C0C0';
element.style.cursor = 'pointer';
}
function
GridMouseOut(element) {
element.style.backgroundColor = Priviousgridcolor;
element.style.textDecoration = 'none';
}
</script>
Below is the page
design.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.gvColours {
font-family: Arial;
font-size: 10pt;
font-weight: normal;
color: white;
}
</style>
<script type="text/javascript">
var Priviousgridcolor;
function
GridMouseOver(element) {
Priviousgridcolor = element.style.backgroundColor;
element.style.backgroundColor = '#C0C0C0';
element.style.cursor = 'pointer';
}
function
GridMouseOut(element) {
element.style.backgroundColor = Priviousgridcolor;
element.style.textDecoration = 'none';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView runat="server" ID="gvFileDetails" AutoGenerateColumns="false" DataKeyNames="FileUrl"
CssClass="gvColours" Width="500px" HeaderStyle-BackColor="Maroon" OnRowDataBound="gvFileDetails_RowDataBound">
<Columns>
<asp:BoundField DataField="FileID" HeaderText="Id" ItemStyle-ForeColor="Black" />
<asp:BoundField DataField="FileName" HeaderText="FileName" ItemStyle-ForeColor="Black" />
<asp:TemplateField HeaderText="FilePath">
<ItemTemplate>
<asp:LinkButton ID="lnkAttachment" runat="server" Text="Attachment"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</form>
</body>
</html>
Just Design:
Below is the total code for MouseOver and
MouseOut events in GridView
using
System;
using
System.Configuration;
using
System.Data;
using
System.Data.SqlClient;
using
System.Web.UI.WebControls;
public partial class ChangeGridViewRowColor : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ToString());
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindFileInfoToGrid();
}
}
// Bind Data to Gridview use DataSet
private void BindFileInfoToGrid()
{
con.Open();
SqlCommand
cmd = new SqlCommand("select * from FileDetails", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet
dsFileInfo = new DataSet();
da.Fill(dsFileInfo);
con.Close();
gvFileDetails.DataSource = dsFileInfo;
gvFileDetails.DataBind();
}
//I written two events in gridview
row databound condition by using those conditions we can //handle gridview
onmouseover and onmouseout events with JavaScript
protected void gvFileDetails_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onmouseover"] = "javascript:GridMouseOver(this)";
e.Row.Attributes["onmouseout"] = "javascript:GridMouseOut(this)";
}
}
}
Output:
No comments:
Post a Comment