Gridview to Modal Dialog Detail and Back



Step 1: Setup your gridview’s onClientClick to call the javascript function…



<asp:GridView ID="GridView1" runat="server" Height="107px" Width="754px" AutoGenerateColumns="false">


                     <asp:BoundField DataField="ID_Login" HeaderText="ID" />

                     <asp:BoundField DataField="Name_First" HeaderText="First" />

                     <asp:BoundField DataField="Name_Last" HeaderText="Last" />

                     <asp:BoundField DataField="Login" HeaderText="Login" />




                             <asp:LinkButton ID="lnkSelect" Text="Select" runat="server"   OnClientClick='<%# "DoSomeThingWithThisID(" & Chr(34) & Eval("id_Login") & Chr(34) & ");return false;" %>' />







DoSomethingWithThisID function called by gridview’s “select” link…

function DoSomeThingWithThisID(id_login) {






OpenPage function, calls the jQuery Dialog…

    var MyDialog;

    function OpenPage(sTitle, iHeight, iWidth, PageName,sID) {




        $('head').append('<style type="text/css">.ui-widget-overlay.ui-front {opacity:.75; }</style>');




        MyDialog = $("<div></div>").html("<iframe  id='MyIFrame' style='border: 0px; ' src='" + PageName + "?ID_Login=" + sID + "' width='100%' height='100%'></iframe>")



                buttons: [{ text: "Close 1 (no save)", click: function () { $(this).dialog("close"); } }, { text: "Close 2 (no save)", click: function () { $(this).dialog("close"); } }],

                autoOpen: false,

                modal: true,

                height: iHeight,

                show: { effect: 'slide', duration: 1000 },

                hide: { effect: 'explode', duration: 1000 },

                width: iWidth,

                title: sTitle,

                beforeClose: function (event, ui) { alert('your closing!') }




        // Open without the 'x' on the upper right of the window...




    } //OpenPage Function






CloseIfame function is called by the “Child” page, after the “Child” page processes any data in it’s “code behind”…


  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Response.Write("ID_Login=" & Request.QueryString("id_login"))

    End Sub


    Protected Sub cmdPandC_Click(sender As Object, e As EventArgs) Handles cmdPandC.Click


        'Do some server side processing here..


        'finally close the dialog....

        Dim s As String = "<script>window.parent.closeIframe();</script>"

        ClientScript.RegisterClientScriptBlock(Me.GetType(), "MyKey", s, False)

    End Sub                    



function closeIframe() {


         //This function is called from the Child page,(Detail.aspx), like this:   ClientScript.RegisterClientScriptBlock(Me.GetType(), "MyKey", sScript, False)



        return false;

    } //CloseIframe







The OpenPage function can be called form codebhind like this..


        s = "<script>$( document ).ready(function() {OpenPage('More Info...', 600, 1020, 'MoreInfo.aspx')})</script>"

        RegisterStartupScript("WowOnStartup", s) 'Key MUST be unique