Radrotator with pagination

11 posts, 0 answers
  1. suresh
    suresh avatar
    30 posts
    Member since:
    Apr 2011

    Posted 15 Sep 2011 Link to this post

    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.
  2. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 20 Sep 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. suresh
    suresh avatar
    30 posts
    Member since:
    Apr 2011

    Posted 27 Sep 2011 Link to this post

    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
  5. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 29 Sep 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  6. suresh
    suresh avatar
    30 posts
    Member since:
    Apr 2011

    Posted 06 Oct 2011 Link to this post

    Thanks slav, Its working nice.
  7. veera
    veera avatar
    1 posts
    Member since:
    Jul 2011

    Posted 31 Oct 2011 Link to this post

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

    Thanks,
    Veera.
  8. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 03 Nov 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  9. John Blomberg
    John Blomberg avatar
    5 posts
    Member since:
    Aug 2012

    Posted 14 Aug 2012 Link to this post

    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.
  10. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 20 Aug 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  11. John Blomberg
    John Blomberg avatar
    5 posts
    Member since:
    Aug 2012

    Posted 20 Aug 2012 Link to this post

    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.
  12. Slav
    Admin
    Slav avatar
    1356 posts

    Posted 23 Aug 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017