New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Change the value of the FrameDuration property depending on the content of the currently shown item in RadRotator

How to

Change the value of the FrameDuration property depending on the content of the currently shown item. This is especially useful when you show text content and the texts inside the RadRotator's items have different lengths.


The example shows how to use the RadRotator's client-side API in order to change its behavior dynamically. The provided code changes the value of the FrameDuration property based on the length of the text which is currently shown in RadRotator control.


The OnClientItemShown event is used in order to get the text shown inside the RadRotator control:

  1. First attach a handler to the event:

     <telerik:RadRotator ID="RadRotator1" runat="server" DataSourceID="xmlDataSource1"
      FrameDuration="2000" ScrollDirection="Up" Height="190px" Width="178px" OnClientItemShown="OnClientItemShown">
  2. Implement the handler:

    function OnClientItemShown(oRotator, args)
       var wrapperElement = getWrapperElement(args.get_item());
       // The div that wraps the text
       var textContainer = $telerik.$("#textContent", wrapperElement);
       var content = textContainer.text();
       var textlength = content.length;
           Approximately one second for every 20 characters ==>
       var calculatedFrameDuration = 1000 * (textlength / 20); // Milliseconds
       calculatedFrameDuration = Math.ceil(calculatedFrameDuration); // Round the number upwards
       var textToShow = String.format("Frame will stay {0} milliseconds", calculatedFrameDuration);
       oRotator.set_frameDuration(calculatedFrameDuration);// Change the frame duration
  3. The getWrapperElement method returns the DIV that wraps the content of the currently shown RadRotator item:

    function getWrapperElement(rotatorItem)
       var itemElem = rotatorItem.get_element();
       var wrapper = itemElem.firstChild;
       return wrapper;
In this article