Rad Rotator fade animation from code

5 posts, 0 answers
  1. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 22 May 2010 Link to this post

    Dear Telerik support,

    I'm looking to control rad rotator showed items from code, however, I need to use the fade animation type. using such type of animation requires setting the rotator type to slide show, and doing that leads to a series of strange behavior if user used the animation direction controls "custom controls and JavaScript code" as well as frames numbers "a set of click-able buttons that shows the relevant frame". I would appreciate any suggestions or help.

    Regards,
  2. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 26 May 2010 Link to this post

    Hi loai,

    You can achieve the desired result using RadRotator's built-in methods and I recommend you to follow these steps:
    • Set RotatorType="FromCode" - this ensures that the control will not start when it is loaded
    • Set desired SlideShow animation properties:
      <SlideShowAnimation Duration="2000" Type="Fade" />
    • Attach a handler to the OnClientLoad event of the control:
      <telerik:RadRotator ID="RadRotator1" runat="server" DataSourceID="XmlDataSource1"
          Width="100px" ItemWidth="100px" ItemHeight="100px" Height="100px" RotatorType="FromCode"
          OnClientLoad="OnClientLoad">
          <ItemTemplate>
              <asp:Image ID="Image1" runat="server" ImageUrl='<%# XPath("ImageURL") %>' CssClass="imgSize" />
          </ItemTemplate>
          <SlideShowAnimation Duration="2000" Type="Fade" />
      </telerik:RadRotator>
    • The handler looks like this:
      function OnClientLoad(oRotator, args)
      {
          setTimeout(function ()
          {
              oRotator.set_rotatorType(Telerik.Web.UI.RotatorType.SlideShow); // Set Slideshow
              oRotator.stop(); // Stop slideshow animation
          }, 100);
      }
    • Add two buttons (or images, etc) that call the showNext metod of the RadRotator control:
      <asp:Button ID="Button1" runat="server" OnClientClick="showNextItem(0); return false;"
          Text="Left" />
      <asp:Button ID="Button2" runat="server" OnClientClick="showNextItem(1); return false;"
          Text="Right" />
    • The showNextItem method looks like this:
      function showNextItem(dir)
      {
          var oRotator = $find("<%= RadRotator1.ClientID %>");
          if (dir == 0)
          {
              oRotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Right);
          }
          else
          {
              oRotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);
          }
      }
    • Wrap the JavaScript code in a telerik:RadScriptBlock control in order to avoid error messages caused by the server parentheses - <%=

    I hope this helps.

    Greetings,
    Fiko
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 26 May 2010 Link to this post

    Hi Fiko,

    Honestly I lost hope that someone would answer my query, anyway I shall try out the above suggestion, and will get back to you upon issues/questions.

    Thanks for your help.

    Regards,
  5. loai taha
    loai taha avatar
    44 posts
    Member since:
    Apr 2007

    Posted 29 May 2010 Link to this post

    Dear Fiko,

    I tried to implement your code, however, the rotator behaved weirdly and things didn't go the way I asked about. I want to be able to use the Fade effect from code, at the same time I want the rotator to start automatically, to move to next and previous items, as well as pausing the rotator. On the other hand, I'm looking to control the rotator frames show by a set of numbered buttons, what ever button u press the frame the correspondent frame shall show. Please let me know if such a thing is not applicable, other wise I would appreciate providing complete code. Unless I shall go and open a ticket asking for help on that!

    Regards,
  6. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 02 Jun 2010 Link to this post

    Hello loai,

    The RadRotator control does not provide such functionality out of the box, but you can implement it by mixing the provided solution in this thread, this online demo and this code library. Each of the provided examples accomplish a part of your requirements and you need to integrate them in a project in order to achieve the desired result.

    I hope this helps.

    Kind regards,
    Fiko
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017