Setting Focus inside user control of popupControlExtender

Last post 07-09-2009 6:07 AM by SLowery. 12 replies.

Sort Posts:

  • Setting Focus inside user control of popupControlExtender

    06-28-2009, 8:23 AM
    • Member
      5 point Member
    • SLowery
    • Member since 01-03-2007, 7:40 AM
    • Posts 20

     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?

  • Re: Setting Focus inside user control of popupControlExtender

    06-28-2009, 10:52 PM

    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

    Chetan Sarode
    Software Engineer,
    Approva Systems Pvt Ltd,
    Pune, India.
  • Re: Setting Focus inside user control of popupControlExtender

    06-30-2009, 3:46 PM
    • Member
      5 point Member
    • SLowery
    • Member since 01-03-2007, 7:40 AM
    • Posts 20

     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

    07-01-2009, 2:40 AM
    • Contributor
      2,438 point Contributor
    • anup1252000
    • Member since 11-12-2008, 8:26 AM
    • india
    • Posts 488

    write these lines of code in pageload

    ScriptManager.setfocus(controlid);

    controlid like TextBox1 and so on..

    Remember to click “Mark as Answer” on the post, if it helps you. Because It helps others to find the solution.

    Anup Hosur
    HP
    http://anup-anuphosur.blogspot.com/


  • Re: Setting Focus inside user control of popupControlExtender

    07-01-2009, 7:14 AM
    • Member
      5 point Member
    • SLowery
    • Member since 01-03-2007, 7:40 AM
    • Posts 20

     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

    07-02-2009, 4:42 AM

    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

    Microsoft Online Community Support

    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
    Answer” if a marked post does not actually answer your question.
  • Re: Setting Focus inside user control of popupControlExtender

    07-02-2009, 12:08 PM
    • Member
      5 point Member
    • SLowery
    • Member since 01-03-2007, 7:40 AM
    • Posts 20

     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

    07-02-2009, 11:41 PM

    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

    Microsoft Online Community Support

    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
    Answer” if a marked post does not actually answer your question.
  • Re: Setting Focus inside user control of popupControlExtender

    07-06-2009, 10:29 AM
    • Member
      5 point Member
    • SLowery
    • Member since 01-03-2007, 7:40 AM
    • Posts 20

    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

    07-07-2009, 11:24 PM

    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

    Microsoft Online Community Support

    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
    Answer” if a marked post does not actually answer your question.
  • Re: Setting Focus inside user control of popupControlExtender

    07-08-2009, 3:06 PM
    • Member
      5 point Member
    • SLowery
    • Member since 01-03-2007, 7:40 AM
    • Posts 20

     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

    07-08-2009, 10:24 PM
    Answer

    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

    Microsoft Online Community Support

    Please remember to click “Mark as Answer” on the post that helps you, and to click “Unmark as
    Answer” if a marked post does not actually answer your question.
  • Re: Setting Focus inside user control of popupControlExtender

    07-09-2009, 6:07 AM
    • Member
      5 point Member
    • SLowery
    • Member since 01-03-2007, 7:40 AM
    • Posts 20

     Zhi-Qiang Ni,

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

    Stephanie

Page 1 of 1 (13 items)