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

Asked 29/5, 2012 at 9:52 Answered 16/6, 2014 at 16:9

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?

His answered 29/5, 2012 at 9:52 Comment(1)

any solutions to this? below javascript doesnt change anything on my page.. – Photosynthesis 20/5, 2013 at 10:44

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>

Serow answered 29/5, 2012 at 20:11 Comment(2)

Thank you so much. I was getting frustrated after a few hours and disappointed with having to revert to a previous version of the Toolkit. – Stepup 28/5, 2013 at 19:24

I get Sys.Extended.UI is undefined. – His 24/10, 2013 at 18:9

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()

Delapaz answered 29/5, 2012 at 10:3 Comment(2)

MaintainScrollPositionOnPostback didn't work. Also what is PageUtility? :D – His 24/10, 2013 at 18:9

that's pretty much what I did, but it seems like a workaround to me. Because right now you can see the page quickly jumping to the tabcontainer and then back to the beginning of the page. What I'm trying to achieve is prevent the page from jumping to the tab container in the first place. – His 27/11, 2013 at 18:39

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.. )

Elephus answered 10/7, 2013 at 10:9 Comment(1)

tabContainer is null or not an object. – Epiphany 5/9, 2013 at 14:49

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);"

Willywillynilly answered 16/8, 2013 at 16:4 Comment(1)

This solution doesn't work for me, I use instead the JavaScript in the main post (javascript:document.getElementById('lnkLogout').focus();). Customers accepted this solution. – His 24/10, 2013 at 18:5

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

Tahoe answered 16/6, 2014 at 16:9 Comment(0)

Recommended topics

Hot tags