This is a migrated thread and some comments may be shown as answers.

Scroll to active tab

9 Answers 305 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Steven
Top achievements
Rank 1
Steven asked on 05 Jun 2008, 08:47 AM
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

9 Answers, 1 is accepted

Sort by
0
Paul
Telerik team
answered on 05 Jun 2008, 11:28 AM
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
0
Steven
Top achievements
Rank 1
answered on 05 Jun 2008, 11:31 AM
That's brilliant Paul!


Thanks for yor help!

Steve
0
valse
Top achievements
Rank 1
answered on 07 Jul 2008, 09:20 AM
Hi...

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

Thanks
Marco
0
Paul
Telerik team
answered on 07 Jul 2008, 12:30 PM
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
0
Peter
Top achievements
Rank 1
answered on 01 Aug 2008, 02:04 PM
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?

0
Paul
Top achievements
Rank 1
answered on 01 Aug 2008, 05:18 PM
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);
            }
        }
    }
0
Peter
Top achievements
Rank 1
answered on 04 Aug 2008, 09:36 AM
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
0
Atanas Korchev
Telerik team
answered on 04 Aug 2008, 10:36 AM
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.
0
Peter
Top achievements
Rank 1
answered on 22 Aug 2008, 08:08 AM
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
Tags
TabStrip
Asked by
Steven
Top achievements
Rank 1
Answers by
Paul
Telerik team
Steven
Top achievements
Rank 1
valse
Top achievements
Rank 1
Peter
Top achievements
Rank 1
Paul
Top achievements
Rank 1
Atanas Korchev
Telerik team
Share this question
or