How to configure RadRotator

HOW TO
Configure the RadRotator control depending on the size of its ItemTemplate.

REASON
 RadRotator is a dynamic control that moves its content. To do that the control should be "aware" of its items size. The ItemWidth and ItemHeight properties are intended to provide this information to the control. If these properties are not set accordingly to the ItemTemplate's size, then the RadRotator will behave inconsistently in different browsers. Would be similar to:

• The items are not shown when the control is first loaded. After clicking the "Refresh" button the items are shown.
• Rotator shows only a part of a loaded item (the items are not synchronized)
• A gap occurs between the item like an empty item.
• The items do not rotate.

EXAMPLE
The following example demonstrates the purpose of the Width, ItemWidth, Height and ItemHeight properties:

The Rotator's setup :

The itemTemplate class :

Result:
After implementing the above steps then two items will be shown in the viewport of the RadRotator, because of the Width="200" and ItemWidth="100" properties.




If you need to show 3 items in the viewport you need to change the Width property to "300".
In case that you use one of the buttons' type of the RadRotator control you need to set Width="240" (the buttons have dimensions: 20x20 pixels).

Respectively, if you use the ScrollDirection="Up, Down", then the above described logic needs to be applied to the Height and ItemHeight properties.

IMPORTANT
The RadRotator control does not support percent values and all of the above properties need to be set in pixels. Also the items should have equal size.

CONCLUSION
ItemTemplate can contain several elements (images, labels etc.) and in this case the total of the elements' width or height should be taken into account when the ItemWidth or ItemHeight properties are set.