Remove From My Forums

How to open Popup window from gridview edit button.

Question

User-367318540 posted

i am opening webform from button ,which is outside gridview,and Popup window is getting open,but i do not know that how to use same code in gridview on edit button ,and open window and pass pay_ID to that form which will open.

Below is code which i am using to open popup form

   <asp:Button ID="btn_New" runat="server"  Text="New" Width="74px" OnClick="btn_New_Click" />     
               <cc1:modalpopupextender ID="mp1" runat="server"  PopupControlID="Panl3" TargetControlID="btn_New" CancelControlID="btn_close" BackgroundCssClass="Background"> </cc1:modalpopupextender>                        
      
         <asp:Panel ID="Panl3" runat="server" CssClass="Popup" align="left" style = "display:none">
       <asp:Button ID="Button2" runat="server" Text="Close" />
             <iframe  style=" width: 980px; height: 750px;" id="irm1" src="partypy2.aspx" runat="server"></iframe>
             <br/>

</asp:Panel>

Now i want to open same forms from gridview ,but with pass Pay_ID to webform,to retrieve data from database on webform,

<asp:GridView ID="gvpayment" runat="server"  BackColor="White" autogeneratecolumns="false"
                        BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" CssClass="myGridClass" 
                        Font-Names="Arial" GridLines="Horizontal" Height="198px"  style="margin-left: 3px" Width="807px" ShowFooter="True" OnRowDataBound="gvpayment_RowDataBound"
                        OnSelectedIndexChanged="gvpayment_SelectedIndexChanged" AutoGenerateSelectButton="True">
                        <AlternatingRowStyle BackColor="#F7F7F7" />
                        <Columns>
                           
                       <%--      <asp:TemplateField HeaderText="Sr No" HeaderStyle-Width="5%" HeaderStyle-HorizontalAlign="Left">
            <ItemTemplate>
                <%# Container.DataItemIndex + 1 %>
            </ItemTemplate></asp:TemplateField>--%>
                            <asp:BoundField DataField="Pay_ID" ReadOnly="True" HeaderText="ID" />
                    <%--          <asp:TemplateField HeaderText="ID">
                                <ItemTemplate>
                                    <asp:Label ID="Pay_ID" runat="server" Text='<%#Bind("Pay_ID")%>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>--%>
                     
                                                  <asp:TemplateField HeaderText="Party" Visible="true">
                                <ItemTemplate>
                                    <asp:Label ID="Level_Four_Name" runat="server" Text='<%#Bind("Level_Four_Name")%>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                                 <asp:TemplateField HeaderText="Remark" Visible="false">
                                <ItemTemplate>
                                    <asp:Label ID="Pay_Remarks" runat="server" Text='<%#Bind("Pay_Remarks")%>'></asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                        
                            <asp:TemplateField HeaderText="Date">
                                <ItemTemplate>
                                    <asp:Label ID="Pay_Date" runat="server" Text='<%#Bind("Pay_Date")%>'></asp:Label>
                                </ItemTemplate>

                            </asp:TemplateField>
                              <asp:TemplateField HeaderText="Amount">
                                <ItemTemplate>
                                    <asp:Label ID="Pay_Amount" runat="server" Text='<%#Bind("Pay_Amount")%>'></asp:Label>
                                </ItemTemplate>
                                  <FooterTemplate>
                                    <asp:Label ID="lblTotalpay" runat="server"></asp:Label>
                                </FooterTemplate>
                            </asp:TemplateField>
                       
 <asp:TemplateField HeaderText="Edit">
                    <ItemTemplate>
                        <asp:LinkButton ID="Pay_ID" Text='<%#Eval("Pay_ID") %>' runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                          
                               </Columns>
                        <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
                        <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
                        <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
                        <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
                        <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
                        <SortedAscendingCellStyle BackColor="#F4F4FD" />
                        <SortedAscendingHeaderStyle BackColor="#5A4C9D" />
                        <SortedDescendingCellStyle BackColor="#D8D8F0" />
                        <SortedDescendingHeaderStyle BackColor="#3E3277" />
                    </asp:GridView>

Sunday, January 10, 2021 1:44 PM

Answers

User-1330468790 posted

Hi akhterr,

It is not possible to use <asp:LinkButton> in the gridview to work with ModalpopupExtender since it will automatically attached with some webforms framework functions which will trigger a postback.

In another words, directly using LinkButton will break the modalPopup funciton.

I suggest you use <a> tags (or other elements) with js function and manually show and hide the modal.

The way we could pass the parameter is to send the parameter as a query string => append on the url of the iframe element.

