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

Article information
Article relates to	RadRotator for ASP.NET AJAX
Created by	Fiko
Last modified	September 08, 2010
Last modified by	Fiko

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.


DESCRIPTION
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.




SOLUTION
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 ==>

           textlength

       */

       var calculatedFrameDuration = 1000 * (textlength / 20); // Milliseconds

       calculatedFrameDuration = Math.ceil(calculatedFrameDuration); // Round the number upwards

       var textToShow = String.format("Frame will stay {0} milliseconds", calculatedFrameDuration);

       $telerik.$("#FrameDurationViewer").text(textToShow);

       oRotator.set_frameDuration(calculatedFrameDuration);// Change the frame duration

   }
3. ThegetWrapperElement 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;

   }