John Mendez

I have written a previous post regarding nested modalPopups in GridViews.  You will notice I mention it's and easy and effective way to show notes, or whatever content you want from clicking on a link from within a gridview.  The disadvantage of this method is that however many rows are in your gridview you will have that many modalPopups as well on the page.  This method is nto a full modalPopup but only utilizes one DIV on the page but will handle whatever string, notes, content you want to pass to it by clicking on the link or label from within the gridview.  I will only be pasting the code that is required to make this happen and not all of the code for the entire gridview, just the necessary parts to make it happen.  Again, this is more efficient in the fact you are only using one DIV, but also depends on what your passing into the DIV.  For this example it is just some notes.  This example is in VB.NET, but can be easily be converted to C# as most of the code happens on the client side aspx page. To make this a modal popup just style out the DIV differently and then you won't have to worry about the mouse position.

Code Behind (GridView Row Data Bound Event)

Protected Sub gvTest_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gvTest.RowDataBound

        If e.Row.RowType = DataControlRowType.DataRow Then

            Dim lblNotes As New Label
            lblNotes = CType(e.Row.FindControl("lblShowNotes"), Label)

            If Not lblNotes Is Nothing Then
                If Not e.Row.DataItem("DESCRIPTION") Is System.DBNull.Value Then
                    lblNotes.Attributes.Add("onclick", String.Format("showNotes(""{0}"", event)", e.Row.DataItem("DESCRIPTION")))
                    lblNotes.Text = "Notes"
                Else
                    lblNotes.Text = ""
                End If

            End If

        End If

End Sub

ASPX Page Portion (only the template column within the GridView)

<asp:TemplateField HeaderText="NOTES">
                <ItemTemplate>
                    <asp:Label ID="lblShowNotes" runat="server" Text="Notes" onmouseover="this.style.cursor='pointer'" ForeColor="Blue"></asp:Label>
                </ItemTemplate>
</asp:TemplateField>

DIV below the GridView

<div id="divNote" style="background-color: #cccccc; padding: 5px 5px 5px 5px; width: 200px; position:absolute; border: solid 1px black; visibility:hidden;">       
</div>

Javascript Code (tested in IE7, Firefox 3.0.5 and Safari 3.2.1 for Windows)

<script type="text/javascript">
   
        function showNotes(noteString, e){
       
          
            var posx = 0;
            var posy = 0;
            e = (window.event) ? window.event : e;
            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        
            var finalString = "<strong>NOTES: </strong><span onclick=\"HideNotes()\" onmouseover=\"this.style.cursor='pointer';\" style=\"color: blue;padding-left: 100px\">Close</span><br /><br />"
            finalString += noteString
        
            document.getElementById("divNote").innerHTML = finalString;
            document.getElementById("divNote").style.visibility="visible";
            document.getElementById("divNote").style.top=posy + "px";
            document.getElementById("divNote").style.left=(posx - 250) + "px";

       
        }
       
        function HideNotes(){
                   
             document.getElementById("divNote").innerHTML = "";           
             document.getElementById("divNote").style.visibility = "hidden";       
        }
       
</script>

Good Luck as always let me know if something is wrong or you have a different/better way.

ASP.NET gridview, javascript, asp.net