ASP.NET AJAX UI

Re: Setting Focus inside user control of popupControlExtender

SLowery — Thu, 09 Jul 2009 10:07:13 GMT

Zhi-Qiang Ni,

Thanks, this works even better than what the article suggested.

Stephanie

Re: Setting Focus inside user control of popupControlExtender

Zhi-Qiang Ni - MSFT — Thu, 09 Jul 2009 02:24:48 GMT

Hi SLowery,

Well, forgive me for my rude. Try this code to find the setFocusToMeOnPopup TextBox.

        function pceShownHandler(sender, args) {
            var pce = $find("pce");
            //find the popup Panel of the PopupControlExtender
            var popup = pce._popupElement;
            var input = popup.getElementsByTagName("input");
            for (i = 0; i < input.length; i++) {
                // To check whether the TextBox is the "setFocusToMeOnPopup".
                // This is just a sample, please modify this condition yourself.
                if (input[i].id.search("setFocusToMeOnPopup") > 0) {
                    input[i].focus();
                    input[i].select();
                }
            }
        }

Have this code helped? Don’t hesitate to let me know if you have any difficulties to follow.

Best regards,

Zhi-Qiang Ni

Re: Setting Focus inside user control of popupControlExtender

SLowery — Wed, 08 Jul 2009 19:06:50 GMT

Ok, sorry to frustrate you so. Actually I did try to modify it and test with it a lot; however, I am very new to javascript and did not understand that the contentPlaceHolder becomes another container. For all others in my same predicament, the following link was a big help: http://www.codeproject.com/KB/scripting/Masterpage-Javascript.aspx

Re: Setting Focus inside user control of popupControlExtender

Zhi-Qiang Ni - MSFT — Wed, 08 Jul 2009 03:24:50 GMT

Hi SLowery,

Have you ever tested and modified my code locally? Have your seen my comment inside?

        function pceShownHandler(sender, args) {
            var pce = $find("pce");
            //find the popup Panel of the PopupControlExtender
            var popup = pce._popupElement;
            var input = popup.getElementsByTagName("input");
            for (i = 0; i < input.length; i++) {
                // To check whether the TextBox is the "setFocusToMeOnPopup".
                // This is just a sample, please modify this condition yourself.
                if (input[i].id == "FocusTextBox1_setFocusToMeOnPopup") {
                    input[i].focus();
                    input[i].select();
                }
            }
        }

I think I have already mentioned that my code above is only for test, you need to change the condition about finding the TextBox yourself. If you use the MasterPage, the id would be something else.

Best regards,

Zhi-Qiang Ni

Re: Setting Focus inside user control of popupControlExtender

SLowery — Mon, 06 Jul 2009 14:29:30 GMT

Thanks, that is exactly what I was looking for. And the extra threads are helpful too. But if I put the panel in a master page, it no longer works:

MasterPage:---------------------------------------------

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

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />            
    <div>

        <asp:contentplaceholder id="ContentPlaceHolder1" runat="server">
        </asp:contentplaceholder>
    </div>
    </form>
</body>
</html>

.aspx-----------------------------------------------------------------

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>
<%@ Register Src="focusTextBox.ascx" TagName="FocusTextBox" TagPrefix="uc1" %>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <script type="text/javascript">        
        function pageLoad() 
        {            //find the PopupControlExtender's client behavior            
            var pce = $find("pce");            //add the shown event handler            
            pce.add_shown(pceShownHandler);        
        }        
        function pceShownHandler(sender, args) 
        {            
            var pce = $find("pce");            //find the popup Panel of the PopupControlExtender
            var popup = pce._popupElement;            
            var input = popup.getElementsByTagName("input");            
            for (i = 0; i < input.length; i++) 
            {                // To check whether the TextBox is the "setFocusToMeOnPopup".
                    // This is just a sample, please modify this condition yourself.
                    if (input[i].id == "FocusTextBox1_setFocusToMeOnPopup") 
                    {                    
                        input[i].focus();                    
                        input[i].select();                
                    }            
             }        
        }        
    </script>
                <asp:TextBox runat="server" ID="tbPrompt" Text="Click here to display popup ..." />
                <hr />        
                <asp:Panel 
                    ID="popupPanel" 
                    runat="server" 
                    BackColor="#99FF66" 
                    Height="100px" 
                    HorizontalAlign="Center"            
                    Width="327px" 
                    Style="display: none">
                <br />            
                The Popup Panel.            
                <br />            
                <uc1:FocusTextBox ID="FocusTextBox1" runat="server" />        
                </asp:Panel>    
                </div>    
                <AjaxControlToolkit:PopupControlExtender 
                    ID="TextBox1_PopupControlExtender" 
                    BehaviorID="pce" 
                    runat="server"        
                    TargetControlID="tbPrompt" 
                    PopupControlID="popupPanel" 
                    Position="Bottom">    </AjaxControlToolkit:PopupControlExtender>    

