AjaxToolkit: the last TabContainer on the page is focused on page load

I'm using more than one TabContainer on a page in an ASP.NET project and I noticed a really strange behavior: when the page is loaded the focus jumps to the last TabContainer on the page, causing it to scroll down. I don't explicitly focus on any control so I don't understand where this is coming from. I also switched places between the controls and it is always the last one that is focused. The TabContainers don't have any fancy settings, this is basically what they look like:

<cc1:TabContainer ID="tabContainer" runat="server">
    <cc1:TabPanel runat="server" HeaderText="Header1" ID="tabPanel1" TabIndex="0">
        <HeaderTemplate>
            <asp:Label ID="lblTab1" runat="server" Text="Tab1"></asp:Label>
        </HeaderTemplate>
        <ContentTemplate>
            ... (anything goes here, it still doesn't work)
        </ContentTemplate>
    </cc1:TabPanel>
    <cc1:TabPanel runat="server" HeaderText="Header2" ID="tabPanel2" TabIndex="1">
        <HeaderTemplate>
            <asp:Label ID="lblTab2" EnableViewState="False" runat="server" Text="Tab2"></asp:Label>
        </HeaderTemplate>
        <ContentTemplate>
            ... (anything goes here, it still doesn't work)
        </ContentTemplate>
    </cc1:TabPanel>
</cc1:TabContainer>

I know I can set focus on a control, I tried it but the page first scrolls to the tab container and then returns to the focused control (it doesn't look good). I tried this to set the focus to another control:

<body id="main" onload="javascript:document.getElementById('lnkLogout').focus();">

Is this the standard behavior for the TabContainer? How can I get rid of it?

Place script below right after ScriptManager control:

<script type="text/javascript">
    Sys.Extended.UI.TabContainer.prototype._app_onload = function (sender, e) {
        if (this._cachedActiveTabIndex != -1) {
            this.set_activeTabIndex(this._cachedActiveTabIndex);
            this._cachedActiveTabIndex = -1;

            var activeTab = this.get_tabs()[this._activeTabIndex];
            if (activeTab) {
                activeTab._wasLoaded = true;
                //activeTab._setFocus(activeTab); -- disable focus on active tab in the last TabContainer
            }
        }
        this._loaded = true;
    }
</script>

Alfa Thakkar

Try this out. It helped me:

window.Sys.Application.findComponent('<%=tabContainer.ClientID %>');

tabContainer.set_activeTabIndex(1);  ( //Here set the id of the last tab that is the index of the last tab. Index will start with 0 upto last - 1 as in array.. )

dashbored

This is an old thread, but it never got resolved – here or in any of the other threads I found – and I had the same problem.

I fixed it by putting my javascript in the body element: onload="scrollTo(0,0);"

You can set focus server-side to avoid the page jumping around.

Try this in Page_Load:

PageUtility.SetFocus(foo);

Also check you whether you are setting Page.MaintainScrollPositionOnPostback.

Let me know if that helps.

UPDATE - you can simply call .Focus() on whatever control you want to be in focus by default.

eg: YourControlToFocus.Focus()

I had a similar problem, but I found a more simple solution.

In the case you use a:

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

and more panel in the tab container ( 3 for example):

<asp:tabcontainer runat="server" ID="tc1" ActiveTabIndex="0" > 

<asp:TabPanel runat="server" ID="TB1" Height="250" >
<asp:TabPanel runat="server" ID="TB1" Height="250" >
<asp:TabPanel runat="server" ID="TB1" Height="250" >

For example, you can use the property:

 ActiveTabIndex="0"

tc1.ActiveTabIndex = 2 'code behind

Where the integer is the ID of the tab you want to Focus.

It works for me! I Hope I can Help someone!

Enjoy

来源：https://stackoverflow.com/questions/10796772/ajaxtoolkit-the-last-tabcontainer-on-the-page-is-focused-on-page-load

标签

ASP.NET

ajaxcontroltoolkit

tabcontainer