Radrotator with pagination

[suresh]

Hi there,
I want to use radrotator with pagination which means I have to rotate three images automatically, on every image rotation the pagination with numbers 1,2,3 have to selected for respective images....which  it is possible in radrotator?.

Thanks in advance,
Regards,
suresh.

[Slav]

Hi Suresh,

Such functionality can be incorporated into the RadRotator with some client-side scripts. Every number of the pagination will call a JavaScript method that will display the selected item by setting the current index. This can be achieved with the client method set_currentItemIndex. In order to display the selected item for the same duration as every one of the rest, you can use the stop and start methods before and after the current index is set, which will restart the sliding animation. The marking of the currently displayed item on the pagination can be achieved by setting the CSS through JavaScript.

In addition to this, the client-side event OnClientItemShown can be used to mark the current item on the pagination, as it is fired every time a new item is displayed.

The solution, suggested above, is implemented in the attached example. Please use it as a reference to incorporate the functionality into your actual project.

Greetings,
Slav
the Telerik team

[suresh]

Hi slav,
   Thanks for your valuable response..The example you provide for me  is working great..In your example you put the pagination under the rotator.Is it possible to put a pagination inside the radrotator..What I need is pagination  overlaps the images  and every images rotate behind the pagination,but pagination should be static position,,

Thanks in advance,
Regards,
S.Suresh

[Slav]

Hi Suresh,

You can utilize CSS in order to position the HTML div element with the pages absolutely and to configure its placement via the rules left and right. The CSS class that you should apply to the pages will look like the example below:

<style type="text/css">
    .pagination
    {
        position: absolute;
        left: 129px;
        top: 178px;
    }
</style>

<div id="buttons" class="pagination">
    <a href="javascript: selectItem(0)">1</a> <a href="javascript: selectItem(1)">2</a>
    <a href="javascript: selectItem(2)">3</a> <a href="javascript: selectItem(3)">4</a>
    <a href="javascript: selectItem(4)">5</a> <a href="javascript: selectItem(4)">6</a>
</div>

Please note that the distance to the left and to the top is specific to the sample project, attached in my previous post. To incorporate the solution into your actual project, you will have to set the values according to the layout of your page.

There is yet another implementation of the desired scenario that I can suggest. It is presented by the online demo Rotator / Pager Integration. You can refer to it as well, in order to achieve the paging functionality.

All the best,
Slav
the Telerik team

[suresh]

Thanks slav, Its working nice.

[veera]

Can you provide the compete visual studio code for this. I am having trouble in getting this code working.

Thanks,
Veera.

[Slav]

Hi Veera,

For your convenience I have prepared a sample page, containing the full solution with the fixes. Please use it as a reference for incorporating this feature into your actual project.

Best wishes,
Slav
the Telerik team

[John Blomberg]

I am noticing a small issue in my project and it seems to be present in the code sample here as well. When the control loads and the user clicks on a page number before the first automatic transition, the transition animation plays after the initial frame duration time has passed as if nothing were clicked. This doesnt actually result in a transition from one item to the next, it is just a visual transition animation occuring in the middle of the manually clicked frame's duration. Here is a further explanation of what I am seeing:

The page loads

The user immediately clicks on another item in the paging strip before the first frame transitions.

The selected frame is displayed with no transition.

In the middle of this frame's duration, there is a transition animation that occurs, but the rotator remains on the same frame.

After this, the rotator advances as normal.

This was observed on IE9 Windows Vista.

[Slav]

Hi John,

Indeed, when an item in the RadRotator is selected before the sliding animation is started, it remains visible for smaller time period than usual. In this case the FromCode RotatorType will be more suitable as it allows you to define the rotation animation and to avoid effects such as the encountered one.

You can find attached a sample that demonstrates the suggested approach by setting an interval for calling the RadRotator's client-side method showNext in order to scroll the rotator automatically. This implementation, combined with the pagination, will result in the desired effect. Please use the provided sample as a reference for incorporating the feature into your actual project.

Regards,
Slav
the Telerik team

[John Blomberg]

Thanks for the example. This seems to correct the issue. I had to add calls to the stopRotator and startRotator functions from within the ItemShown function because in my project, I am scrolling through messages and some of them have longer durations than others. The only issue I have now is that I was using a fade transition animation, and switching the RotatorType to FromCode has prevented me from declaring the animation type. I would prefer the fade animation over the default scrolling animation.

[Slav]

Hello John,

I have further modified the previously attached sample to implement the desired customization. The RadRotator items are now changed with fade animation by using the set_rotatorType client-side method to configure the rotator type when the control is loaded. You can use the attached page as a reference for your further development.

Regards,
Slav
the Telerik team