Scrolling 1 item

[Sebastien Desemberg]

Is there a way to get the RadRotator to scroll/rotate a single item? I want to display a dynamic list of items, and i have noticed that if there is only one item, it does not scroll, it stays at the top. How do I get it to sroll that one item?

[Pero]

Hi Sebastien,

It is not possible to scroll a single item only. You could use the rotator.scrollItem() client-side method, but I am not sure whether it will satisfy your requirements.

I attached a sample project that scrolls a single item using the rotator.scrollItem() method (you must use the latest version in order for the client code to work).

All the best,
Pero
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.

[Sebastien Desemberg]

Hi Pero,

i am using version 2010.1.309.35 but I get an 'undefined' error in firebug on the 'rotator.scrollitem()' method. The rotator is on a master page.

Regards

[Petio Petkov]

Hello Sebastien,

Please discard the previous recommendation.

By design RadRotator will not scroll a single item.
Our suggestion is to add two identical items. This way the items will be automatically rotated, and it will look like one item is scrolled.

Hope this helps.

All the best,
Petio Petkov
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.

[p]

Your code sample works for me. How do i set the direction for scroll?

I display 3 items at a time in the rotator. And i want the navigation buttons to scroll only one item at a time instead of 3.

Thanks,

[Fiko]

Hi Guys,

If you need a custom scrolling behavior with RadRotator control , then I recommend you to use the provided solution in this online demo. In addition, you can check the RadRotator's client-side API documentation for more information about the features of the RadRotator's client object. 

I hope this helps.

Sincerely yours,
Fiko
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.

[Marbry]

I was able to get this working after some trial and error, but the client code with the previous example just plain doesn't work.

I call this in the XML datasource's load event (the rotator isn't bound to it, I'm just using it to retrieve the data), adding the same content twice so that there is more than one item:

    RadRotator2.DataSource = GetRotatorDataSource(content);
    RadRotator2.DataBind();
private string[] GetRotatorDataSource(string content)
{
    string[] cont = { content, content };
    return cont;
}

Then I call this javascript from the client page load function:

{
    var rotator = document.getElementById( "RadRotator2" );
    rotator.doScroll();
}

Here's the markup for the rotator:

<telerik:RadRotator ID="RadRotator2" ItemWidth="1200" runat="server" Width="750px" Height="25px" RotatorType="AutomaticAdvance" ScrollDuration="15000" FrameDuration="1" PauseOnMouseOver="False" Font-Size="Large" Font-Bold="True" ForeColor="White" Font-Names="Arial" SlideShowAnimation-Type="None" WrapFrames="True">
                    <ItemTemplate>

                        <%# Container.DataItem %>

                    </ItemTemplate>
                </telerik:RadRotator>

Make sure you have WrapFrames set to true and this should do it.  I have this working off a live RSS feed.

[Slav]

Hello Marbry,

If I understand you correctly you have successfully implemented the desired scenario. Yet, I would suggest using the Client API of the RadRotator in order to achieve sliding of a single element, as it seems that you have done it via custom client scripts. Please find attached a sample project, demonstrating a possible setup that incorporates the feature. You may use it as a reference for your further development.

Greetings,
Slav
the Telerik team

[Marbry]

Yes I have, that part is working fine.

The only thing lacking is a way to get the rotator to smoothly scroll with multiple items of different lengths.  I know that it's oriented around individual items, but it would be very helpful to have a mode where it just appended the content from all the items and continuously scrolled it in its entirety rather than treating each one discretely.

[Slav]

Hello Marbry,

Indeed, currently the RadRotator control is designed to rotate items with similar size and configuring it otherwise will result in loss of its animation's smoothness. The suggested feature will be brought to the attention of our developers, although I cannot confirm if it will be included in a future release of the RadControls for ASP.NET AJAX.

You could try to achieve a constant speed of the animation by changing the Scroll Duration according to the size of each scrolled item. This can be achieved via the client method set_scrollDuration of the rotator control, described in this help article and the client event OnClientItemShown which will allow you to set the scroll duration for every shown element.

Best wishes,
Slav
the Telerik team