locked
Problem when using UpdatePanel and ModalPopupExtender together RRS feed

  • Question

  • User-1319695269 posted

    Hi Everyone,

    I have a gridview in which there are 3 columns: Employee ID, Employee Name and Send Email Column. In "Send Email" column, I have a button. If I click on this button, popup window will open where I can compose a mail and send it to the employee. This is working fine.

    But now I want this grid to be auto refreshed after every 1 minute. I added it to Update Panel and it is working fine. But when I click on "Send Email" button, nothing is happening now (popup window is not displaying). Can you please suggest how can I use UpdatePanel and ModalPopupExtender together?

    Thank you in advance.

    Wednesday, June 22, 2016 7:31 AM

Answers

  • User1559292362 posted

    Hi ajinkyajagtap,

    Suppose I click on "Send Email" button, popup will be opened. I will start typing my mail. Till then if another 1 minute is completed, popup will disappear :-(

    According to your requirement, it seems that you could use JavaScript window.open method open a new page. at the new page, we could retrieve the data from database by using related Id and populate the data into control.  like below.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridViewWithUpdatePanel.aspx.cs" Inherits="ADONETDEMO.GridViewDemo.GridViewWithUpdatePanel" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
            <asp:BoundField DataField = "CustomerId" HeaderText = "Customer ID" HtmlEncode = "true" />
            <asp:BoundField DataField = "ContactName" HeaderText = "Contact Name" HtmlEncode = "true" />
            <asp:BoundField DataField = "Country" HeaderText = "Country" HtmlEncode = "true"/> 
            <asp:TemplateField ItemStyle-Width = "30px" HeaderText = "CustomerID">
                <ItemTemplate>
                    <a href="#" onclick="javascript:window.open('SendEmail.aspx?customerId=<%# Eval("CustomerId") %>')" >Send Email</a>
                </ItemTemplate>
            </asp:TemplateField>
            </Columns>
            </asp:GridView>
            
        </div>
        </form>
    </body>
    </html>
    

    Best regards,

    Cole Wu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 30, 2016 9:21 AM
  • User-1319695269 posted

    Thank you Cole Wu. It worked. I did it as below: 

    <asp:TemplateField HeaderStyle-BackColor="#100F14" ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                     <asp:Button ID="btnSendEmail" CssClass="my_btn" runat="server" onClientClick="return windowOpen(this)"/>
            </ItemTemplate>
            <HeaderStyle BackColor="#100F14" BorderWidth="0"></HeaderStyle>
    </asp:TemplateField>

    Script is as below:

    <script type="text/javascript">
            function windowOpen(objRef) {
                var row = objRef.parentNode.parentNode;
                var email = row.cells[2].innerText;
                var name = row.cells[3].innerText;
                
                myWindow = window.open('SendEmail.aspx?EmailTo=' + email + '&Name=' + name, '_blank', 'width=510,height=260, scrollbars=no,resizable=no')
                myWindow.focus()
                return false;
            }
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 1, 2016 9:37 AM

All replies

  • User1559292362 posted

    Hi ajinkyajagtap,

    But now I want this grid to be auto refreshed after every 1 minute. I added it to Update Panel and it is working fine. But when I click on "Send Email" button, nothing is happening now (popup window is not displaying). Can you please suggest how can I use UpdatePanel and ModalPopupExtender together?

    Based on your description, I create a simple demo as below for your reference.

    #ASPX

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridViewWithUpdatePanel.aspx.cs" Inherits="ADONETDEMO.GridViewDemo.GridViewWithUpdatePanel" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                    <Columns>
                    <asp:BoundField DataField = "CustomerId" HeaderText = "Customer ID" HtmlEncode = "true" />
                    <asp:BoundField DataField = "ContactName" HeaderText = "Contact Name" HtmlEncode = "true" />
                    <asp:BoundField DataField = "Country" HeaderText = "Country" HtmlEncode = "true"/> 
                    <asp:TemplateField ItemStyle-Width = "30px" HeaderText = "CustomerID">
                       <ItemTemplate>
                           <asp:LinkButton ID="lnkEdit" runat="server" Text = "SendEmail" OnClick = "Edit"></asp:LinkButton>
                       </ItemTemplate>
                    </asp:TemplateField>
                    </Columns>
                    </asp:GridView>
                   
                    <asp:Panel ID="pnlAddEdit" runat="server" CssClass="modalPopup" style = "display:none">
                        <asp:Label Font-Bold = "true" ID = "Label4" runat = "server" Text = "Customer Details" ></asp:Label>
                        <br />
                        <table>
                        <tr><td><asp:Label ID = "Label1" runat = "server" Text = "CustomerId" ></asp:Label></td></tr>
                        <tr><td><asp:Label ID = "Label2" runat = "server" Text = "Contact Name" ></asp:Label></td></tr>
                        <tr><td><asp:Label ID = "Label3" runat = "server" Text = "Contact Name" ></asp:Label></td></tr>
                        <tr>
                        <td>
                        <asp:Button ID="btnSave" runat="server" Text="Save" OnClick="btnSave_Click" />
                        <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClick="btnCancel_Click"/>
                        </td>
                        </tr>
                        </table>
                    </asp:Panel>
                     <asp:LinkButton ID="lnkFake" runat="server"></asp:LinkButton>
                    <ajaxToolkit:ModalPopupExtender ID="popup" runat="server" DropShadow="false" 
                        PopupControlID="pnlAddEdit" TargetControlID = "lnkFake">
                    </ajaxToolkit:ModalPopupExtender>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID = "GridView1" />
                </Triggers>
            </asp:UpdatePanel>
            
        </div>
        </form>
    </body>
    </html>
    

    #Code Behind

    using System;
    using System.Data;
    using System.Data.SqlClient;
    using System.Web.UI.WebControls;
    
    namespace ADONETDEMO.GridViewDemo
    {
        public partial class GridViewWithUpdatePanel : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    this.BindData();
                }
            }
    
            private void BindData()
            {
    
                string strQuery = "select CustomerId,ContactName,Country from Customer";
                SqlCommand cmd = new SqlCommand(strQuery);
                GridView1.DataSource = GetData(cmd);
                GridView1.DataBind();
            }
    
            protected void Edit(object sender, EventArgs e)
            {
                using (GridViewRow row = (GridViewRow)((LinkButton)sender).Parent.Parent)
                {
                    Label1.Text = row.Cells[0].Text;
                    Label2.Text = row.Cells[1].Text;
                    Label3.Text = row.Cells[2].Text;
                    popup.Show();
                }
            }
    
            private DataTable GetData(SqlCommand cmd)
    
            {
                string strConnString = @"Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=AspDotNetDemo;Integrated Security=True";
                DataTable dt = new DataTable();
                using (SqlConnection con = new SqlConnection(strConnString))
                {
                    using (SqlDataAdapter sda = new SqlDataAdapter())
                    {
                        cmd.Connection = con;
                        con.Open();
                        sda.SelectCommand = cmd;
                        sda.Fill(dt);
                        return dt;
                    }
                }
            }
    
            protected void btnCancel_Click(object sender, EventArgs e)
            {
                popup.Hide();
            }
    
            protected void btnSave_Click(object sender, EventArgs e)
            {
    
            }
        }
    }

    Best regards,

    Cole Wu

    Thursday, June 23, 2016 6:39 AM
  • User-1319695269 posted

    Hi Cole Wu,

    I implemented your solution in my code. I am opening Email Popup on clicking "Send Email" button. I am also refreshing GridView after every 1 minute. 

    Suppose I click on "Send Email" button, popup will be opened. I will start typing my mail. Till then if another 1 minute is completed, popup will disappear :-(

    So this will fail my requirement.

    Please suggest.

    Tuesday, June 28, 2016 11:21 AM
  • User1559292362 posted

    Hi ajinkyajagtap,

    Suppose I click on "Send Email" button, popup will be opened. I will start typing my mail. Till then if another 1 minute is completed, popup will disappear :-(

    According to your requirement, it seems that you could use JavaScript window.open method open a new page. at the new page, we could retrieve the data from database by using related Id and populate the data into control.  like below.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridViewWithUpdatePanel.aspx.cs" Inherits="ADONETDEMO.GridViewDemo.GridViewWithUpdatePanel" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
            <asp:BoundField DataField = "CustomerId" HeaderText = "Customer ID" HtmlEncode = "true" />
            <asp:BoundField DataField = "ContactName" HeaderText = "Contact Name" HtmlEncode = "true" />
            <asp:BoundField DataField = "Country" HeaderText = "Country" HtmlEncode = "true"/> 
            <asp:TemplateField ItemStyle-Width = "30px" HeaderText = "CustomerID">
                <ItemTemplate>
                    <a href="#" onclick="javascript:window.open('SendEmail.aspx?customerId=<%# Eval("CustomerId") %>')" >Send Email</a>
                </ItemTemplate>
            </asp:TemplateField>
            </Columns>
            </asp:GridView>
            
        </div>
        </form>
    </body>
    </html>
    

    Best regards,

    Cole Wu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, June 30, 2016 9:21 AM
  • User-1319695269 posted

    Thank you Cole Wu. It worked. I did it as below: 

    <asp:TemplateField HeaderStyle-BackColor="#100F14" ItemStyle-HorizontalAlign="Center">
            <ItemTemplate>
                     <asp:Button ID="btnSendEmail" CssClass="my_btn" runat="server" onClientClick="return windowOpen(this)"/>
            </ItemTemplate>
            <HeaderStyle BackColor="#100F14" BorderWidth="0"></HeaderStyle>
    </asp:TemplateField>

    Script is as below:

    <script type="text/javascript">
            function windowOpen(objRef) {
                var row = objRef.parentNode.parentNode;
                var email = row.cells[2].innerText;
                var name = row.cells[3].innerText;
                
                myWindow = window.open('SendEmail.aspx?EmailTo=' + email + '&Name=' + name, '_blank', 'width=510,height=260, scrollbars=no,resizable=no')
                myWindow.focus()
                return false;
            }
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, July 1, 2016 9:37 AM