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

"scrollIntoView" in client-side dynamically created tabs issue

10 Answers 188 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Rodrigo Selada
Top achievements
Rank 1
Rodrigo Selada asked on 24 Jul 2009, 06:16 PM

Hi!

Complicated title, but is what it is. I'm creating tabs from client side that when pass the visible area area scrollable. The problem is that from the 2nd time towards, the same event for a particular tab (e.g., button event) should select the corresponding tab previously dynamically created in the client side and show the tab. I can easily select and show the content of the chosen tab by an exterior event, but it looks that using the scrollIntoView() method is messing all up.

My results, when selecting a tab from a client event of a button, for instance, where (with some variations):
IE8:
The tabs is selected, but the tab bar goes to a look-like random position (sometimes the selected tab is not in the visible part).

IE8 with compatibility mode to IE7:
When selecting a non-visible at the moment tab, only on the right of the visible area, the tab bar don't scroll to the selected one be visible.

FF:
Like IE8, all messed up.

The code:
<head runat="server"
    <title></title
 
    <script type="text/javascript"
 
        function SelecTabIndex(_index) { 
            var _rts = $find("RadTabStrip1"); 
 
            var _tab = _rts.get_tabs().getTab(_index); 
            _tab.scrollIntoView(); 
            _tab.select(); 
        } 
 
        function CreateDynamicTabs() { 
            var names = new Array("Advanced", "Automatic Updates", "Remote", "General", "Computer Name", "Hardware", "System Restore"); 
 
            var _rts = $find("RadTabStrip1"); 
            if (!_rts) 
                _rts = RadTabStrip1
 
            var _tab; 
            for (x in names) { 
                _tab = new Telerik.Web.UI.RadTab(); 
                _tab.set_text(names[x]); 
                _rts.get_tabs().add(_tab); 
            } 
            _tab.select(); 
            _rts._resize(); // to make the scroll buttons appear 
             
            return; 
        } 
    </script> 
 
</head> 
<body> 
    <form id="form1" runat="server"
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
    </telerik:RadScriptManager> 
    <div> 
        <input id="Button8" type="button" value="Create Dynamic Tabs" onclick="CreateDynamicTabs()"/><br /> 
     
        <input id="Button1" type="button" value="Advanced" onclick="SelecTabIndex(0);" /> 
        <input id="Button2" type="button" value="Automatic Updates" onclick="SelecTabIndex(1);" /> 
        <input id="Button3" type="button" value="Remote" onclick="SelecTabIndex(2)" /> 
        <input id="Button4" type="button" value="General" onclick="SelecTabIndex(3);" /> 
        <input id="Button5" type="button" value="Computer Name" onclick="SelecTabIndex(4)" /> 
        <input id="Button6" type="button" value="Hardware" onclick="SelecTabIndex(5)" /> 
        <input id="Button7" type="button" value="System Restore" onclick="SelecTabIndex(6)" /> 
         
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="400px" ScrollChildren="True" 
            ScrollButtonsPosition="Middle" Height="26px"
 
        </telerik:RadTabStrip> 
    </div> 
    </form> 
</body> 
</html> 


Using static/hardcoded tabs the results where:
IE8:
When selecting tabs that aren't on the instant visible area of the Tab Bar, it shows some random area of the Tab Bar.

IE8 with compability to IE7:
Seems to work fine. :-)

FF:
Same as IE8.

Code (with some variations):
<head runat="server"
    <title></title
 
    <script type="text/javascript"
 
        function SelecTabIndex(_index) { 
            var _rts = $find("RadTabStrip1"); 
 
            var _tab = _rts.get_tabs().getTab(_index); 
            _tab.scrollIntoView(); 
            _tab.select(); 
        } 
 
    </script> 
 
</head> 
<body> 
    <form id="form1" runat="server"
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"
    </telerik:RadScriptManager> 
    <div> 
        <input id="Button1" type="button" value="Advanced" onclick="SelecTabIndex(0);" /> 
        <input id="Button2" type="button" value="Automatic Updates" onclick="SelecTabIndex(1);" /> 
        <input id="Button3" type="button" value="Remote" onclick="SelecTabIndex(2)" /> 
        <input id="Button4" type="button" value="General" onclick="SelecTabIndex(3);" /> 
        <input id="Button5" type="button" value="Computer Name" onclick="SelecTabIndex(4)" /> 
        <input id="Button6" type="button" value="Hardware" onclick="SelecTabIndex(5)" /> 
        <input id="Button7" type="button" value="System Restore" onclick="SelecTabIndex(6)" /> 
        <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="400px" ScrollChildren="True" 
            ScrollButtonsPosition="Middle" Height="26px"
            <Tabs> 
                <telerik:RadTab Text="Advanced" Value="2"
                </telerik:RadTab> 
                <telerik:RadTab Text="Automatic Updates" Value="1"
                </telerik:RadTab> 
                <telerik:RadTab Text="Remote" Value="3"
                </telerik:RadTab> 
                <telerik:RadTab Text="General" Value="4"
                </telerik:RadTab> 
                <telerik:RadTab Text="Computer Name" Value="5"
                </telerik:RadTab> 
                <telerik:RadTab Text="Hardware" Selected="True" Value="6"
                </telerik:RadTab> 
                <telerik:RadTab Text="System Restore" Value="7"
                </telerik:RadTab> 
            </Tabs> 
        </telerik:RadTabStrip> 
    </div> 
    </form> 