More details, you could refer to below codes.

Gridview page:

<form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div>
            
            <asp:GridView ID="gvpayment" runat="server" BackColor="White" AutoGenerateColumns="false"
                BorderColor="#E7E7FF" BorderStyle="None" BorderWidth="1px" CellPadding="3" CssClass="myGridClass"
                Font-Names="Arial" GridLines="Horizontal" Height="198px" Style="margin-left: 3px" Width="807px" ShowFooter="True" OnRowDataBound="gvpayment_RowDataBound"
                OnSelectedIndexChanged="gvpayment_SelectedIndexChanged" AutoGenerateSelectButton="True">
                <AlternatingRowStyle BackColor="#F7F7F7" />
                <Columns>
                    <asp:BoundField DataField="Pay_ID" ReadOnly="True" HeaderText="ID" />
                  

                    <asp:TemplateField HeaderText="Party" Visible="true">
                        <ItemTemplate>
                            <asp:Label ID="Level_Four_Name" runat="server" Text='<%#Bind("Level_Four_Name")%>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                   

                    <asp:TemplateField HeaderText="Edit">
                        <ItemTemplate>
                           
                            <a href="javascript:showModalPopupViaClient('<%# Eval("Pay_ID") %>')" id="showModalPopup"  ><%# Eval("Pay_ID") %></a>
                        </ItemTemplate>
                    </asp:TemplateField>

                </Columns>
                <FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
                <HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
                <PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
                <RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
                <SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
                <SortedAscendingCellStyle BackColor="#F4F4FD" />
                <SortedAscendingHeaderStyle BackColor="#5A4C9D" />
                <SortedDescendingCellStyle BackColor="#D8D8F0" />
                <SortedDescendingHeaderStyle BackColor="#3E3277" />
            </asp:GridView>
            <asp:Label ID="SubmitResult" runat="server"></asp:Label>

        </div>
        <asp:Button ID="btn_New" runat="server" Text="New" Width="74px" OnClick="btn_New_Click" style="display:none"/>
        <cc1:modalpopupextender id="mp1" runat="server" popupcontrolid="Panl3" targetcontrolid="btn_New" cancelcontrolid="btn_close" backgroundcssclass="Background"> </cc1:modalpopupextender>

        <asp:Panel ID="Panl3" runat="server" CssClass="Popup" align="left" Style="display: none">
            <asp:Button ID="btn_close" runat="server" Text="Close" />
            <iframe style="width: 980px; height: 750px;" id="irm1" src="DisplayQueryString.aspx" runat="server"></iframe>
            <br />

        </asp:Panel>
        
        <script type="text/javascript">

            function showModalPopupViaClient(id) {

                $get("<%= irm1.ClientID%>").src = "DisplayQueryString.aspx?id=" + id;

                // This $find() function is not a jquery related stuff but a MicrosoftAjax.js defined global function
                var modalPopupBehavior = $find('mp1');
                modalPopupBehavior.show();
            }


        </script>
    </form>

Gridview Code behind:

        // Simulation of the data
        private static DataTable _gridviewDT;
        public static DataTable GridviewDT
        {
            get
            {
                if (_gridviewDT is null)
                {
                    _gridviewDT = new DataTable();

                    _gridviewDT.Columns.Add("Pay_ID", typeof(int));
                    _gridviewDT.Columns.Add("Level_Four_Name", typeof(string));

                    _gridviewDT.Rows.Add(1, "name1");
                    _gridviewDT.Rows.Add(2, "name2");
                    _gridviewDT.Rows.Add(3, "name3");
                    _gridviewDT.Rows.Add(4, "name4");
                    _gridviewDT.Rows.Add(5, "name5");

                }

                return _gridviewDT;
            }
            set
            {
                _gridviewDT = value;
            }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                gvpayment.DataSource = GridviewDT;
                gvpayment.DataBind();
            }
        }

DisplayQueryString page (show the passing parameter):

  <form id="form1" runat="server">
        <div>
            <asp:Label ID="ForQueryString" runat="server" Text="Query String Is: "></asp:Label>
            <asp:Label ID="QueryStringLbl" runat="server"></asp:Label>
        </div>
    </form>

Code behind:

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                if (Request.QueryString["id"] != null)
                {
                    QueryStringLbl.Text = Request.QueryString["id"];
                }
                else
                {
                    QueryStringLbl.Text = "NULL";
                }
            }
        }

Demo:

Hope helps.

Best regards,

Sean

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Monday, January 11, 2021 6:02 AM

Answered by:

How to open Popup window from gridview edit button.

Question

Answers