DotNet: Highlight asp.net gridview rows on mouseover using JavaScript

Sunday, 11 November 2012

Highlight asp.net gridview rows on mouseover using JavaScript

Here I explained how to highlight grid view rows based on mouse over and mouse out using JavaScript in asp.net.
Create Database SampleDatabase;
create table Employee
(
RowId int Primary key identity(1,1),
EmpId int ,
EmpNam Varchar(50),
Empdesig varchar(50),
EmpGender Varchar(10),
Empcity Varchar(30),
EmpState Varchar(30),
EmpCountry Varchar(30),
EmpSalary int,
EmpDoj varchar(50)
)
insert into employee values(1000,'sajil','S/W Engineer','Male','Chennai','TamilNadu','India',10000,'10/12/2012')
insert into employee values(1002,'sanil','IQC','Male','Chennai','TamilNadu','India',6000,'05/12/2012')
insert into employee values(1003,'vino','Manager','Male','Chennai','TamilNadu','India',16000,'05/12/2012')
insert into employee values(1004,'viji','supervisor','Female','Chennai','TamilNadu','India ',5000, '07/11/2012')
insert into employee values(1005,'vimal','S/W Engineer','Male','Chennai','TamilNadu','India',6000,'09/11/2012')

Aspx Page<%@ Page Language="C#" AutoEventWireup="true" CodeFile="HighlightGridRow.aspx.cs"
Inherits="HighlightGridRow" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
var oldgridcolor;
function SetMouseOver(element) {
oldgridcolor = element.style.backgroundColor;
element.style.backgroundColor = '#B2C2D1';

}
function SetMouseOut(element) {
element.style.backgroundColor = oldgridcolor;
element.style.textDecoration = 'none';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<asp:GridView runat="server" ID="gvrecords" AutoGenerateColumns="False" HeaderStyle-BackColor="#7779AF"
HeaderStyle-ForeColor="White" OnRowDataBound="gvrecords_RowDataBound"
BackColor="White" BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px"
CellPadding="4">
<Columns>
<asp:BoundField DataField="EmpId" HeaderText="EmployeeId" />
<asp:BoundField DataField="EmpNam" HeaderText="EmployeeName" />
<asp:BoundField DataField="Empdesig" HeaderText="EmployeeDesignation" />
<asp:BoundField DataField="EmpGender" HeaderText="EmployeeGender" />
<asp:BoundField DataField="Empcity" HeaderText="EmployeeCity" />
<asp:BoundField DataField="EmpState" HeaderText="EmployeeState" />
<asp:BoundField DataField="EmpCountry" HeaderText="EmployeeCounty" />
<asp:BoundField DataField="EmpSalary" HeaderText="EmployeeSalary" />
<asp:BoundField DataField="EmpDoj" HeaderText="EmployeeDOJ" />
</Columns>
<FooterStyle BackColor="#99CCCC" ForeColor="#003399" />
<HeaderStyle BackColor="#003399" ForeColor="#CCCCFF" Font-Bold="True"></HeaderStyle>
<PagerStyle BackColor="#99CCCC" ForeColor="#003399" HorizontalAlign="Left" />
<RowStyle BackColor="White" ForeColor="#003399" />
<SelectedRowStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<SortedAscendingCellStyle BackColor="#EDF6F6" />
<SortedAscendingHeaderStyle BackColor="#0D4AC4" />
<SortedDescendingCellStyle BackColor="#D6DFDF" />
<SortedDescendingHeaderStyle BackColor="#002876" />
</asp:GridView>
</div>
</div>
</form>
</body>
</html>
Cs Pageusing System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
public partial class HighlightGridRow : System.Web.UI.Page
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Connection"].ToString());
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindGridview();
}
}
protected void gvrecords_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onmouseover"] = "javascript:SetMouseOver(this)";
e.Row.Attributes["onmouseout"] = "javascript:SetMouseOut(this)";
}
}
protected void BindGridview()
{

con.Open();
SqlCommand cmd = new SqlCommand("select * from Employee", con);
cmd.ExecuteNonQuery();
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
gvrecords.DataSource = ds;
gvrecords.DataBind();
}
}

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)