Scrolling problem

3 posts, 0 answers
  1. Henrik
    Henrik avatar
    40 posts
    Member since:
    Jan 2009

    Posted 13 May 2009 Link to this post

    Hi,

    I tried opening a support ticket regarding this issue, but I keep getting an error message saying "

    It seems there was a problem with our server."

    So I hope you will reply this thread in short time, since this problem is very urgent.

    I have declared a TabStrip like this to enable horizontal scrolling:

    1 <div style="float: left; width: 400px;"
    2             <tel:RadTabStrip ID="tsSubTabs" ScrollChildren="true" Width="400px" MultiPageID="mpPages" SelectedIndex="0" runat="server" /> 
    3         </div> 

    However, the scrolling is not applied - no scroll buttons or anything. The tabs just "disappear" when they go beyond the length of the div (400px). When I look into the rendered HTML, I can see that the <ul> containing the tabs does not have the tsScrolling css class. How can this be?
    The tabs are loaded client side - does this have something to say?

    Best regards,

    Henrik


  2. Paul
    Admin
    Paul avatar
    4281 posts

    Posted 14 May 2009 Link to this post

    Hello Henrik,

    Unfortunately, this scenario is not supported for the moment. Alternatively, you can place the tabstrip inside a RadAjaxPanel and initiate an AJAX request at the end of the JS function.

    <form id="form1" runat="server">  
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1">  
    </telerik:RadScriptManager> 
    <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">  
     
    <script type="text/javascript">  
        function addTabs() {  
        var tabStrip = $find("<%= tsSubTabs.ClientID %>");  
        var tab1 = new Telerik.Web.UI.RadTab();  
        tab1.set_text("New Tab1");  
     
        var tab2 = new Telerik.Web.UI.RadTab();  
        tab2.set_text("New Tab2");  
     
        var tab3 = new Telerik.Web.UI.RadTab();  
        tab3.set_text("New Tab3");  
     
        var tab4 = new Telerik.Web.UI.RadTab();  
        tab4.set_text("New Tab4");  
     
        var tab5 = new Telerik.Web.UI.RadTab();  
        tab5.set_text("New Tab5");  
     
        var tab6 = new Telerik.Web.UI.RadTab();  
        tab6.set_text("New Tab6");  
     
        tabStrip.trackChanges();  
        tabStrip.get_tabs().add(tab1);  
        tabStrip.get_tabs().add(tab2);  
        tabStrip.get_tabs().add(tab3);  
        tabStrip.get_tabs().add(tab4);  
        tabStrip.get_tabs().add(tab5);  
        tabStrip.get_tabs().add(tab6);  
        tabStrip.commitChanges();  
     
        __doPostBack('RadAjaxPanel1', '');  
        }  
    </script> 
     
    </telerik:RadCodeBlock> 
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">  
    <div style="float: left; width: 400px;">  
        <telerik:RadTabStrip ID="tsSubTabs" ScrollChildren="True" Width="400px" MultiPageID="mpPages" 
        SelectedIndex="0" runat="server">  
        </telerik:RadTabStrip> 
    </div> 
    </telerik:RadAjaxPanel> 
    <input id="Button1" type="button" value="button" onclick="addTabs()" /> 
    </form> 


    Best wishes,
    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.
  3. Henrik
    Henrik avatar
    40 posts
    Member since:
    Jan 2009

    Posted 15 May 2009 Link to this post

    Hi Paul,

    Thank you for the answer. However, we received a "contains code blocks" error, that we could not solve, when we followed your approach. So we ended up with following this solution:

    http://www.telerik.com/community/forums/aspnet-ajax/tabstrip/scrollchildren-not-working-when-adding-tabs-client-side-only.aspx

    /Henrik


Back to Top