locked
ModalPopupExtender is not perfect, or it's my mistake? RRS feed

  • Question

  • User-909867351 posted

    Hi

    I'm using the ModalPopupExtender on my website http://cheirabem.com and it's ok but there are some issues. My modal is connected to gridview I don't use panel because I need to make it responsive. Here is my code:

    <!-- inicio das coisas do shipping costs -->
                            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
                            <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground" PopupControlID="Gridview1" TargetControlID="HyperLink1" ></ajaxToolkit:ModalPopupExtender>                                                   
                                <asp:GridView ID="GridView1" CssClass="table table-hover table-striped pnlBackGround" GridLines="None"  runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1">
                                    <Columns>
                                        <asp:TemplateField SortExpression="bandeira">
                                            <EditItemTemplate>
                                                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("bandeira") %>'></asp:TextBox>
                                            </EditItemTemplate>
                                            <ItemTemplate>
                                                <asp:Image ID="Image12" runat="server" Height="71px" ImageUrl='<%# Eval("bandeira") %>' Width="63px"  />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:BoundField DataField="paises" HeaderText="Country" SortExpression="paises">
                                        <ItemStyle Font-Size="X-Small" />
                                        </asp:BoundField>
                                        <asp:BoundField DataField="tipo" HeaderText="Service" SortExpression="tipo" >
                                        <ItemStyle Font-Size="XX-Small" />
                                        </asp:BoundField>
                                        <asp:BoundField DataField="preco" HeaderText="Price" SortExpression="preco" DataFormatString="{0:c}" >
                                        <ItemStyle Font-Bold="True" ForeColor="Red" Font-Size="X-Small" />
                                        </asp:BoundField>
                                        <asp:TemplateField ShowHeader="False">
                                            <ItemTemplate>
                                                <asp:Button ID="Button1" runat="server" CausesValidation="false" CommandName="" OnClick="Button1_Click" Text="Close" />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                                <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:produtos %>" ProviderName="<%$ ConnectionStrings:produtos.ProviderName %>" SelectCommand="select * from shipping order by id"></asp:SqlDataSource>                                                  
                            <!-- fim das coisas do shipping costs -->

    First when I come to adrress I see the gridview (You can check it http://cheirabem.com option Shipping costs (Europe)) and when I hit the close button I see it again.

    Any help to make it better?

    Regards

    Monday, June 27, 2016 5:06 PM

Answers

  • User61956409 posted

    Hi mariolopes,

    Firstly, as you said, we could set GridView.Visible property to false by default, and dynamically show/hide GridView by setting Visible property.

    Secondly, you could try to show modal first, then show GridView.

    protected void LinkButton2_Click(object sender, EventArgs e)
    {
        ModalPopupExtender1.Show();
        GridView1.Visible = true;
    }
    

    Or you could try to use jQuery Modal plugins.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 28, 2016 8:01 AM

All replies

  • User-909867351 posted

    The situation it's better now

    I made the following modifications:

    1- Gridview visible to false

    2- One button who opens the modal with the code:

     protected void LinkButton2_Click(object sender, EventArgs e)
        {
            GridView1.Visible = true;
            ModalPopupExtender1.Show();
        }

    3- one button to close the modal

     protected void Button1_Click(object sender, EventArgs e)
        {
            GridView1.Visible = false;
            ModalPopupExtender1.Hide();
        }

    But it seems when the popup opens it opens on the left of the screen and moved to center of the screen. It's not professional

    Monday, June 27, 2016 11:12 PM
  • User61956409 posted

    Hi mariolopes,

    Firstly, as you said, we could set GridView.Visible property to false by default, and dynamically show/hide GridView by setting Visible property.

    Secondly, you could try to show modal first, then show GridView.

    protected void LinkButton2_Click(object sender, EventArgs e)
    {
        ModalPopupExtender1.Show();
        GridView1.Visible = true;
    }
    

    Or you could try to use jQuery Modal plugins.

    Best Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, June 28, 2016 8:01 AM