</asp:Content>

.ascx--------------------------------------------------------------------

<%@ Control Language="C#" ClassName="focusTextBox" AutoEventWireup="false"  %>

<asp:TextBox ID="setFocusToMeOnPopup" runat="server"></asp:TextBox>

Re: Setting Focus inside user control of popupControlExtender

Zhi-Qiang Ni - MSFT — Fri, 03 Jul 2009 03:41:43 GMT

Hi SLowery,

Try this code and please post your sample code as early as possible the next time.

.aspx file

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TextBoxNeedFocusInUC.aspx.vb"
    Inherits="SoluTest_UserControl.TextBoxNeedFocusInUC" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>
<%@ Register Src="FocusTextBox.ascx" TagName="FocusTextBox" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript">

        function pageLoad() {
            //find the PopupControlExtender's client behavior
            var pce = $find("pce");
            //add the shown event handler
            pce.add_shown(pceShownHandler);
        }

        function pceShownHandler(sender, args) {
            var pce = $find("pce");
            //find the popup Panel of the PopupControlExtender
            var popup = pce._popupElement;
            var input = popup.getElementsByTagName("input");
            for (i = 0; i < input.length; i++) {
                // To check whether the TextBox is the "setFocusToMeOnPopup".
                // This is just a sample, please modify this condition yourself.
                if (input[i].id == "FocusTextBox1_setFocusToMeOnPopup") {
                    input[i].focus();
                    input[i].select();
                }
            }
        }
    
    </script>

</head>
<body>
    <form id="form2" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:TextBox runat="server" ID="tbPrompt" Text="Click here to display popup ..." />
        <hr />
        <asp:Panel ID="popupPanel" runat="server" BackColor="#99FF66" Height="100px" HorizontalAlign="Center"
            Width="327px" Style="display: none">
            <br />
            The Popup Panel.
            <br />
            <uc1:FocusTextBox ID="FocusTextBox1" runat="server" />
        </asp:Panel>
    </div>
    <AjaxControlToolkit:PopupControlExtender ID="TextBox1_PopupControlExtender" BehaviorID="pce" runat="server"
        TargetControlID="tbPrompt" PopupControlID="popupPanel" Position="Bottom">
    </AjaxControlToolkit:PopupControlExtender>
    </form>
</body>
</html>

.ascx file

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="FocusTextBox.ascx.vb" Inherits="SoluTest_UserControl.FocusTextBox" %>
<asp:TextBox ID="setFocusToMeOnPopup" runat="server"></asp:TextBox>

Have it helped?

Some useful threads about using the PopupControlExtender:
http://forums.asp.net/p/1256093/2345320.aspx#2345320
http://forums.asp.net/p/1264924/2385189.aspx#2385189
http://forums.asp.net/p/1268773/2403471.aspx#2403471
http://forums.asp.net/p/1274596/2430452.aspx#2430452

Best regards,

Zhi-Qiang Ni

Re: Setting Focus inside user control of popupControlExtender

SLowery — Thu, 02 Jul 2009 16:08:39 GMT

Thanks very much for the great sample code, but this is more representative of what I'm trying to do. tbPrompt TextBox has focus initially, but when clicked, popup displays and focus should go to setFocusToMeOnPopup TextBox in UC within the popup panel.

.aspx

<%@ Page Language="C#" AutoEventWireup="false"   %>
<%@ Register Src="PopupControlInUC.ascx" TagName="PopupControlInUC" TagPrefix="uc1" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">    
        <title></title>    
    </head>
    <body>    
        <form id="form2" runat="server">    
            <div>        
                <asp:ScriptManager ID="ScriptManager1" runat="server" />        
                <asp:TextBox runat="server" ID="tbPrompt" Text="Click here to display popup ..." />        
                <hr /> 
                <asp:Panel 
                    ID="popupPanel" 
                    runat="server" 
                    BackColor="#99FF66" 
                    Height="100px" 
                    HorizontalAlign="Center"    
                    Width="327px"
                    style="display:none"    >    
                        <br />    The Popup Panel.
                        <br />
                        <uc1:PopupControlInUC ID="PopupControlInUC1" runat="server" /> 
                 </asp:Panel>  
             </div>  
             
            <AjaxControlToolkit:PopupControlExtender 
                ID="TextBox1_PopupControlExtender"    
                runat="server" 
                TargetControlID="tbPrompt" 
                PopupControlID="popupPanel" 
                Position="Bottom">
            </AjaxControlToolkit:PopupControlExtender>               
        </form>
    </body>
