Scroll to active tab

[Steven]

Hi,

I have a page where the active tab is changed using javascript. If the new tab is hidden beyond the scroll buttons the tab header is not displayed. Is there I can change the scroll postion using javascript so that the selected tab header scrolls into view?

Cheers
Steve

[Paul]

Hello Steven,

Please find below a sample code snippet that shows the needed approach.

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" ScrollChildren="True" Width="500px">
        <Tabs>
            <telerik:RadTab ID="Tab1" runat="server" Text="Tab1">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab2" runat="server" Text="Tab2">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab3" runat="server" Text="Tab3">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab4" runat="server" Text="Root RadTab 4">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab5" runat="server" Text="Root RadTab 5">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab6" runat="server" Text="Root RadTab 6">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab7" runat="server" Text="Root RadTab 7">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab8" runat="server" Text="Root RadTab 8">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab9" runat="server" Text="Root RadTab 9">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab10" runat="server" Text="Root RadTab 10">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab11" runat="server" Text="Root RadTab 11">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab12" runat="server" Text="Root RadTab 12">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab13" runat="server" Text="Root RadTab 13">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab14" runat="server" Text="Root RadTab 14">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab15" runat="server" Text="Root RadTab 15">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab16" runat="server" Text="Root RadTab 16">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab17" runat="server" Text="Root RadTab 17">
            </telerik:RadTab>
            <telerik:RadTab ID="Tab18" runat="server" Text="Root RadTab 18">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <input id="Button2" type="button" value="Show Root RadTab 14" onclick="SetScrollPosition()" />
    <input id="Button3" type="button" value="Show Root RadTab 8" onclick="SetScrollPosition2()" />

    <script type="text/javascript">
    function SetScrollPosition()
    {
        var tabStrip = $find("<%=RadTabStrip1.ClientID %>");
        var myTab = tabStrip.findTabByText("Root RadTab 14");
        myTab.set_selected(true);
        tabStrip._scroller._scrollTo(myTab.get_element().offsetLeft);
        tabStrip._updateScrollState(tabStrip, tabStrip._scroller._currentPosition);
    }

    function SetScrollPosition2()
    {
        var tabStrip = $find("<%=RadTabStrip1.ClientID %>");
        var myTab = tabStrip.findTabByText("Root RadTab 8");
        myTab.set_selected(true);
        tabStrip._scroller._scrollTo(myTab.get_element().offsetLeft);
        tabStrip._updateScrollState(tabStrip, tabStrip._scroller._currentPosition);
    }
    </script>

</form>

Regards,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Steven]

That's brilliant Paul!


Thanks for yor help!

Steve

[valse]

Hi...

...there is the same solution for Q3 2007 Controls?

Thanks
Marco

[Paul]

Hi valse,

Please refer to this forum post for details on the matter.

Kind regards,
Paul
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Peter]

Hi Paul,

looks great! Only i have one problem left. It's not always going to the correct tab. (I'm not using the script to select a tab and scrolling to it, i'm actually using it to go to a tab after selecting it out of a list (like in the Internet explorer tabs, you also have a list of tabs in front of the tabstrip))

For example if I select the first tab, it will show a white space, and the first tab is hidden to the right of it. so if i scroll to the right, i'll get my first tab (and the rest of them also of course).

the function to set the scroll is not always giving the same result.
So if I set the function into a button, and click it several times, the result will be different a few times.

Any solutions to find the real position and keep it?

[Paul]

Even after reading all the posts regarding scrolling, I still didn't get a working solution for the new 2008 controls. Here is my little work around...

autoScrollTabs: function(tabStrip) {
        var selectedTab = tabStrip.get_selectedTab();  
        var tabWidth = selectedTab.get_element().offsetWidth;  
        var tabRight = selectedTab.get_element().offsetLeft + tabWidth; 
        var stripWidth = tabStrip.get_element().offsetWidth;
       
        if(tabStrip._scroller != null) {
            if((stripWidth + tabStrip._scroller._currentPosition) > tabRight) {
                tabStrip._scroller._scrollTo(0);
            }
            else {
                tabStrip._scroller._scrollTo(tabRight - stripWidth);
            }
        }
    }

[Peter]

Paul,

Indeed, that's working better!
Have you tested this in Firefox already? Internet explorer is working well, only Firefox is still having some problems with the script.
it's switching the scroll postion twice.

greetings

[Atanas Korchev]

Hello Peter,

You can use the scrollIntoView client-side method of the RadTab client-object:

var tabStrip = $find("RadTabStrip1");
tabStrip.get_selectedTab().scrollIntoView();

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Peter]

Hi,

        var tabStrip = $find("<%=RadTabStrip1.ClientID %>");
        tabStrip.get_selectedTab().scrollIntoView();

I used this in the onclientload of the tabstrip, and this is working quite good for internet explorer. the active tab will be placed on the left of the strip.

Is there any solution to get it right in FireFox? (latest version)
this is still jumping from left to right even without changing the tab.

greets