TabStrip with multiple Rotators

[chulcy]

I am trying to use the TabStrip control with the Multipage Control, where each Tab has a single RadRotator control on it.
Each Rotator has it's RotatorType set to "AutomaticAdvance", and I am using the "Live XML" demo of the RadRotator. So, each Tab has a copy of the "Live XML" demo placed on it, radRotator1, radRotator2, etc.

When the page initially loads, the first tab's Rotator (radRotator1) works correctly with the items automatically scrolling from bottom to top, but when I select either of the other 2 tabs, the items on the Rotator are rendered, but they don't auto advance or scroll (they seem static) like the first tab's rotator does. If I click again on the First Tab, the Rotator appears to have paused, then resumes (which is exactly what I want).

So, the first tab's rotator works great, but rotators 2 and 3 will not start their scrolling animation at all.

What am I doing wrong? Does anyone know how to make this work?
Thank you for any assistance. Craig

[Niko]

Hi Craig,

The RadRotator seems to be behaving strangely in such a scenario. We will investigate what is happening exactly.
Still there is a way to force the RadRotators that are not advancing. In the OnClientTabSelected event handler of the TabStrip you need to have this method:

function repaintRotator(tabStrip, args)
{
    var rotator = getRotatorFromTab(args.get_tab());
    if(!rotator._animation)
        setTimeout(Function.createDelegate(rotator, rotator.startAutoPlay), rotator.get_frameDuration());
}

You will have to implement the getRotatorFromTab method so that the rotator is matched by the currently selected tab.
Please, find attached a sample implementation of the above description.

Hope this helps.

Kind regards,
Niko
the Telerik team

[chulcy]

Thanks Niko,
That worked great! I really appreciate the help.
Craig