How to use two ModalPopupExtender on the same ASP.NET page?

1

I have two ModalPopupExtender and each one has a GridView that serves to show a own report, each one is linked to a button, the problem is that only 1 of them is shown when clicking on its respective button, the other makes a autopostback and it does not show anything even though I have the method in return false.

I leave the code:

<asp:Button ID="btnMostrarReporte" OnClientClick="showPopUpReporte();return false;" runat="server" CssClass="btnModal" Text="Reporte" />
<asp:Button ID="btnMostrarRelacion" OnClientClick="showPopUpRelacion();return false;" runat="server" CssClass="btnModal" Text="Relacion" />

<asp:Panel ID="panelRelacion" runat="server" Style="display: none">
    <table>
        <tr>
            <td>
                <cc3:Grid ID="grdRelacionExtender" runat="server" AutoGenerateColumns="false" Language="es">
                    <Columns>
                        <cc3:Column HeaderText="Empleados" DataField="Empleados" ReadOnly="true">
                        </cc3:Column>
                        <cc3:Column HeaderText="Comentarios" DataField="Comentarios" ReadOnly="true">
                        </cc3:Column>
                        <cc3:Column HeaderText="Monto" DataField="Monto" ReadOnly="true">
                        </cc3:Column>
                    </Columns>
                </cc3:Grid>
            </td>
        </tr>
        <tr>
            <td class="modalOptions">
                <cc1:OboutButton ID="btnCancelarRelacion" runat="server" Text="Cancelar" OnClientClick="hidePopUpRelacion();"></cc1:OboutButton>
            </td>
        </tr>
    </table>
</asp:Panel>
<asp:Panel ID="panelReporte" runat="server" Style="display: none">
    <table>
        <tr>
            <td>
                <cc3:Grid ID="grdReporteExtender" runat="server" AutoGenerateColumns="false" Language="es">
                    <Columns>
                        <cc3:Column HeaderText="Proyecto" DataField="Proyecto" ReadOnly="true">
                        </cc3:Column>
                        <cc3:Column HeaderText="Actividad" DataField="Actividad" ReadOnly="true">
                        </cc3:Column>
                        <cc3:Column HeaderText="Horas" DataField="Horas" ReadOnly="true">
                        </cc3:Column>
                        <cc3:Column HeaderText="Comentarios" DataField="Comentarios" ReadOnly="true">
                        </cc3:Column>
                        <cc3:Column HeaderText="Pm o Solicitante" DataField="Pm/Solicitante" ReadOnly="true">
                        </cc3:Column>
                        <cc3:Column HeaderText="Tipo" DataField="Tipo" ReadOnly="true">
                        </cc3:Column>
                    </Columns>
                </cc3:Grid>
            </td>
        </tr>
        <tr>
            <td class="modalOptions">
                <cc1:OboutButton ID="btnCancelarReporte" runat="server" Text="Cancelar" OnClientClick="hidePopUpReporte();"></cc1:OboutButton>
            </td>
        </tr>
    </table>
</asp:Panel>
<cc2:ModalPopupExtender
    ID="ModalPopupExtenderReporte" runat="server"
    TargetControlID="btnMostrarReporte"
    BackgroundCssClass="modalBackground"
    PopupControlID="panelReporte"
    CancelControlID="btnCancelar"
    BehaviorID="popUpReporte"
    DropShadow="false">
</cc2:ModalPopupExtender>
<cc2:ModalPopupExtender
    ID="ModalPopupExtenderRelacion" runat="server"
    TargetControlID="btnMostrarRelacion"
    BackgroundCssClass="modalBackground"
    PopupControlID="panelRelacion"
    CancelControlID="btnCancelar"
    BehaviorID="popUpRelacion"
    DropShadow="false">
</cc2:ModalPopupExtender>

<script type="text/javascript">

    function hidePopUpRelacion() {
        $find("popUpRelacion").hide();
        return false;
    }

    function showPopUpRelacion() {
        $find("popUpRelacion").show();
        return false;
    }

    function hidePopUpReporte() {
        $find("popUpReporte").hide();
        return false;
    }

    function showPopUpReporte() {
        $find("popUpReporte").show();
        return false;
    }

</script>
    
asked by Abraham Rivera 02.08.2016 в 19:02
source

0 answers