Design Page
css
<style type="text/css">
body
{
font-family:Arial, Tahoma;
font-size:15px;
}
.grid
{
width:100%;
font:inherit;
background-color:#FFF;
border:solid 1px #525252;
}
.grid td
{
font:inherit;
padding:3px 5px;
border:solid 1px #C1C1C1;
color:#333;
text-align:left;
}
.grid th
{
padding:3px;
color:#FFF;
background:#424242;
border-left:solid 1px #525252;
font:inherit;
text-align:center;
text-transform:uppercase;
}
h3
{
color:#000;
text-decoration:underline;
}
#divDetail
{
float:left;
font:inherit;
font-size:13px;
padding:2px 5px;
width:auto;
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:#333;
}
#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>
Script
<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>
Design
<div id="divGrid" style="width:auto; float:left">
<h3>LIST OF EMPLOYEES</h3>
<%--THE DATABOUND GRIDVIEW CONTROL.--%>
<asp:GridView ID="gvEmployee" AutoGenerateColumns="False" OnRowDataBound ="gvEmployee_RowDataBound"
CssClass="grid" GridLines="None"
cellpadding="3" runat="server">
<Columns>
<asp:BoundField DataField="StateId" HeaderText="Code" />
<asp:BoundField DataField="StateName" HeaderText="Name" />
</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>
Code Page
protected void Page_Load(object sender, EventArgs e)
{
string constr = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
SqlConnection con = new SqlConnection(constr);
SqlDataAdapter da = new SqlDataAdapter("select StateId, StateName from StateMaster", con);
DataTable dt = new DataTable();
da.Fill(dt);
gvEmployee.DataSource = dt;
gvEmployee.DataBind();
}
protected void gvEmployee_RowDataBound(object sender, System.Web.UI.WebControls.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>";
string constr = ConfigurationManager.ConnectionStrings["DBConnection"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("select * from CityMaster WHERE StateId = " +
DataBinder.Eval(e.Row.DataItem, "StateId").ToString()))
{
SqlDataAdapter sda = new SqlDataAdapter();
try
{
cmd.Connection = con;
con.Open();
sda.SelectCommand = cmd;
DataTable dt = new DataTable();
sda.Fill(dt);
if (dt.Rows.Count > 0)
{
sDetails = sDetails + "<p><strong>City Code: </strong>" +
dt.Rows[0]["CityCode"] + "</p>";
sDetails = sDetails + "<p><strong>City Name: </strong>" +
dt.Rows[0]["CityName"] + "</p>";
// 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, "StateId").ToString() + "')");
}
}
catch (Exception ex)
{
}
}
}
}
}
OUTPUT
