I am trying to close modelpopupextender using a button click, this button belongs to another form so modelpopupextender is not able to accessable. RSS

1 reply

Last post Jun 25, 2019 02:51 AM by Yang Shen

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

- Reply
manjunathS
None

0 Points

1 Post

I am trying to close modelpopupextender using a button click, this button belongs to another form...

Jun 24, 2019 10:25 AM|manjunathS|LINK

I have tried to remove the updatepanel as suggested, but it's not working.

This is my form1.aspx (which includes a button, onclick which will display a ModalPopupExtender in which includes grid view)

<asp:Button id="btnclick" text="Show Modal Popup" runat="server" >

</asp:Button>

<cc1:ModalPopupExtender ID="ModelPopupExtender1" runat="server"

PopupControlID="pc" TargetControlID="btnclick" OkControlID ="Button2"

CancelControlID="Button1" BackgroundCssClass="bcc" BehaviorID="MPE1">

</cc1:ModalPopupExtender>

<asp:Panel ID="pc" runat="server" CssClass="pop" Style="display:none;">

<iframe style="width:1003px;height:550px;" id="if"src="EstPopUp.aspx" runat="server"></iframe>

</asp:Panel>

This is my EstPopUp.aspx ( Where gridview is dislpayed with save and cancel buttons)

<asp:GridView ID="gvContacts" runat="server" AutoGenerateColumns="false" CellPadding="5" DataKeyNames="EstimateBreakUpTypeId" OnSelectedIndexChanged="gvContacts_SelectedIndexChanged" OnRowDataBound="gvContacts_RowDataBound" >

<Columns>

<asp:TemplateField HeaderText="DispOrder">

<ItemTemplate>

<center>

<asp:TextBox ID="TextBox1" width="20px" runat="server" Text='<%#

Bind("DispOrder") %>'></asp:TextBox>

</center>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="EstBreakUpName">

<ItemTemplate>

<asp:DropDownList ID="DropDownList1" runat="server" ></asp:DropDownList>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Percentage(%)">

<ItemTemplate>

<center>

<asp:TextBox ID="TextBox2" Width="30px" runat="server"></asp:TextBox>

</center>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Amount">

<ItemTemplate>

<asp:TextBox ID="TextBox3" runat="server" CssClass="sum" ></asp:TextBox>

<cc1:FilteredTextBoxExtender ID="fte" runat="server" Enabled="true"

TargetControlID="TextBox3" FilterType="Numbers,Custom" ValidChars=".">

</cc1:FilteredTextBoxExtender>

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

<br/>

<asp:Button ID="Button1" runat="server" Text="Save" OnClick="Button1_Click"></asp:Button>

<asp:Button class="abc" ID="Button2" runat="server" Text="Cancel" CssClass=".cancel" OnClick="Button2_Click1"></asp:Button >

<br />

</asp:GridView>

My expected result is, when cancel button is clicked the modelpopup should disappear.

Yang Shen

Member

610 Points

199 Posts

Re: I am trying to close modelpopupextender using a button click, this button belongs to another...

Jun 25, 2019 02:51 AM|Yang Shen|LINK

Hi manjunathS,

According to your description, I recommend that you can use JavaScript to hide the relevant controls.

After the page is loaded, all controls are rendered as HTML tags. Find all tags associated with ModalPopupExtender and hide them.

Please refer to below codes in EstPopUp.aspx :

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function CancelPop() {/*Here you need to use top to get the outermost page.*/
            var modal = top.document.getElementById("MPE1_backgroundElement");/*Because ModalPopupExtender set behaviorid= "MPE1", the ID of ModalPopupExtender in the HTML of the page is MPE1_backgroundElement.*/
            modal.style.display = "none";
            var pc = top.document.getElementById("pc");
            pc.style.display = "none";
            
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:GridView ID="gvContacts"  runat="server" AutoGenerateColumns="false" CellPadding="5" DataKeyNames="EstimateBreakUpTypeId" OnSelectedIndexChanged="gvContacts_SelectedIndexChanged" OnRowDataBound="gvContacts_RowDataBound">

                <Columns>

                    <asp:TemplateField HeaderText="DispOrder">

                        <ItemTemplate>


                            <asp:TextBox ID="TextBox1" Width="20px" runat="server" Text='<%#Bind("DispOrder") %>'></asp:TextBox>

                        </ItemTemplate>

                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="EstBreakUpName">

                        <ItemTemplate>

                            <asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>

                        </ItemTemplate>

                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="Percentage(%)">

                        <ItemTemplate>


                            <asp:TextBox ID="TextBox2" Width="30px" runat="server"></asp:TextBox>


                        </ItemTemplate>

                    </asp:TemplateField>

                    <asp:TemplateField HeaderText="Amount">

                        <ItemTemplate>

                            <asp:TextBox ID="TextBox3" runat="server" CssClass="sum"></asp:TextBox>
                            <ajaxToolkit:FilteredTextBoxExtender ID="fte" runat="server" Enabled="true"
                                TargetControlID="TextBox3" FilterType="Numbers,Custom" ValidChars="." />

                        </ItemTemplate>

                    </asp:TemplateField>

                </Columns>

            </asp:GridView>

            <br />

            <asp:Button ID="Button1" runat="server" Text="Save" OnClick="Button1_Click"></asp:Button>

            <asp:Button class="abc" ID="Button2" OnClientClick="return CancelPop()" runat="server" Text="Cancel" CssClass=".cancel" OnClick="Button2_Click1"></asp:Button>

            <br />

        </div>
    </form>
</body>
</html>

Here is result of my demo:

Best Regard,