Home > ASP.Net > Show DIV on each GridView Row MouseOver in Asp.Net

Show DIV on each GridView Row MouseOver in Asp.Net


Hi all,

try this example to Show DIV on each GridView Row MouseOver in Asp.Net

1) Open SQL Server and create new database name it “TestDB” and create new table name it “EmployeeDetails” with the following columns

EmployeeDetailsTB

 

2) Open VS 2008 and create a new web Site

3) Add Connection String in Web.Config file


<connectionStrings>
 <add name="conn" connectionString="Data Source=.;Initial Catalog=TestDB;Integrated Security=True"/>
</connectionStrings>

4) Add new Web Page and from Toolbox drag and drop Gridview control


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 iRowIndex; // THE ROW INDEX OF THE GRIDVIEW, TO KEEP THE ROW HIGHLIGHTING
 // WHEN THE MOUSE IS ON ANOTHER CONTROL.
 function MouseEvents(objRef, evt, desc) {
 if (evt.type == "mouseover") {
 objRef.style.cursor = 'pointer'
 objRef.style.backgroundColor = "#EEE";
 ShowDiv(desc, evt.pageY);
 }
 else {
 objRef.style.backgroundColor = "#FFF";
 iRowIndex = objRef.rowIndex;
 HideDiv();
 }
 }
 function ShowDiv(desc, pos) {
 // SHOW THE DIV WITH DESCRIPTIONS NEXT TO THE SELECTED GRIDVIEW ROW.
 document.getElementById('divDetail').style.display = 'block';
 document.getElementById('divDetail').innerHTML = desc;
 document.getElementById('divDetail').style.marginTop = pos - 25 + 'px';
 }
 function HideDiv() {
 document.getElementById('divDetail').style.display = 'none';
 }
 function highlight(objRef, evt) {
 if (evt.type == "mouseover") {
 objRef.style.display = 'block';
 document.getElementById('gvEmployee').rows[iRowIndex].style.backgroundColor = "#EEE";
 }
 else {
 if (evt.type == "mouseout") {
 document.getElementById('gvEmployee').rows[iRowIndex].style.backgroundColor = "#FFF";
 objRef.style.display = 'none';
 }
 }
 }
 </script>
 <style type="text/css">
 body
 {
 font: 16px Sans-Serif;
 }
 h3
 {
 font: inherit;
 font-weight: bold;
 background-color: #FFF;
 color: #5A7A9B;
 text-align: center;
 }
 #divDetail
 {
 float: left;
 font: 12px Sans-Serif;
 padding: 5px;
 width: 250px;
 border: solid 2px #CCC;
 -moz-border-radius: 0 7px 7px 0;
 -webkit-border-radius: 0 7px 7px 0;
 border-radius: 0 7px 7px 0;
 display: none;
 color: #444;
 }
 #divDetail p
 {
 font: inherit;
 }
 #divDetail a
 {
 font: inherit;
 float: right;
 background-color: #357AE8;
 color: #FFF;
 text-decoration: none;
 border: solid 1px #2F5BB7;
 border-radius: 3px;
 -moz-border-radius: 3px;
 -webkit-border-radius: 3px;
 padding: 3px;
 }
 </style>
</head>
<body>
 <form id="form1" runat="server">
 <div id="divGrid" style="width: auto; float: left">
 <h3>
 LIST OF EMPLOYEES</h3>
 <%--THE DATABOUND GRIDVIEW CONTROL.--%>
 <asp:GridView ID="gvEmployee" Font-Names="Arial" Font-Size="0.75em" AutoGenerateColumns="False"
 CellPadding="3" runat="server" BorderColor="GrayText" OnRowDataBound="gvEmployee_RowDataBound">
 <Columns>
 <asp:BoundField DataField="EmpID" HeaderText="Code" />
 <asp:BoundField DataField="EmpName" HeaderText="Name" />
 <asp:BoundField DataField="Country" HeaderText="Country" />
 <asp:BoundField DataField="Email" HeaderText="Email Address" />
 </Columns>
 <HeaderStyle BackColor="Black" ForeColor="white" />
 </asp:GridView>
 </div>
 <%--THE FLOATING DIV TO SHOW EMPLOYEE DETAILS.--%>
 <div runat="server" id="divDetail" onmouseover="highlight(this, event)" onmouseout="highlight(this, event)">
 </div>
 </form>