</html>

and the .ascx

<%@ Control Language="C#" ClassName="PopupControlInUC" AutoEventWireup="false"  %>

<asp:TextBox ID="setFocusToMeOnPopup" runat="server"></asp:TextBox>

Re: Setting Focus inside user control of popupControlExtender

Zhi-Qiang Ni - MSFT — Thu, 02 Jul 2009 08:42:19 GMT

Hi SLowery,

I have built a test application based on your requirement. Please test it:

.aspx file

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestFocus.aspx.vb" Inherits="SoluTest_UserControl.TestFocus" %>

<%@ Register Src="PopupControlInUC.ascx" TagName="PopupControlInUC" TagPrefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script type="text/javascript">
        function pageLoad() {
            //find the PopupControlExtender's client behavior
            var pce = $find("pce");
            //the get_element() method is to find the target control, that is, the TextBox
            pce.get_element().focus();
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:Button runat="server" ID="btnPostBack" Text="Page Button To PostBack" />
        <hr />
        <uc1:PopupControlInUC ID="PopupControlInUC1" runat="server" />
    </div>
    </form>
</body>
</html>

.ascx file

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="PopupControlInUC.ascx.vb"
    Inherits="SoluTest_UserControl.PopupControlInUC" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<AjaxControlToolkit:PopupControlExtender ID="TextBox1_PopupControlExtender" BehaviorID="pce"
    runat="server" TargetControlID="TextBox1" PopupControlID="Panel1" Position="Bottom">
</AjaxControlToolkit:PopupControlExtender>
<asp:Panel ID="Panel1" runat="server" BackColor="#99FF66" Height="72px" HorizontalAlign="Center"
    Width="327px">
    <br />
    The Popup Panel.
</asp:Panel>

Have it helped?

Best regards,

Zhi-Qiang Ni

Re: Setting Focus inside user control of popupControlExtender

SLowery — Wed, 01 Jul 2009 11:14:48 GMT

Thanks for the input, but I have tried this too. If I put this in the user control's page load, focus could initially be going to the textbox in the popup panel, but since it is not initially visible, the user has to click on (and change focus to) the targetControlID before the popup is displayed....so focus is lost if it was there in the first place. I am interested in changing focus to a control in the popup panel once it becomes visible.

Re: Setting Focus inside user control of popupControlExtender

anup1252000 — Wed, 01 Jul 2009 06:40:58 GMT

write these lines of code in pageload

ScriptManager.setfocus(controlid);

controlid like TextBox1 and so on..

Re: Setting Focus inside user control of popupControlExtender

SLowery — Tue, 30 Jun 2009 19:46:30 GMT

Forgive my ignorance, but I am still confused. I have seen the above posts, but the first two refer to focus being lost due to being in same update panel...not positive, but I don't think that is my problem because an extender cannot be in a different update panel than the control it extends.

So I have experiemented with the RegisterStartupScript and do not know where to put it. If I put it in my user control (that gets displayed by the popupControlExtender), then focus is set to the user control's textbox in the popup before it is displayed.

Re: Setting Focus inside user control of popupControlExtender

chetan.sarode — Mon, 29 Jun 2009 02:52:25 GMT

To set focus and select text of a you have to use the following:

ScriptManager.RegisterStartupScript(this, this.GetType(), "selectAndFocus", "$get('" + myTextBox.ClientID + "').focus();$get('" + myTextBox.ClientID + "').select();", true);

http://forums.asp.net/t/1099345.aspx

http://forums.asp.net/t/1199709.aspx

http://forums.asp.net/t/1131786.aspx

Setting Focus inside user control of popupControlExtender

SLowery — Sun, 28 Jun 2009 12:23:14 GMT

I have a user cotrol that gets popped up in a panel using a popupControlExtender. I would like focus to be set to a text box within the user control when it displays. I have seen examples using javascript, but have not been able to get it working. Many posts have referred to new capabilities in .NET 2.0 (and that is what I'm using), but I get an error telling me the form has to have runat=server when I try to use Focus(). I'm using a master page that contains the form and runat=server, so I don't understand that error. Can somebody tell me how to do this?