locked
Opening a pop up on button click and loading a grid in the popup. RRS feed

  • Question

  • User-356829294 posted

    Hi,

    I am trying to open a popup on the click of a button and pop up will have a grid view and the data for grid view needs to flow from the caller window.

    What is the best approach to achieve this without posting back to the caller window.

    Thanks

    Vinod

    Wednesday, January 17, 2018 1:43 PM

All replies

  • User-492460945 posted

    Hello vsinghal7,

    You better go with AJAX Modalpopupextender. It is simple for a popup window and you can load your required data in gridview.

    Thanks,

    Rajesh

    Wednesday, January 17, 2018 1:52 PM
  • User61956409 posted

    Hi Vinod,

    You can refer to the following sample code to display your GridView in Modal Popup Window.

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
        <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/start/jquery-ui.css" rel="stylesheet" type="text/css" />
        <script>
            function showfunc() {
                $("#dialog").dialog({
                    title: "GridView",
                    width: 450,
                    buttons: {
                        Ok: function () {
                            $(this).dialog('close');
                        }
                    },
                    modal: true
                });
    
                return false;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:Button ID="btnshow" runat="server" Text="Show Popup" OnClientClick="return showfunc()" />
    
                <div id="dialog" style="display: none">
                    <asp:GridView ID="mygrid" runat="server"></asp:GridView>
                </div>
            </div>
        </form>
    </body>
    </html>

    Test result:

    Besides, as Rajesh mentioned, you can also use ajaxcontroltoolkit ModalPopupExtender to display Modal Popup Window.  

    With Regards,

    Fei Han

    Thursday, January 18, 2018 9:08 AM