Open user control in ModalPopUpExtender when text box is clicked

Question

I have few textboxes on one page and one user control. What I want is when user click in particular or when textbox gain a focus, it should open pop up. The user control contains a grid which is filled in load event. Now when user clicks on a button, the popup should get closed and textboxes the patent page should get filled with the values from the selected row. How to do this? Here is the code for my .aspx page and use control page. Code for Parent page

<form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>

    <table class="style1" width="100%">
        <tr>
            <td width="20%">
                ID</td>
            <td width="60%">
                <asp:TextBox ID="txtID" runat="server" ontextchanged="txtID_TextChanged"></asp:TextBox>
            </td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                Name</td>
            <td>
                <asp:TextBox ID="txtName" runat="server" ontextchanged="txtName_TextChanged"></asp:TextBox>
            </td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                HOD</td>
            <td>
                <asp:TextBox ID="txtHOD" runat="server"></asp:TextBox>
            </td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                Email</td>
            <td>
                <asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
            </td>
            <td>
                &nbsp;</td>
        </tr>
        <tr>
            <td>
                &nbsp;</td>
            <td>
                <asp:Button ID="btnGet" runat="server" onclick="btnGet_Click" 
                    Text="Get Values" />
            </td>
            <td>
                &nbsp;</td>
        </tr>
    </table>

</div>
<UC:UserControl ID="UC1" runat="server" />
</form>

Parent page .aspx.cs

protected void Page_Load(object sender, EventArgs e)
{

   if(Session["dtTable"] != null)
    {
        Hashtable Table = (Hashtable)Session["dtTable"];
        txtID.Text = Table["ID"].ToString();
        txtHOD.Text = Table["HOD"].ToString();
        txtName.Text = Table["Name"].ToString();
        txtEmail.Text = Table["Email"].ToString();
    }

}
protected void txtID_TextChanged(object sender, EventArgs e)
{
    UC1.Show();
    Page.Controls.Add(UC1);
}

Code for User control .ascx page

<ContentTemplate>
<asp:Panel ID="DisplayPanel" runat="server">
<table class="style1">
    <tr>
        <td width="25%">
            &nbsp;</td>
        <td align="right">
            &nbsp;</td>
        <td width="25%">
            &nbsp;</td>
    </tr>
    <tr>
        <td>
            &nbsp;</td>
        <td>
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                CellPadding="4" ForeColor="#333333" GridLines="None" 
                onrowcommand="GridView1_RowCommand">
                <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                <Columns>
                    <asp:BoundField DataField="DeptId" HeaderText="ID"/>
                    <asp:BoundField DataField="Name" HeaderText="Name"/>
                    <asp:BoundField DataField="HeadName" HeaderText="HOD"/>
                    <asp:BoundField DataField="HeadEmail" HeaderText="Email"/>
                    <asp:TemplateField>
                        <HeaderTemplate>
                            Select
                        </HeaderTemplate>
                        <ItemTemplate>
                            <asp:Button ID="btnAdd" runat="server" Text="ADD" />
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
                <EditRowStyle BackColor="#999999" />
                <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                <SortedAscendingCellStyle BackColor="#E9E7E2" />
                <SortedAscendingHeaderStyle BackColor="#506C8C" />
                <SortedDescendingCellStyle BackColor="#FFFDF8" />
                <SortedDescendingHeaderStyle BackColor="#6F8DAE" />
            </asp:GridView>
        </td>
        <td>
            &nbsp;</td>
    </tr>
</table>

Code for user control .ascx.cs page

 protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        SqlConnection oConnection = new SqlConnection("Data Source=websrv3;Initial Catalog=20110801_AcrosBackup;Persist Security Info=True;User ID=sa;Password=SQL@admin");
        SqlCommand oCommand = new SqlCommand("select * from Department", oConnection);
        SqlDataAdapter oAdapter = new SqlDataAdapter(oCommand);
        DataTable dt = new DataTable();
        oAdapter.Fill(dt);
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    Hashtable dtTable = new Hashtable();
    int intRowInd = ((GridViewRow)(((Button)e.CommandSource).NamingContainer)).RowIndex;
    dtTable.Add("ID",GridView1.Rows[intRowInd].Cells[0].Text);
    dtTable.Add("Name", GridView1.Rows[intRowInd].Cells[1].Text);
    dtTable.Add("HOD", GridView1.Rows[intRowInd].Cells[2].Text);
    dtTable.Add("Email", GridView1.Rows[intRowInd].Cells[3].Text);
    Session.Add("dtTable", dtTable);

}
public void Show()
{
    this.ModalPopupExtender1.Show();
}
</asp:Panel>
<asp:Button ID="fake" runat="server" Style="display:none" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="fake" PopupControlID="DisplayPanel" BackgroundCssClass="overlay_style">
</cc1:ModalPopupExtender>

</ContentTemplate>

Answer 1

Add this onfocus attribute to your textbox.

onfocus="$find("<%= YourModalPopupExtenderID.ClientID %>").show();"