Randomizing the ScrollDirection of a RadRotator

[Reid]

Is there a way to set the AdRotator's ScrollDirection to scroll the item template contents in a random direction?

[Fiko]

Hello Reid,

If you mean the RadRotator control - it does not support this functionality out of the box, but you can achieve this behavior by attaching a function to OnClientLoad event of the RadRotator control e.g. :

<telerik:RadRotator ID="specialRotator" OnClientLoad="clientLoad" runat="server">
<ItemTemplate>
   <div class="outerWrapper outerWrapper_layout">
      <img src='<%# XPath("imageURL") %>' alt="Item Click Text" /></a>
   </div>
</ItemTemplate>
</telerik:RadRotator>

Then implement the clientLoad() function as follows :

<script type="text/javascript">
function clientLoad(sender )
{
var toRight = (Math.random() < 0.5);
if(toRight) sender.set_scrollDirection(Telerik.Web.UI.RotatorScrollDirection.Right);
else sender.set_scrollDirection(Telerik.Web.UI.RotatorScrollDirection.Left);
}
</script>

I hope this helps.


Kind regards,
Fiko
the Telerik team

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

[Reid]

Hello Fiko,

When I implement the code below the Rotator only fires the JavaScript code twice, once when the page loads and again when you click it (I have an attached handler).  Again, the page loading.

I also want it to scroll in *all* directions.

Along this same line I could not figure out how to get the DataItem in a client side event for the rotator, I would like to fire a new window off when the user clicks on it without a page refresh.

Thanks

[Fiko]

Hi Reid,

The OnClientLoad event fires every time when the RadRotator control is loaded and respectively the function that is attached to it will be executed as well. By default when you click on a rotator's item a post back is triggered and the page is reloaded.
You can change this behavior by attaching a function to the OnClientItemClicking event of the RadRotator control and use the set_cancel() function of the argument that was passed with parameter "true". In this function you can get reference to the currently clicked item of the RadRotator control as well (you can observe the steps in the attached demo project).

I am not quite sure that I understood your second question "I also want it to scroll in *all* directions", but basically you can change the ScrollDirection property by using set_scrollDirection() function of the RadRotator object. Please note that you have to do the following operations :

• change scroll direction to Right or Left if you load the RadRotator control with the property ScrollDirection set to "Up" or "Down".
• change scroll direction to Up or Down if you load the RadRotator control with the property ScrollDirection set to "Left" or "Right" ( by default ScrollDirection property has value "Left")

I hope this helps.


Regards,
Fiko
the Telerik team

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

[Reid]

Fiko,

Thank you for this information and for attaching the demo.  If i have any more questions I will respond to this thread again.