how to show modalpopup on gridview's button click event

Article
2008-07-17

Question

_{Thursday, July 17, 2008 1:42 AM}

i want to show modalpopup on gridview's button click event, when i put modalpopup in gridview in statusbar it gives javascript's error that more than one control with same name exist,

also panel of modalpopup shows in gridview's each and every row, though its style display is none.

i know from codebehind i can do that by modalpopup.show() method , but i want that from client side,

is it possible to do that?

thanks

All replies (4)

_{Monday, July 21, 2008 10:31 PM ✅Answered}

Hi Vrparekh,

i want to show modalpopup on gridview's button click event, when i put modalpopup in gridview in statusbar it gives javascript's error that more than one control with same name exist,

Based on this prompt, we suspect that the Panels, which are tied with ModalPopupExtenders, have the same ClientID. For example, we may attached a div instead of a Panel to the ModalPopupExtender. Anyway, please check whether there are controls with the same name or not. We can go through its generated html code. Below is a sample which shows how to use one ModalPopupExtender with a data control. Hope it is helpful.

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        //Attach a Javascript funtion to the LinkButton.
        LinkButton myLinkButton;
        for (int i = 0; i < GridView1.Rows.Count; i++)
        {
            myLinkButton = (LinkButton)GridView1.Rows[i].Cells[4].FindControl("LinkButton1");
            myLinkButton.Attributes.Add("onclick", "shopModalPopup('" + GridView1.Rows[i].Cells[0].Text + "');return false;");
        }
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <style>
        .modalBackground {
            background-color:Gray;
            filter:alpha(opacity=70);
            opacity:0.7;
        }

        .modalPopup {
            background-color:#FFD9D5;
            border-width:3px;
            border-style:solid;
            border-color:Gray;
            padding:3px;
            width:250px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID"
            DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False"
                    ReadOnly="True" SortExpression="EmployeeID" ItemStyle-Width="0" />
                <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" />
                <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />
                <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="LinkButton1" runat="server">Click On Me</asp:LinkButton>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString %>"
            SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]" >
        </asp:SqlDataSource>
        <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="200px" Width="300px" style="display:none">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    EmployeeID:<asp:TextBox ID="tbEmployeeID" runat="server"></asp:TextBox> <br/>
                    Reason:<asp:TextBox ID="tbReason" runat="server"></asp:TextBox>
                    <asp:Button ID="btnSubmit" runat="server" Text="Button" />
                </ContentTemplate>
            </asp:UpdatePanel>
            <asp:Button ID="btnCancel" runat="server" Text="Cancel" />
        </asp:Panel>
        <div style="display: none">
            <asp:Button ID="Button1" runat="server" Text="Button" /></div>
        <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"
            PopupControlID="Panel1" CancelControlID="btnCancel" BackgroundCssClass="modalBackground">
        </ajaxToolkit:ModalPopupExtender>
        <script type="text/javascript" language="javascript">
            function shopModalPopup(employeeID){
                //show the ModalPopupExtender
                $get("<%=tbEmployeeID.ClientID %>").value = employeeID;
                $get("<%=tbReason.ClientID %>").value ="";
                $find("<%=ModalPopupExtender1.ClientID %>").show(); 
            }
        </script>
    </form>
</body>
</html>

Best regards,

Jonathan

_{Thursday, July 17, 2008 8:51 AM}

Hi,

I have faced similar problem before and i didn't exactly recollect the solution

but you can achieve it by having a hidden button outside the gridview which will be used to show the modal popup and

you can call the click event of this button on click of gridview button.

I hope this will work.

Regards

Omkar Lale

_{Thursday, July 17, 2008 9:46 AM}

i want to show modalpopup on button's click event from clientside, means as normal modalpopup,

i dont want that control goes server side and from that modalpopup is shown.

_{Tuesday, July 22, 2008 3:02 AM}

thanks jonathan shen

i am going to try this

Share via

how to show modalpopup on gridview's button click event

Question

All replies (4)

Additional resources