Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • World
  • Users
  • Groups
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Code Project
CODE PROJECT For Those Who Code
  • Home
  • Articles
  • FAQ
Community
  1. Home
  2. Web Development
  3. ASP.NET
  4. How can I display a pop-up when hovering over a Gridview row?

How can I display a pop-up when hovering over a Gridview row?

Scheduled Pinned Locked Moved ASP.NET
questioncssalgorithmscareer
22 Posts 3 Posters 3 Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • J JTRizos

    Thanx Parwej, I tried this and the alerts do not pop up. Something does flash on the screen so I am guessing it might be the alerts. The JScript message pops up when I hover over a row and in the source the correct onmouseover and onmouseout are highlighted for the correct row. So I think I am close. I should explain I am testing this using the Debug in Visual Studio 2008. I'll keep trying to get this to work. Thanx for your prompt reply.

    P Offline
    P Offline
    Parwej Ahamad
    wrote on last edited by
    #10

    Hi, alert should popup so write those alerts before the all statement. I believe issue is with those statement. For testing purpose show the tool tip without setting the x, and y. See what's happened. Please test it on different browser. If you can share your screen on TeamViewer then I can help you and see what's going on.

    Parwej Ahamad ahamad.parwej@gmail.com

    J 1 Reply Last reply
    0
    • P Parwej Ahamad

      Hi, alert should popup so write those alerts before the all statement. I believe issue is with those statement. For testing purpose show the tool tip without setting the x, and y. See what's happened. Please test it on different browser. If you can share your screen on TeamViewer then I can help you and see what's going on.

      Parwej Ahamad ahamad.parwej@gmail.com

      J Offline
      J Offline
      JTRizos
      wrote on last edited by
      #11

      I took out everything from the JScript except the document.getElementByID statements and still get the JScript runtime error when I hover over a row. The error occurs on ShowToolTip and HideToolTip. I did notice that I get the "Nothing to report " message from the .aspx.cs code if statement. Not sure why. I am using IE 8 which is standard for the department and am not sure how to test this without VS 2008 or without placing it in the live environment. I've never used TeamViewer and I doubt it would work due to the firewalls used here. The app I am working on will be internal to our department. Sorry I cannot be more helpful.

      P 1 Reply Last reply
      0
      • J JTRizos

        I took out everything from the JScript except the document.getElementByID statements and still get the JScript runtime error when I hover over a row. The error occurs on ShowToolTip and HideToolTip. I did notice that I get the "Nothing to report " message from the .aspx.cs code if statement. Not sure why. I am using IE 8 which is standard for the department and am not sure how to test this without VS 2008 or without placing it in the live environment. I've never used TeamViewer and I doubt it would work due to the firewalls used here. The app I am working on will be internal to our department. Sorry I cannot be more helpful.

        P Offline
        P Offline
        Parwej Ahamad
        wrote on last edited by
        #12

        Ok, Do step by step : First comment your existing code then test with simple alert and let me know the status that you are getting alert or not:

        public void gvRoles_RowDataBound(object sender, GridViewRowEventArgs e)
        {
        if ( e.Row.RowType == DataControlRowType.DataRow )
        {
        e.Row.Attributes.Add("onmouseover", "alert('Display some message');");
        }

         /\*   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();");
            }
            else
            {
                lblError.Text = "Nothing to report ";
            } \*/
        

        }

        Parwej Ahamad ahamad.parwej@gmail.com

        J 1 Reply Last reply
        0
        • P Parwej Ahamad

          Ok, Do step by step : First comment your existing code then test with simple alert and let me know the status that you are getting alert or not:

          public void gvRoles_RowDataBound(object sender, GridViewRowEventArgs e)
          {
          if ( e.Row.RowType == DataControlRowType.DataRow )
          {
          e.Row.Attributes.Add("onmouseover", "alert('Display some message');");
          }

           /\*   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();");
              }
              else
              {
                  lblError.Text = "Nothing to report ";
              } \*/
          

          }

          Parwej Ahamad ahamad.parwej@gmail.com

          J Offline
          J Offline
          JTRizos
          wrote on last edited by
          #13

          It works. I get the alert message each time I hover over a row.

          P 1 Reply Last reply
          0
          • J JTRizos

            It works. I get the alert message each time I hover over a row.

            P Offline
            P Offline
            Parwej Ahamad
            wrote on last edited by
            #14

            Good Start :) Now change your code and test with your method:

            //Javascript Method
            function ShowTooltip(message)
            {
            alert(message);
            /* document.getElementById("td0").innerText=LName;
            document.getElementById("td1").innerText=FName;
            document.getElementById("td2").innerText=JUDesc;
            document.getElementById("td3").innerText=JTDesc;
            x=event.clientX + document.body.scrollLeft;
            y=event.clientY + document.body.scrollTop + 10;
            Popup.style.display="block";
            Popup.style.left=x;
            Popup.style.top=y;*/
            }

            //Row bound event
            e.Row.Attributes.Add("onmouseover", "ShowTooltip('Passed Test Message');");

            Parwej Ahamad ahamad.parwej@gmail.com

            J 1 Reply Last reply
            0
            • P Parwej Ahamad

              Good Start :) Now change your code and test with your method:

              //Javascript Method
              function ShowTooltip(message)
              {
              alert(message);
              /* document.getElementById("td0").innerText=LName;
              document.getElementById("td1").innerText=FName;
              document.getElementById("td2").innerText=JUDesc;
              document.getElementById("td3").innerText=JTDesc;
              x=event.clientX + document.body.scrollLeft;
              y=event.clientY + document.body.scrollTop + 10;
              Popup.style.display="block";
              Popup.style.left=x;
              Popup.style.top=y;*/
              }

              //Row bound event
              e.Row.Attributes.Add("onmouseover", "ShowTooltip('Passed Test Message');");

              Parwej Ahamad ahamad.parwej@gmail.com

              J Offline
              J Offline
              JTRizos
              wrote on last edited by
              #15

              Tried this and got the "JScript runtime error:Object expected" message on each row hovered.

              P 2 Replies Last reply
              0
              • J JTRizos

                Tried this and got the "JScript runtime error:Object expected" message on each row hovered.

                P Offline
                P Offline
                Parwej Ahamad
                wrote on last edited by
                #16

                Please go through with this URL: http://social.msdn.microsoft.com/Forums/eu/netfxjscript/thread/eede0ba6-1e1d-4248-98bb-6383839dfac7[^] Do you have any massenger id so we can chat because here it's very hard to communicate this way.

                Parwej Ahamad ahamad.parwej@gmail.com

                J 2 Replies Last reply
                0
                • P Parwej Ahamad

                  Please go through with this URL: http://social.msdn.microsoft.com/Forums/eu/netfxjscript/thread/eede0ba6-1e1d-4248-98bb-6383839dfac7[^] Do you have any massenger id so we can chat because here it's very hard to communicate this way.

                  Parwej Ahamad ahamad.parwej@gmail.com

                  J Offline
                  J Offline
                  JTRizos
                  wrote on last edited by
                  #17

                  Agreed but I don't have a messenger here. I changed the and the ShowTooltip(message) worked. No runtime error. However, when I put the code back to the way it was I don't get the runtime error but I do get a webpage message with a number in it. When I press the OK button, it goes through a series of three messages having different numbers as I press OK after each one. Hovering over a row starts the series of messages over again. Any idea? I know this is abstract and you probably have better things to do but you have been a big help.</x-turndown>

                  1 Reply Last reply
                  0
                  • J JTRizos

                    Tried this and got the "JScript runtime error:Object expected" message on each row hovered.

                    P Offline
                    P Offline
                    Parwej Ahamad
                    wrote on last edited by
                    #18

                    Your last message is broken so send me direct email with your last message on my person id: ahamad.parwej@gmail.com

                    Parwej Ahamad ahamad.parwej@gmail.com

                    1 Reply Last reply
                    0
                    • P Parwej Ahamad

                      Please go through with this URL: http://social.msdn.microsoft.com/Forums/eu/netfxjscript/thread/eede0ba6-1e1d-4248-98bb-6383839dfac7[^] Do you have any massenger id so we can chat because here it's very hard to communicate this way.

                      Parwej Ahamad ahamad.parwej@gmail.com

                      J Offline
                      J Offline
                      JTRizos
                      wrote on last edited by
                      #19

                      I'll try this again I changed the "" to "<script type="text/javascript">" and I do not get the runtime error anymore for the ShowTooltip(message). So, I changed it back to the original code and no longer get the runtime error. However, I get a webpage message window with a number in it. Pressing OK brings up another webpage message with another number in it. This happens about 3 times. Hovering over a row restarts this series of messages with a different number in each. Any ideas? I know this is abstract but you have been a big help on this. I do not have a messenger here and I know this is cumbersome.</x-turndown>

                      P 1 Reply Last reply
                      0
                      • J JTRizos

                        I'll try this again I changed the "" to "<script type="text/javascript">" and I do not get the runtime error anymore for the ShowTooltip(message). So, I changed it back to the original code and no longer get the runtime error. However, I get a webpage message window with a number in it. Pressing OK brings up another webpage message with another number in it. This happens about 3 times. Hovering over a row restarts this series of messages with a different number in each. Any ideas? I know this is abstract but you have been a big help on this. I do not have a messenger here and I know this is cumbersome.</x-turndown>

                        P Offline
                        P Offline
                        Parwej Ahamad
                        wrote on last edited by
                        #20

                        Can you send me print screen of that error message so I can take a look?

                        Parwej Ahamad ahamad.parwej@gmail.com

                        1 Reply Last reply
                        0
                        • J JTRizos

                          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. :~

                          J Offline
                          J Offline
                          JTRizos
                          wrote on last edited by
                          #21

                          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

                          P 1 Reply Last reply
                          0
                          • J JTRizos

                            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

                            P Offline
                            P Offline
                            Parwej Ahamad
                            wrote on last edited by
                            #22

                            Thanks, You will be always resolved your issue with this forum.

                            Parwej Ahamad ahamad.parwej@gmail.com

                            1 Reply Last reply
                            0
                            Reply
                            • Reply as topic
                            Log in to reply
                            • Oldest to Newest
                            • Newest to Oldest
                            • Most Votes


                            • Login

                            • Don't have an account? Register

                            • Login or register to search.
                            • First post
                              Last post
                            0
                            • Categories
                            • Recent
                            • Tags
                            • Popular
                            • World
                            • Users
                            • Groups