Scrolling problem

[Henrik]

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:

	<div style="float: left; width: 400px;">
	<tel:RadTabStrip ID="tsSubTabs" ScrollChildren="true" Width="400px" MultiPageID="mpPages" SelectedIndex="0" runat="server" />
	</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

[Paul]

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.

[Henrik]

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