Is there a way to have a gap on the trailing edge of the Rotator?

3 posts, 1 answers
  1. George Mariakis
    George Mariakis avatar
    7 posts
    Member since:
    Dec 2005

    Posted 23 Aug 2011 Link to this post

    I am trying to include a gap at the trailing edge of the rotator much like the leading gap on the Live XML example. The rotator is a vertical scroll up. When the rotator first starts up there's a leading blank, or gap, that is about the height of the control itself. I am wondering how to do this for the trailing edge. I have constantly changing list, but the gap should just be as tall as the control height. (For background, I am rendering live scores and I only render an entrant once we have a score so the list grows over time to consist of the entire entry list).

    Currently I have tried to "add" blank entries to the end on the client side event OnClientLoad, but this only causes the leading gap to disappear and forces the items to "jump" up and not scroll properly. 

    var itemsinrotator = rot.getItemHtmlElements().length;
     
    for (var i = 0; i < itemsinrotator; i++) {
        rot.addRotatorItem("<div height='64'> </div>", 0);
    }


    Please advise on the best way to accomplish a trailing gap and once that gap has fully rendered (i.e. the height of the control), then trigger the full rotation as outlined here: http://www.telerik.com/community/forums/aspnet-ajax/rotator/load-fresh-data-after-one-full-rotation.aspx

    The format should look like this:

    Leading Edge Gap (height of control)
    ....
    List of items
    ....
    Trailing Edge Gap (height of control)
    trigger that the scroll is complete (http://www.telerik.com/community/forums/aspnet-ajax/rotator/load-fresh-data-after-one-full-rotation.aspx)
    ...
    Repeat with new data

    Thank you.

    Regards,
    George


  2. Answer
    Slav
    Admin
    Slav avatar
    1356 posts

    Posted 26 Aug 2011 Link to this post

    Hello George,

    You can achieve the desired effect by adding empty items to the RadRotator, as you correctly guessed. In order to ensure that the rotator will start over after the last blank item is displayed, you don't need to trigger the rotation manually. Just verifying that the property WrapFrames is set to true will be enough.

    My suggestion is to add the empty items on the code-behind, since items inserted via the client-side property addRotatorItem will not exist in the rotator's items collection on the server. So, on the server-side you can add three instances of the RadRotatorItem class at the end of the Items collection of the RadRotator, so that the edge gap has the height of the rotator's viewport.

    In order to demonstrate the suggested approach, I have attached a sample project to this post. Please use it as a basis for your further development.

    I hope the provided solution meets your requirements. Feel free to contact us again, should you encounter more problems.

    All the best,
    Slav
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. George Mariakis
    George Mariakis avatar
    7 posts
    Member since:
    Dec 2005

    Posted 29 Aug 2011 Link to this post

    That did the trick. Thank you Slav.

    Regards,
    George
Back to Top