locked
Setting focus to the textbox control under tabcontainer inside dynamically loaded usercontrol RRS feed

  • Question

  • User-773499721 posted

    HI,

    I am dynamically loading a usercontrol inside a panel in a web page. The user control have a texbox inside a tab container (it's a microsoft ajax control for tabs). When the control is finally displayed I want to have focus inside that text box control, so far I have tried every possible way to put focus to that textbox control but nothing worked out.

    I have tried to find the control by ID and then called focus(), by using formname.controlname.focus, window.onload = setfocus() but nothing worked.

    I am using asp.net 3.5 and VS 2008 on Windows XP. 

    Please let me know about your ideas, clues.

    thanks,
    Mandeep.

    Wednesday, April 8, 2009 1:12 AM

Answers

  • User-1597315603 posted
    Hello justmandeep<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p>
    <o:p> </o:p>
    We can achieve the facing goal by TabContainer’s JavaScript API, please try the following demo, which works fine on our lab:<o:p></o:p>
    <o:p>  
    <%@ Page Language="C#" %>
    
    <%@ Register src="Tab.ascx" tagname="Tab" tagprefix="uc1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
        protected void Button1_Click(object sender, EventArgs e)
        {
            Tab tb = new Tab();
            tb.ID = "UC1";
            Panel1.Controls.Add(tb);
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Panel ID="Panel1" runat="server">           
            </asp:Panel>
        </div>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
        </form>
    </body>
    </html>
    
      
    <%@ Control Language="C#" ClassName="Tab" %>
    
    <script runat="server">
    
    </script>
    
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" Width="100%" OnClientActiveTabChanged="SetFocus">
        <ajaxToolkit:TabPanel runat="server" ID="TabPanel1" HeaderText="11111">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel runat="server" ID="TabPanel2" HeaderText="22222">
            <ContentTemplate>
                ...............
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel runat="server" ID="TabPanel3" HeaderText="33333">
            <ContentTemplate>
                ...............
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel runat="server" ID="TabPanel4" HeaderText="44444">
            <ContentTemplate>
                ...............
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>
    
    <script type="text/javascript">
        function SetFocus() {
            var TC = $find("<%=TabContainer1.ClientID %>");
            if (TC.get_activeTab().get_tabIndex() == 0) {
                $get("<%=TextBox1.ClientID %>").focus();
            }
        }
    
        function pageLoad() {
            var TC = $find("<%=TabContainer1.ClientID %>");
            TC.set_activeTab(TC.get_tabs()[0]);
        }
    </script>
    
    
     
    </o:p>

    Thanks.<o:p></o:p>

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 13, 2009 6:50 AM
  • User-773499721 posted
    thanks Lance.
    I got a hint from your post and I did -
    function SetFocus() {
    var txtSaleName = $get("_txtSaleName.ClientId");
    //asp scriptlets removed because the site was not posting the inside content.
    txtSaleName.focus();
    }
    function pageLoad() {
    SetFocus();
    }
    My issue got resolved.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 13, 2009 11:43 AM

All replies

  • User-1557807525 posted

    Basically the OnLoad will be fired before the Tab loading got over. You can put the script file at the end of the page

    after body tag. Then it will work

    Wednesday, April 8, 2009 2:54 AM
  • User-773499721 posted
    thanks for your reply hari.

    in my case there is only one page and lots of usercontrols which are loaded based upon the selection that user does from the menu. Every usercontrol is responsible to select the control which will receive the focus, once the usercontrol is finally displayed to the user. Every usercontrol inherits from a baseusercontrol class which spits out the javascript based upon the firstfocus control set by the usercontrol like first focus control can be a textbox, dropdown etc. so the baseusercontrol class spits the script to the page using

    Page.RegisterClientScriptBlock("VMS_FirstFocus", JScript)

    Before I was using infragitics tab controls and it was working fine but after I moved to MS ajax:tab control (My office management does not like infragistics) it stopped working. I tried to call the above code for setting the focus from usercontrol_prerender() but it did not worked out.

    Because during prerender everything is ready so I was surprised why it is not able to set the focus. I tried to recursively find the firstfocus control, it is able to find the control but when page is finally presented to the user, the focus is still not there.
    Wednesday, April 8, 2009 10:29 AM
  • User-1597315603 posted
    Hello justmandeep<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" /><o:p></o:p>
    <o:p> </o:p>
    We can achieve the facing goal by TabContainer’s JavaScript API, please try the following demo, which works fine on our lab:<o:p></o:p>
    <o:p>  
    <%@ Page Language="C#" %>
    
    <%@ Register src="Tab.ascx" tagname="Tab" tagprefix="uc1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
        protected void Button1_Click(object sender, EventArgs e)
        {
            Tab tb = new Tab();
            tb.ID = "UC1";
            Panel1.Controls.Add(tb);
        }
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Panel ID="Panel1" runat="server">           
            </asp:Panel>
        </div>
        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
        </form>
    </body>
    </html>
    
      
    <%@ Control Language="C#" ClassName="Tab" %>
    
    <script runat="server">
    
    </script>
    
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" Width="100%" OnClientActiveTabChanged="SetFocus">
        <ajaxToolkit:TabPanel runat="server" ID="TabPanel1" HeaderText="11111">
            <ContentTemplate>
                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel runat="server" ID="TabPanel2" HeaderText="22222">
            <ContentTemplate>
                ...............
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel runat="server" ID="TabPanel3" HeaderText="33333">
            <ContentTemplate>
                ...............
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
        <ajaxToolkit:TabPanel runat="server" ID="TabPanel4" HeaderText="44444">
            <ContentTemplate>
                ...............
            </ContentTemplate>
        </ajaxToolkit:TabPanel>
    </ajaxToolkit:TabContainer>
    
    <script type="text/javascript">
        function SetFocus() {
            var TC = $find("<%=TabContainer1.ClientID %>");
            if (TC.get_activeTab().get_tabIndex() == 0) {
                $get("<%=TextBox1.ClientID %>").focus();
            }
        }
    
        function pageLoad() {
            var TC = $find("<%=TabContainer1.ClientID %>");
            TC.set_activeTab(TC.get_tabs()[0]);
        }
    </script>
    
    
     
    </o:p>

    Thanks.<o:p></o:p>

     

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 13, 2009 6:50 AM
  • User-773499721 posted
    thanks Lance.
    I got a hint from your post and I did -
    function SetFocus() {
    var txtSaleName = $get("_txtSaleName.ClientId");
    //asp scriptlets removed because the site was not posting the inside content.
    txtSaleName.focus();
    }
    function pageLoad() {
    SetFocus();
    }
    My issue got resolved.
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 13, 2009 11:43 AM