Click here to Skip to main content
16,020,990 members
Home / Discussions / ASP.NET
   

ASP.NET

 
GeneralRe: How can I display a pop-up when hovering over a Gridview row? Pin
Parwej Ahamad12-Jan-11 8:24
professionalParwej Ahamad12-Jan-11 8:24 
GeneralRe: How can I display a pop-up when hovering over a Gridview row? Pin
JTRizos12-Jan-11 8:35
JTRizos12-Jan-11 8:35 
GeneralRe: How can I display a pop-up when hovering over a Gridview row? Pin
Parwej Ahamad12-Jan-11 8:43
professionalParwej Ahamad12-Jan-11 8:43 
GeneralRe: How can I display a pop-up when hovering over a Gridview row? Pin
JTRizos12-Jan-11 8:59
JTRizos12-Jan-11 8:59 
GeneralRe: How can I display a pop-up when hovering over a Gridview row? Pin
JTRizos12-Jan-11 9:08
JTRizos12-Jan-11 9:08 
GeneralRe: How can I display a pop-up when hovering over a Gridview row? Pin
Parwej Ahamad12-Jan-11 9:12
professionalParwej Ahamad12-Jan-11 9:12 
GeneralRe: How can I display a pop-up when hovering over a Gridview row? Pin
Parwej Ahamad12-Jan-11 9:05
professionalParwej Ahamad12-Jan-11 9:05 
AnswerRe: How can I display a pop-up when hovering over a Gridview row? Resolved Pin
JTRizos12-Jan-11 12:22
JTRizos12-Jan-11 12:22 
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, GridViewRowEventArgs e)
   {
       if (e.Row.DataItem != null)
       {
           e.Row.Attributes.Add("onmouseover", "ShowTooltip('" +
               DataBinder.Eval(e.Row.DataItem, "EmployeeNameLast").ToString() + "','" +
               DataBinder.Eval(e.Row.DataItem, "EmployeeNameFirst").ToString() + "','" +
               DataBinder.Eval(e.Row.DataItem, "JobUnitDescription").ToString() + "','" +
               DataBinder.Eval(e.Row.DataItem, "JobTitleDescription").ToString() + "');");
           e.Row.Attributes.Add("onmouseout", "HideToolTip();");
       }
   }


style.css

.transparent { BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; DISPLAY: none; FILTER: alpha(opacity=80); BORDER-LEFT: black 1px solid; WIDTH: 180px; COLOR: white; BORDER-BOTTOM: black 1px solid; POSITION: absolute; HEIGHT: 90px; BACKGROUND-COLOR: blue }

GeneralRe: How can I display a pop-up when hovering over a Gridview row? Resolved Pin
Parwej Ahamad12-Jan-11 19:17
professionalParwej Ahamad12-Jan-11 19:17 
QuestionFindControl("id"); does not work - another alternative? Pin
lvq6844-Jan-11 4:44
lvq6844-Jan-11 4:44 
AnswerRe: FindControl("id"); does not work - another alternative? Pin
Manas Bhardwaj4-Jan-11 5:59
professionalManas Bhardwaj4-Jan-11 5:59 
AnswerRe: FindControl("id"); does not work - another alternative? Pin
Espen Harlinn4-Jan-11 10:53
professionalEspen Harlinn4-Jan-11 10:53 
AnswerRe: FindControl("id"); does not work - another alternative? Pin
DoctorMick5-Jan-11 6:01
DoctorMick5-Jan-11 6:01 
AnswerRe: FindControl("id"); does not work - another alternative? Pin
Not Active5-Jan-11 6:17
mentorNot Active5-Jan-11 6:17 
QuestionProblem with getting control id on drag and drop. Pin
Haider M Rizvi4-Jan-11 1:03
Haider M Rizvi4-Jan-11 1:03 
AnswerRe: Problem with getting control id on drag and drop. Pin
daneroo4-Jan-11 5:14
daneroo4-Jan-11 5:14 
Questionoracle connection problem with Xp-32bit Pin
vijay.victory3-Jan-11 20:03
vijay.victory3-Jan-11 20:03 
QuestionNot Opening File Pin
vishnukamath3-Jan-11 0:57
vishnukamath3-Jan-11 0:57 
AnswerRe: Not Opening File Pin
StianSandberg3-Jan-11 1:37
StianSandberg3-Jan-11 1:37 
AnswerRe: Not Opening File Pin
Not Active3-Jan-11 2:42
mentorNot Active3-Jan-11 2:42 
AnswerRe: Not Opening File Pin
Sunasara Imdadhusen5-Jan-11 0:58
professionalSunasara Imdadhusen5-Jan-11 0:58 
AnswerRe: Not Opening File Pin
rt28006-Jan-11 3:06
professionalrt28006-Jan-11 3:06 
QuestionI want to calculate Number of user who click on banner. Pin
Honeyboy_201-Jan-11 4:43
Honeyboy_201-Jan-11 4:43 
AnswerRe: I want to calculate Number of user who click on banner. Pin
Not Active1-Jan-11 5:16
mentorNot Active1-Jan-11 5:16 
AnswerRe: I want to calculate Number of user who click on banner. Pin
Keith Barrow2-Jan-11 1:18
professionalKeith Barrow2-Jan-11 1:18 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.