SetFocus to a Textbox on PageLoad with MasterPage, TabPanel, UpdatePanel not working, please help!

Last post 10-20-2009 9:27 AM by caroli. 8 replies.

Sort Posts:

  • SetFocus to a Textbox on PageLoad with MasterPage, TabPanel, UpdatePanel not working, please help!

    07-10-2007, 12:09 PM
    • Member
      point Member
    • PMKAJAX
    • Member since 07-10-2007, 3:59 PM
    • Posts 4

    Hello Everyone,

    Let me explain my scenario and the things that I have already tried:
    I am on .Net 2.0 with latest verion of AJAX.
    The page is based off of a master page. The textbox is inside an user control which is inside a TabPanel. The User Control is encapsulated with a AJAX UpdatePanel.

    I have tried the following solution for setting focus to textbox etc 

    1. Page.From.DefaultFocus = TextBox.ClientID and it seems to be doing nothing. It does not give any error, but doe snot setfocus to the textbox. This has been added in the page-load event. 

    If I try the above code to setfocus to a default textbox, the application does nothing. No error, nothing. If you see the view source below below the clientid of the textbox is correct w.r.t. its control hierarchy.

    <script type="text/javascript">
    <!--
    WebForm_AutoFocus('ctl00_SampleContent_WUCCamperMenuOptionsAsTab2_TabStCamperOptions_TbCamperLkp_WUCCamperLookup2_WUCCamperInquiry1_TBLastName');
    // -->
    </script>

    2.
    Page.RegisterStartupScript("Startup", "<script language=JavaScript>document.getElementById(" & Chr(34) & Me.TBLastName.ClientID() & Chr(34) & ").focus();</Script>")
    This one gives a javascript error indicating that the application is trying to setfocus to a control that is not enabled, but that is not true as the textbox is enabled and I can manually setfocus and type in it.
    3.
    ScriptManager.RegisterClientScriptBlock(Page, sender.GetType(), "FocusScr", "WebForm_AutoFocus('" + TBLastName.ClientID + "');", True)
    This gives an error in indicating object required.

    Any help or direction to tackle this issue will be appreciated.

    Thanks in advance

    PMK

  • Re: SetFocus to a Textbox on PageLoad with MasterPage, TabPanel, UpdatePanel not working, please help!

    07-10-2007, 6:32 PM
    • Member
      726 point Member
    • Peter Lee
    • Member since 07-02-2007, 4:34 PM
    • Virginia, USA
    • Posts 123

    Hi PMK,

     The reason you were getting those errors about the textbox's not being enabled was because they were not rendered yet.  To fix this, put in a delay before setting focus.

    Here is some code that works:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAXEnabledWebApplication1._Default" %>

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

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

    <script type="text/javascript">

    function MyDelay()

    {

    setTimeout(
    "FocusFunction()", 1000);

    }

     

    function FocusFunction()

    {

    document.getElementById(
    "TabContainer1_TabPanel1_TextBox2").focus();

    }

    MyDelay();

    </script> <html xmlns="http://www.w3.org/1999/xhtml" >

    <head runat="server">

    <title>Untitled Page</title>

     

    </head>

    <body style="background-color: transparent">

    <form id="form1" runat="server">

    <asp:ScriptManager ID="ScriptManager1" runat="server" />

    <div>

    &nbsp;</div>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">

    <ContentTemplate>

    <cc1:TabContainer ID="TabContainer1" runat="server" Height="81px" Width="201px" style="position: absolute; left: 100px; width: 400px; top: 150px; height: 200px;">

    <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="hello 1" OnClientClick="MyDelay" >

    <ContentTemplate>

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

     

    <br />

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

     

    <br />

    Hello other people

    </ContentTemplate>

    </cc1:TabPanel>

     

    <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="hello 2">

    <ContentTemplate>

    Hello people

    </ContentTemplate>

    </cc1:TabPanel>

    </cc1:TabContainer>

    </ContentTemplate>

    </asp:UpdatePanel>

    </form> </body>

    </html>

    Notice the call to MyDelay at the end of the <script> block to set focus on initial page load.  Also, notice the hook up to MyDelay in the TabPanel's OnClientClick event:

    <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="hello 1" OnClientClick="MyDelay" >

     That should make your focus go to your textbox on page load and also when the tab is clicked.

     Pete

  • Re: SetFocus to a Textbox on PageLoad with MasterPage, TabPanel, UpdatePanel not working, please help!

    07-11-2007, 9:02 AM
    • Member
      point Member
    • PMKAJAX
    • Member since 07-10-2007, 3:59 PM
    • Posts 4

    Thanks Pete, I will try your suggestion and post back my results.

    Thanks for being so quick and so detail in your explanation

    PMK

  • Re: SetFocus to a Textbox on PageLoad with MasterPage, TabPanel, UpdatePanel not working, please help!

    07-11-2007, 4:15 PM
    Answer
    • Member
      point Member
    • PMKAJAX
    • Member since 07-10-2007, 3:59 PM
    • Posts 4

    Thanks Pete, your suggestion worked perfectly when the window was initially loaded. Your suggestion/idea was primarily responsible for my solving this problem.

    But if I had a setfocus() requirement on subsiquent postbacks on that screen, it would not work. What I found was because I had updatepanel on this window which only performing partial postback the RegsiterStartupScript on subsequent calls would not get registered, so in that case I had to revert using the ScripManager.RegisterStartupScript function.

    This is what I ended up doing:

    Because all our SetFocus() code on the server side is in our base class, and that is being used in lot of pages and user control, I had to make the fix to our base function.

    Below is one such function for a TextBox control. I have this function overlaoded for other controls as well.

    Public Shared Sub SetFocusToColumn(ByVal CurrentPage As Page, ByVal FormName As String, ByVal TBFocus As TextBox)            If (Not TBFocus.Visible) Then Return

              

                'If the current page did not have an ScriptManager included then use the Page.ClientScript.RegisterStartupScript else use 'ScriptManager.RegisterStartupScript

                If (ScriptManager.GetCurrent(CurrentPage) Is Nothing) Then                CurrentPage.ClientScript.RegisterStartupScript(CurrentPage.GetType(), "focus", "<script language='JavaScript'> function SetFocusFunction() {" & "if  (" & FormName & "." & TBFocus.ClientID & " != null ) { " & vbCrLf & vbTab & FormName & "." & TBFocus.ClientID & ".focus();" & _                                vbCrLf & vbTab & FormName & "." & TBFocus.ClientID & ".select();}} " & vbCrLf & vbTab & "SetFocusDelay();" & vbCrLf & "<" & "/script>")            Else                ScriptManager.RegisterStartupScript(CurrentPage, CurrentPage.GetType(), "focus", "<script language='JavaScript'> function SetFocusFunction() {" & "if  (" & FormName & "." & TBFocus.ClientID & " != null ) { " & vbCrLf & vbTab & FormName & "." & TBFocus.ClientID & ".focus();" & _                                                vbCrLf & vbTab & FormName & "." & TBFocus.ClientID & ".select();}} " & vbCrLf & vbTab & "SetFocusDelay();" & vbCrLf & "<" & "/script>", False)            End If

    End Sub

     

    I added the SetFocusDelay() javascript function in our base .js file which is used in all pages, so that this function is available at all times.

    function SetFocusDelay()

    {

    setTimeout(
    "SetFocusFunction()", 1000);

    }

     

    The call to function is

    SetFocusToColumn(Page, "YourPageFormID", Me.TBLastName)

    With the above, it is now working for both Page Load and Subsequent post backs. Thanks again for your help and providing me the idea.PMK 
  • Re: SetFocus to a Textbox on PageLoad with MasterPage, TabPanel, UpdatePanel not working, please help!

    07-11-2007, 10:31 PM

    Thats good example. Smile

    Thanks, it will help for me & others.

    Chetan Sarode
    Software Engineer,
    Approva Systems Pvt Ltd,
    Pune, India.
  • Re: SetFocus to a Textbox on PageLoad with MasterPage, TabPanel, UpdatePanel not working, please help!

    07-12-2007, 7:23 AM
    • Member
      154 point Member
    • Anksunamon
    • Member since 05-22-2006, 7:16 AM
    • Posts 37
    I have an easier solution using AJAX :

    Use the scriptmanager to set the focus to the textbox like this :

    ((ScriptManager)Page.Master.FindControl("i_sm")).SetFocus((TextBox)i_fv.FindControl("i_tbNom"));

    Where i_sm is the ID of the ScriptManager in the MasterPage,
    i_fv the ID of a FormView or any other control containing the textbox,
    i_tbNom the ID of the Textbox To focus.

    Anyone has the solution for the dynamically Setting the DefaultButton of a panel? (The only way to generate the DefaultButton if Using AJAX ?)

    In this thread : http://forums.asp.net/p/1132380/1798701.aspx#1798701

    Thanks in advance !
  • Re: SetFocus to a Textbox on PageLoad with MasterPage, TabPanel, UpdatePanel not working, please help!

    07-16-2007, 12:11 PM
    • Member
      726 point Member
    • Peter Lee
    • Member since 07-02-2007, 4:34 PM
    • Virginia, USA
    • Posts 123

    Hi Anksunamon,

     I tried your code above, after breaking it apart into:

    protected void Button1_Click(object sender, EventArgs e)

    {

    ScriptManager scriptManagerRef = ((ScriptManager)Page.FindControl("ScriptManager1"));

     

    TextBox textBoxRef = (TextBox)(Panel1.FindControl("TextBox2"));

    scriptManagerRef.SetFocus(textBoxRef);

    }

     

     

    The code above that you (Anksunamon) recommended works when the panel (corresponding to variable "i_fv" in your example) is visible with the rest of the page on initial load.  It does not seem to work for me with modal popup extenders when the modal panel is not visible yet.  The way around it seems to be to use the delay mentioned above.

     Pete

  • Re: SetFocus to a Textbox on PageLoad with MasterPage, TabPanel, UpdatePanel not working, please help!

    09-16-2008, 5:47 AM
    • Member
      2 point Member
    • vani162006
    • Member since 09-16-2008, 9:31 AM
    • Posts 1

    Q::setting the focus for first edit textbox ,of appropriate tabpanelwhich is in tab container which is in updatepanel

    Re:write following script at the bottom of u r source

    <script language="javascript" type="text/javascript">
        Sys.Application.add_load
        (
            function()
            {
                window.setTimeout(focus, 100);
            }
        )
        function focus()
        {
            try
            {
                document.getElementById('<%=t1.ClientID %>').focus();
            }
            catch(err)
            {
                //do nothing
            }
        }
    </script>

    in page load write

    switch(tabcontainer.ActiveTabIndex)

    {

    case 0:panelone();

               break;

    case 1:paneltwo();

               break;

     }

    private void panelone()

    {

    scriptmanager sm=scriptmanager.Getcurrent(page);

    ss.setfocus(controlid);

    }

    private void paneltwo()

    {

    scriptmanager sm=scriptmanager.Getcurrent(page);

    ss.setfocus(controlid);

    }

     

    }

     

  • Re: SetFocus to a Textbox on PageLoad with MasterPage, TabPanel, UpdatePanel not working, please help!

    10-20-2009, 9:27 AM
    • Member
      2 point Member
    • caroli
    • Member since 02-24-2005, 12:28 PM
    • Posts 1

     I have a page layout like this:

    Masterpage

    Content

    Ajax:TabContainer

    Panel

    ContentTemplate

    Formview

     

    Any idea how to set the focus to a textbox in the formview?

     

    Thanks!

Page 1 of 1 (9 items)