"scrollIntoView" in client-side dynamically created tabs issue

11 posts, 1 answers
  1. Rodrigo Selada
    Rodrigo Selada avatar
    23 posts
    Member since:
    Nov 2008

    Posted 24 Jul 2009 Link to this post


    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.

  2. Rodrigo Selada
    Rodrigo Selada avatar
    23 posts
    Member since:
    Nov 2008

    Posted 27 Jul 2009 Link to this post

    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.
  3. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 27 Jul 2009 Link to this post

    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.
  4. Rodrigo Selada
    Rodrigo Selada avatar
    23 posts
    Member since:
    Nov 2008

    Posted 27 Jul 2009 Link to this post


    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.



  5. Rodrigo Selada
    Rodrigo Selada avatar
    23 posts
    Member since:
    Nov 2008

    Posted 30 Jul 2009 Link to this post

    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.
  6. Answer
    Paul
    Admin
    Paul avatar
    4281 posts

    Posted 31 Jul 2009 Link to this post

    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.
  7. Rodrigo Selada
    Rodrigo Selada avatar
    23 posts
    Member since:
    Nov 2008

    Posted 31 Jul 2009 Link to this post

    Ok, thanks for your clear answer.

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


    Regards,

    Rodrigo Selada
  8. Sigmund Lunde
    Sigmund  Lunde avatar
    25 posts
    Member since:
    Aug 2005

    Posted 02 Sep 2009 Link to this post

    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
  9. Rodrigo Selada
    Rodrigo Selada avatar
    23 posts
    Member since:
    Nov 2008

    Posted 02 Sep 2009 Link to this post

    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.
  10. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 07 Sep 2009 Link to this post

    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.
  11. Sigmund Lunde
    Sigmund  Lunde avatar
    25 posts
    Member since:
    Aug 2005

    Posted 17 Sep 2009 Link to this post

    Any status updates regarding this issue?

    Sigmund Lunde
    Omega AS
Back to Top