Setting set_scrollDuration(0) causes problems

[Mike Sharp]

Hi

I'm trying to get the rotator to automatically advance after a postback to the viewport items where the item was clicked.  For the most part, it's working well, but I'm trying to set the scroll duration to zero, so it jumps to the correct viewport, then back to 500 milliseconds so that it scrolls normally.  I've set the OnItemShown event, and my javascript is:

    // Set up the scroll position
    var currentIndex = <%= this.CurrentIndex %>;
    var isFirstLoad = true;
    function OnItemShown(sender, arg) {
        if (isFirstLoad == true) { // First loading
            isFirstLoad = false;
            sender.set_scrollDuration(0);
            // now scroll until currentIndex is reached
            for (var i = 0; i < currentIndex; i++)
            {
                sender.showNext(Telerik.Web.UI.RotatorScrollDirection.Up);
            }
            sender.set_scrollDuration(500);
        }
    }

What happens is the rotator jumps to the correct location, but if sender.showNext is called (e.g. I've jumped one or more sets of items), the scrolling animation goes away.  When I inspect the scrollDuration property, it's still set to 500 milliseconds, but scrolling is instantaneous, not animated.

Any ideas?

Thanks!
Mike

[Mike Sharp]

Oh, I should add that if I remove the set_scrollDuration() methods, it works fine, except the scrolling is visible after the postback while it indexes to the correct location. 

Mike

[Fiko]

Hi Mike,

In your scenario I recommend you to use this approach in order to maintain the current position of the RadRotator's item:

• Add a HiddenField to the page. The filed will hold the currently shown rotator item index
• Attach a JavaScript handler to the OnClientItemShown event of the control and assign the currently shown item index to the HiddenField's Value property
•  Restore the currently shown item by setting a value to the InitialItemIndex property of the RadRotator control. The value is the one stored in the HiddenField control

For your convenience I have attached a demo to the thread.

I hope this helps.


Kind regards,
Fiko
the Telerik team

[Mike Sharp]

Hi Fiko,

Thanks for your response.  I had previously tried that approach but using the InitialItemIndex property cause the list of items to be displayed in an odd order, unless you're wrapping the list items:

On first load:

0. Item number one
1. Item number two
2. Item number three
3. Item number four
4. Item number five
5. Item number six
6. Item number seven

Then set InitialItemIndex to 5 results in the item list being displayed like this:

5. Item number six
6. Item number seven
0. Item number one
1. Item number two
2. Item number three
3. Item number four
4. Item number five

So I thought I'd modify that approach, and run some script on the client side that advances the rotator to the value in the hidden field.  That's when I noticed the bug with setting scrollDuration to zero and then calling ShowNext.

But it's not a huge issue any more, as we've switched to using an ajax update panel, which doesn't require a full postback.  This is actually a better experience than using the postback, but still allows us to go to the server and get a specially encrypted token when an item is clicked.

For anyone else in this situation, here's what we did.  Note, this is contained in a web part in SharePoint, which displays a video player that uses a secure URL in order to play the video.  The videos are externally hosted with my content delivery provider.  I basically encrypt a token on the server, and append it to the URL which the remote media server decrypts and uses to determine if it's an authorized request for the video stream.  I'm using the RadRotator to display a playlist, and the ajax partial postback gets a fresh token when a video in the playlist is clicked.

First, wrap the rotator in an asp:UpdatePanel:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
    <contenttemplate>
<div id="PlayListDiv" style="float: left; width: <%=this.PlaylistWidth%>px; height: <%=this.PlaylistHeight%>px;
    margin-bottom: 20px;">
    <telerik:RadRotator ID="RadRotator1" runat="server" ScrollDirection="Up,Down" WrapFrames="False" RotatorType="Buttons"  ItemHeight="75"
        OnItemDataBound="RadRotator1_ItemDataBound" OnItemClick="RadRotator1_ItemClick">
        <itemtemplate>
            <div class="playlistWrapper">
                <a href="#" onclick="return false;" style="display:block;" title='<%# ((SPListItem)Container.DataItem)["VideoFile"] %>' runat="server" id="lnkVideoFile">
                    <img id="VideoThumbnail" class="videoThumbnail" width="64" height="64" src='<%# ResolveUrl("~/_layouts/Images/SecureVideoPlayer/VideoIcon64.png") %>'
                      alt="Customer Image" runat="server" />
                    <div class="playlistItem playlistTitle"><%# ((SPListItem)Container.DataItem)["Title"] %></div>
                </a>
                <div class="playlistItem"><%# ((SPListItem)Container.DataItem)["Description"] %></div>
                <div class="playlistFooter"><%# ((SPListItem)Container.DataItem)["RunningTime"] %> <asp:Literal ID="VideoLinkSeparator1" Text="|" runat="server" /> <a id="VideoResourceLink" runat="server">Link text</a></div>
            </div>
        </itemtemplate>
    </telerik:RadRotator>
</div>
 </contenttemplate>
</asp:UpdatePanel>

Then use jQuery to fire up the video player.  The StreamingServerUrl contains the encrypted token:

<script type="text/javascript">
function LoadVideoPlayer(VideoFile,StreamingURL)
{
    $f("player", "/_layouts/SecureVideoPlayer/swf/flowplayer-3.1.1.swf", {

        clip: {
            url: VideoFile,//'<%=this.VideoFile%>',
            autoPlay: <%=this.AutoPlay ? "true" : "false" %>,
            onBeforeFinish: function() { return <%=this.AutoLoop ? "false" : "true" %>; },
            autoBuffer: <%=this.AutoBuffer ? "true" : "false" %>,
            provider: 'rtmp'
        },
        plugins: {
            rtmp: {
                url: '/_layouts/SecureVideoPlayer/swf/flowplayer.rtmp-3.1.0.swf',
                netConnectionUrl:StreamingURL //'<%=this.StreamingServerUrl%>'
            }
        }
    });
    }
window.onload=LoadVideoPlayer;
</script>

Finally, on the server we handle the click event:

        protected void RadRotator1_ItemClick(object sender, RadRotatorEventArgs e)
        {
            HtmlAnchor objVideoFile = e.Item.FindControl("lnkVideoFile") as HtmlAnchor;
            if (objVideoFile != null && objVideoFile.Title != string.Empty)
            {
                VideoFile = objVideoFile.Title;
            }
            AutoPlay = true;
            ScriptManager.RegisterClientScriptBlock(this.Page, this.Page.GetType(), "player", "javascript:LoadVideoPlayer('" + this.VideoFile + "','" + this.StreamingServerUrl + "');", true);
        }

The StreamingServerUrl property automatically gets a fresh token, and we get a nice "YouTube-like" user experience.

Thanks for your help!
Regards,
Mike Sharp