ScrollChildren not working when adding tabs client-side only

[Sigmund Lunde]

If there are no tabs initially added server side (or declaratively) setting ScrollChildren = true does not work in IE (Firefox seems to work). A workaround is to resize the browser window, then the buttons will appear. Fortunately, I also found a workaround using javascript; by calling the _resize() method of the tabstrip whenever I add a tab client-side.

Are you aware of this issue and will it be fixed in a future release?

Regards,
Sigmund Lunde
Omega AS

[Atanas Korchev]

Hi Sigmund Lunde,

We have logged this bug but we cannot commit when it will be fixed. Calling the _resize() method is a viable workaround until then. I have updated your telerik points for the bug report.

Regards,
Albert
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Michael]

It it not enough to call _resize() method to display scroll buttons. All the thing is that there is no "rtsScroll" style applied to childListElement on the client side. so i'm added it manually after adding first tab to the tabstrip:

 

this._framesTabs.get_tabs().add(activeTab);
if (this._framesTabs.get_childListElement().className.indexOf('rtsScroll') < 0) {
    this._framesTabs.get_childListElement().className += ' rtsScroll';
}

after that all became OK

 

[Rodrigo Selada]

[EDITED: Sorry for the dumb question below. It's obvious all I have to do is to add the call to the _resize() method on Tab Manager in the tab close event]


Sigmund and Michael, thanks for sharing your RadTabSript ScrollChildren problem workround. It was priceless for me. Tough, I still have a limitation that I would like to resolve and can't manage to do.

I would like to remove the Scroll buttons when I close enought tabs and the all remaining are visible at the same time. Is there any way to know when they are all visible and remove the scroll button?

Regards,

Rodrigo S.

[Sigmund Lunde]

That was just what I was about to suggest. Btw, is this also a problem in latest release or can we remove the hack we've added in javascript (telerik?)

[Joey]

This issue persists in the latest version Q3 2009 SP2.... When will it get fixed?

[Yana]

Hi Joey,

Unfortunately this issue is not addressed yet, but your requests here raise its priority. Probably we'll not manage to fix it for the Q1 release due to some more urgent tasks, but it will be included in the service pack.  We're sorry for the caused inconvenience and thank you for your patience.

Best wishes,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Brian Azzi]

As far as I can tell this is STILL a problem (I just ran into it with 2011.3). It always saddens me to see and issue like this that I'm having and then noticing that the last post was nearly three years ago.

/sigh

EDIT: ... and using the above workarounds with the latest version seem to work, but always insert the very last tab on a separate row?? (I get the rest to scroll)...

[Kate]

Hello Brian,

I tested the issue using the code below and the 2011.3.1115.35 version of the Telerik controls but I am not able to get the  issue that you do. Please give it a try and let me know how it goes from your side and if I am missing something and if so, could you modify the code so that it demonstrates the issue:

<script type="text/javascript">
        function OnClientClicking(sender, args) {
            var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
            tabStrip.trackChanges();
            var tab = new Telerik.Web.UI.RadTab();
            tab.set_text("New Tab");

            tabStrip.get_tabs().add(tab);
            tabStrip.commitChanges();
            args.set_cancel(true);
        }
    </script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <br />
    <telerik:RadButton runat="server" ID="button1" Text="button1" OnClientClicking="OnClientClicking">
    </telerik:RadButton>
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Width="400px" ScrollChildren="true">
        <Tabs>
            <telerik:RadTab Text="Tab" runat="server" Value="1">
            </telerik:RadTab>
            <telerik:RadTab Text="Tab1" runat="server" Value="2">
            </telerik:RadTab>
            <telerik:RadTab Text="Tab2" runat="server" Value="3">
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>

Regards,
Kate
the Telerik team

[Brian Azzi]

Ok, I'll give it a try, thanks. : )  I have since reworked my code to simply render them on a callback via RadAjaxManager (which suits my purposes fine anyway). I had merely been doing it client side since my existing code was already on the client.