How can I display a pop-up when hovering over a Gridview row?
-
I have a Gridview application that displays up to 80+ columns showing the various roles a user can have. The first few columns identify the user by name, dept, and job title followed by the various roles each can have, A "Yes" or "No" in a column indicates whether the user has that role. As can be expected, horizontal scrolling means that at some point the columns identifying the user are no longer seen and one gets a grid of Yes and Nos. BTW, the reason this format is desired is so managers and supervisors can compare users and the roles assigned. As a result, sorting by the columns is important. I looked into freezing the left most columns but can't find a solution that will work and still allow sorting by any column. So, I would like to provide a pop-up that displays the user's identity information when one hovers over a row. I have many possibilites but they use Ajax or have a button in a column to click. Is this possible? I reviewed lots of articles on this website plus other websites and have not found what I am looking for. I have tried a few things but they do not do what I would like them to do. So, I thought I would ask. Thanx in advance. :~
With help from this forum (Thanx Parwej Ahamad) I got what I needed. I am including the code here in case it can help others. The application has 119 columns and this Popup displays the employee name, job unit and job description by hovering over any row as the user scrolls horizontally. This was based on A Simple DataGrid Row Tooltip For Beginners.[^] .aspx
<!-- Script and Div to set up the Popup with Employee Info -->
<script type="text/javascript">
function ShowTooltip(LName,FName,JUDesc,JTDesc)
{
document.getElementById("td0").innerText=LName;
document.getElementById("td1").innerText=FName;
document.getElementById("td2").innerText=JUDesc;
document.getElementById("td3").innerText=JTDesc;
x=event.clientX + document.documentElement.scrollLeft;
y=event.clientY + document.documentElement.scrollTop + 5;
Popup.style.display="block";
Popup.style.left=x;
Popup.style.top=y;
}function HideToolTip() { Popup.style.display="none"; }</script>
<div id="Popup" class ="transparent">
<div style="BACKGROUND-COLOR:#003366"><center><b>Employee Info</b></center></div>
<div>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="td0" align="left"></td>
</tr>
<tr>
<td id="td1" align="left"></td>
</tr>
<tr>
<td id="td2" align="left"></td>
</tr>
<tr>
<td id="td3" align="left"></td>
</tr>
</table>
</div>
</div>.aspx.cs
/* Code for Popup with Employee Info */
public void gvRoles_RowDataBound(object sender, GridViewRowEve -
With help from this forum (Thanx Parwej Ahamad) I got what I needed. I am including the code here in case it can help others. The application has 119 columns and this Popup displays the employee name, job unit and job description by hovering over any row as the user scrolls horizontally. This was based on A Simple DataGrid Row Tooltip For Beginners.[^] .aspx
<!-- Script and Div to set up the Popup with Employee Info -->
<script type="text/javascript">
function ShowTooltip(LName,FName,JUDesc,JTDesc)
{
document.getElementById("td0").innerText=LName;
document.getElementById("td1").innerText=FName;
document.getElementById("td2").innerText=JUDesc;
document.getElementById("td3").innerText=JTDesc;
x=event.clientX + document.documentElement.scrollLeft;
y=event.clientY + document.documentElement.scrollTop + 5;
Popup.style.display="block";
Popup.style.left=x;
Popup.style.top=y;
}function HideToolTip() { Popup.style.display="none"; }</script>
<div id="Popup" class ="transparent">
<div style="BACKGROUND-COLOR:#003366"><center><b>Employee Info</b></center></div>
<div>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="td0" align="left"></td>
</tr>
<tr>
<td id="td1" align="left"></td>
</tr>
<tr>
<td id="td2" align="left"></td>
</tr>
<tr>
<td id="td3" align="left"></td>
</tr>
</table>
</div>
</div>.aspx.cs
/* Code for Popup with Employee Info */
public void gvRoles_RowDataBound(object sender, GridViewRowEveThanks, You will be always resolved your issue with this forum.
Parwej Ahamad ahamad.parwej@gmail.com