</body> 
</html> 


Hope you can help me. It's very important, for me, to achieve the described.


Regards,

Rodrigo S.

10 Answers, 1 is accepted

Sort by
0
Rodrigo Selada
Top achievements
Rank 1
answered on 27 Jul 2009, 08:36 AM
Please, let me make it simplier.

I want select a particular tab from a scrolling Tab Bar from an external event, like a button click. If the browser isn't IE7 it will have an incorrect behavior when selecting a tab out of the visible area or selecting an already selected tab. If the tabs are dynamically created in the client side, not even in IE7 it has the expected behavior.

Can someone please tell me how workaround this aparent problem or register it to be corrected in the future?


Thanks,

Rodrigo S.
0
Paul
Telerik team
answered on 27 Jul 2009, 10:57 AM
Hi Rodrigo,

Please add the following style to your page:

<style type="text/css"
        .rtsUL 
        { 
            width10000px !important; 
            white-spacenowrap !important; 
        } 
    </style> 


Kind regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Rodrigo Selada
Top achievements
Rank 1
answered on 27 Jul 2009, 11:24 AM

Hello Paul!


Well, I added the style you posted to the example shown above (the one of the static/hardcoded tabs) and, despite being a little less randomly behavored, it's still not working as expected and it can't be deployed to a user. :| Sometimes all tabs go off visible area. Am I doing something wrong and is there any way to correct this?

Regards,

Rodrigo S.



0
Rodrigo Selada
Top achievements
Rank 1
answered on 30 Jul 2009, 08:44 AM
Telerik Members,

Is it possible to have the IE7 RadTabStrip behavior, wich is the correct, in IE8 and FF on the above described problem? If possible, how?

Regards,

Rodrigo S.
0
Accepted
Paul
Telerik team
answered on 31 Jul 2009, 10:48 AM
Hello Rodrigo,

Actually, we admit this is a bug. It will be fixed soon and most probably will be released with the next SP. Meanwhile, you can use <meta http-equiv="X-UA-Compatible" content="IE=7" /> meta tag to force compatibility mode in IE8.

Sincerely yours,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Rodrigo Selada
Top achievements
Rank 1
answered on 31 Jul 2009, 11:08 AM
Ok, thanks for your clear answer.

I'll be expecting the fix in the nex release.


Regards,

Rodrigo Selada
0
Sigmund Lunde
Top achievements
Rank 1
answered on 02 Sep 2009, 02:09 PM
This is still an issue even in build 2009.2.826.35 that was released Aug 26th. Neither I can see this has been fixed in any later internal build. Can you please make it happen? To us this is a showstopper and we don't want to switch to IE7 compatibility mode as it does not correct the issue in other affected browsers. We are prevented from updating until this is fixed, so please help.

Regds,
Sigmund Lunde
0
Rodrigo Selada
Top achievements
Rank 1
answered on 02 Sep 2009, 02:36 PM
Hi!

BTW, I didn't followed the know limitative workaround solution "<meta http-equiv="X-UA-Compatible" content="IE=7" />". I simply postponed the functionality since my web app hasn't been released to the client. As with Sigmund Lunde, I'm expecting the correction anytime soon (I still haven't tested with the latest build).


Regards,

Rodrigo S.
0
Paul
Telerik team
answered on 07 Sep 2009, 11:38 AM
Hi there,

We'll do our best to address this issue later this week. Please excuse us for the delay.

Best wishes,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Sigmund Lunde
Top achievements
Rank 1
answered on 17 Sep 2009, 10:36 AM
Any status updates regarding this issue?

Sigmund Lunde
Omega AS
Tags
TabStrip
Asked by
Rodrigo Selada
Top achievements
Rank 1
Answers by
Rodrigo Selada
Top achievements
Rank 1
Paul
Telerik team
Sigmund Lunde
Top achievements
Rank 1
Share this question
or