</body>
</html>

In Code behind add the following code


SqlConnection myConn = default(SqlConnection);
 SqlCommand sqComm = default(SqlCommand);

protected void Page_Load(object sender, EventArgs e)
 {
 if (!IsPostBack)
 {
 if (setConn())
 {
 SqlDataReader sdrEmp = GetDataReader("SELECT EmpID, EmpName,Country, Email FROM dbo.EmployeeDetails");
 if (sdrEmp.HasRows)
 {
 DataTable dtEmp = new DataTable();
 dtEmp.Load(sdrEmp);
 gvEmployee.DataSource = dtEmp; // BIND DATABASE WITH THE GRIDVIEW.
 gvEmployee.DataBind();
 }
 }
 }
 }

private bool setConn()
 {
 // SET DATABASE CONNECTION.
 try
 {
 myConn = new SqlConnection(ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
 myConn.Open();
 sqComm = new SqlCommand();
 sqComm.Connection = myConn;
 }
 catch (Exception ex)
 {
 return false;
 }
 return true;
 }

// SQLDATAREADER, TO FETCH DATA.
 private SqlDataReader GetDataReader(string sQuery)
 {
 SqlDataReader functionReturnValue = default(SqlDataReader);
 sqComm.CommandText = sQuery;
 sqComm.ExecuteNonQuery();
 functionReturnValue = sqComm.ExecuteReader();
 sqComm.Dispose();
 return functionReturnValue;
 }

protected void gvEmployee_RowDataBound(object sender, GridViewRowEventArgs e)
 {
 // BIND DATA WITH EACH ROW.
 if (e.Row.RowType == DataControlRowType.DataRow)
 {
 String sDetails = System.String.Empty;
 sDetails = "<span><h3>OTHER DETAILS</h3></span>";
 SqlDataReader sdrEmpDet = GetDataReader("SELECT PresentAddress, Area, City " +
 "FROM dbo.EmployeeDetails WHERE EmpID = " +
 DataBinder.Eval(e.Row.DataItem, "EmpID").ToString());
 try
 {
 if (sdrEmpDet.Read())
 {
 sDetails = sDetails + "<p><strong>Employee Code: </strong>" + DataBinder.Eval(e.Row.DataItem, "EmpID").ToString() + "</p>";
 sDetails = sDetails + "<p><strong>Present Address: </strong>" + sdrEmpDet["PresentAddress"] + "</p>";
 sDetails = sDetails + "<p><strong>Area: </strong>" + sdrEmpDet["Area"] + "</p>";
 sDetails = sDetails + "<p><strong>City: </strong>" + sdrEmpDet["City"] + "</p>";
 sDetails = sDetails + "<a href=?id=" + DataBinder.Eval(e.Row.DataItem, "EmpID").ToString() + " title=Send Mail>Send Mail</a>";
 // BIND MOUSE EVENT (TO CALL JAVASCRIPT FUNCTION), WITH EACH ROW OF THE GRID.
 e.Row.Attributes.Add("onmouseover", "MouseEvents(this, event, '" + sDetails + "')");
 e.Row.Attributes.Add("onmouseout", "MouseEvents(this, event, '" + DataBinder.Eval(e.Row.DataItem, "EmpID").ToString() + "')");
 }
 }
 catch (Exception ex)
 { }
 finally
 {
 sdrEmpDet.Close();
 sdrEmpDet = null;
 }
 }
 }

Hope this helps

Good Luck.

Advertisements
Categories: ASP.Net
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: