Is there a way to have a gap on the trailing edge of the Rotator?

[George Mariakis]

I am trying to include a gap at the trailing edge of the rotator much like the leading gap on the Live XML example. The rotator is a vertical scroll up. When the rotator first starts up there's a leading blank, or gap, that is about the height of the control itself. I am wondering how to do this for the trailing edge. I have constantly changing list, but the gap should just be as tall as the control height. (For background, I am rendering live scores and I only render an entrant once we have a score so the list grows over time to consist of the entire entry list).

Currently I have tried to "add" blank entries to the end on the client side event OnClientLoad, but this only causes the leading gap to disappear and forces the items to "jump" up and not scroll properly. 

var itemsinrotator = rot.getItemHtmlElements().length;   for (var i = 0; i < itemsinrotator; i++) {     rot.addRotatorItem("<div height='64'> </div>", 0); }

Please advise on the best way to accomplish a trailing gap and once that gap has fully rendered (i.e. the height of the control), then trigger the full rotation as outlined here: http://www.telerik.com/community/forums/aspnet-ajax/rotator/load-fresh-data-after-one-full-rotation.aspx

The format should look like this:

Leading Edge Gap (height of control)
....
List of items
....
Trailing Edge Gap (height of control)
trigger that the scroll is complete (http://www.telerik.com/community/forums/aspnet-ajax/rotator/load-fresh-data-after-one-full-rotation.aspx)
...
Repeat with new data

Thank you.

Regards,
George

[Slav]

Hello George,

You can achieve the desired effect by adding empty items to the RadRotator, as you correctly guessed. In order to ensure that the rotator will start over after the last blank item is displayed, you don't need to trigger the rotation manually. Just verifying that the property WrapFrames is set to true will be enough.

My suggestion is to add the empty items on the code-behind, since items inserted via the client-side property addRotatorItem will not exist in the rotator's items collection on the server. So, on the server-side you can add three instances of the RadRotatorItem class at the end of the Items collection of the RadRotator, so that the edge gap has the height of the rotator's viewport.

In order to demonstrate the suggested approach, I have attached a sample project to this post. Please use it as a basis for your further development.

I hope the provided solution meets your requirements. Feel free to contact us again, should you encounter more problems.

All the best,
Slav
the Telerik team

[George Mariakis]

That did the trick. Thank you Slav.

Regards,
George