How do I display a record per rotator item?

[Acadia]

I have a Rad Rotator on my page and it's datasource can have multiple records or perhaps just one.  Each record has about 35 fields that need to be displayed in an itemized receipt format.  I want the rotator to display a "receipt" for each record and the user to navigate through the receipts one at a time by clicking the button.  How can I achieve this?  It seems to concatenate all of the field values from all records on the same line and looks ugly.

If this can be done with the rotator it would be great but I've never used the rotator before so I'm struggling with how to apply it to this situation.

A VB.NET sample would be appreciated.

Thanks.

[Serrin]

Hey Acadia,

You could try something like in the demo...

Declarative Datasources

You can look into the ASPX file to see how the binding is done to the customized Rotator template.  You would just need to make a template large enough to handle everything you want it to display, get all your bindings set, and turn off the autorotate that you see on the left RadRotator and switch it to the manual rotation that is on the rotating pictures on the right. :)

Nice thing about the demo too, it's all taken care of in your ASPX file, so no need to worry about VB/C#.

[Acadia]

Thanks!  I was able to get a horizontally scrolling rotator working now showing all of my fields for each record on it's own rotator item, but now the problem is that when I clikc the button (using slideshowbuttons type) it moves over to the next item but the gap on the left grows larger and larger with each item.  I want it to completely go to the next item with each click and left justify it.

Do you know what causes this?

[Acadia]

Also, is there a way to show an indicator as to which one of the rotator items you are on such as "Item 1 of 5"?

[Fiko]

Hello Acadia,

I am not quite sure about your setup but for the first issue you can try to set two additional properties to the RadRotator - ItemWidth and ItemHeight which let the rotator to determines the item's sizes.

To indicating the current item's index you can implement the following simple logic :

• attach a function to the OnClientItemShown event of RadRotator ;
• place the global variable that counts the indexes (starting from 0) ;
• get the count of the items from the rotator object (sender in my case) ;
• check if the index is equal to the count of the items then set index to 0  ;

For a demonstration purposes I attach the function CountRotatorItems() to the OnClientItemShown event and assign the index value to an asp:label to show the result e.g. :

<telerik:RadCodeBlock ID="RadCodeBlock" runat="server">
<script type="text/javascript">

var currentItemIndex = 0;
function CountRotatorItems(sender, arg)
{
var itemsCount = sender.get_items().length;

var label = $get('<%= Label1.ClientID %>');
label.innerHTML = currentItemIndex;

if (currentItemIndex == itemsCount - 1)
{
    currentItemIndex = 0;
}
else
{
    currentItemIndex++;
}
}
</script>
</telerik:RadCodeBlock>

I hope this helps!

Kind regards,
Fiko
the Telerik team

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

[Acadia]

This will work.  Thanks!