Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Rotator > Scrolling 1 item

• Sebastien Desemberg

  Posted on Mar 15, 2010 (permalink)

  Is there a way to get the RadRotator to scroll/rotate a single item? I want to display a dynamic list of items, and i have noticed that if there is only one item, it does not scroll, it stays at the top. How do I get it to sroll that one item?
  

  Reply

• Pero Pero

  Posted on Mar 18, 2010 (permalink)

  Hi Sebastien,
  
  It is not possible to scroll a single item only. You could use the rotator.scrollItem() client-side method, but I am not sure whether it will satisfy your requirements.
  
  I attached a sample project that scrolls a single item using the rotator.scrollItem() method (you must use the latest version in order for the client code to work).
  
  All the best,
  Pero
  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.

  Attached files

  • rotator-test-page.zip

  Reply


• Sebastien Desemberg

  Posted on May 10, 2010 (permalink)

  Hi Pero,
  
  i am using version 2010.1.309.35 but I get an 'undefined' error in firebug on the 'rotator.scrollitem()' method. The rotator is on a master page.
  
  Regards
  

  Reply

• Petio Petkov Petio Petkov

  Posted on May 10, 2010 (permalink)

  Hello Sebastien,
  
  Please discard the previous recommendation.
  
  By design RadRotator will not scroll a single item.
  Our suggestion is to add two identical items. This way the items will be automatically rotated, and it will look like one item is scrolled.
  
  Hope this helps.
  
  All the best,
  Petio Petkov
  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.

  Reply

• p

  Posted on Jun 1, 2010 (permalink)

  Your code sample works for me. How do i set the direction for scroll?
  
  I display 3 items at a time in the rotator. And i want the navigation buttons to scroll only one item at a time instead of 3.
  
  Thanks,
  

  Reply

• Fiko Fiko

  Posted on Jun 4, 2010 (permalink)

  Hi Guys,
  
  If you need a custom scrolling behavior with RadRotator control , then I recommend you to use the provided solution in this online demo. In addition, you can check the RadRotator's client-side API documentation for more information about the features of the RadRotator's client object. 
  
  I hope this helps.
  
  Sincerely yours,
  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.

  Reply

• Marbry Intermediate

  Posted on Nov 1, 2011 (permalink)

  I was able to get this working after some trial and error, but the client code with the previous example just plain doesn't work.
  
  I call this in the XML datasource's load event (the rotator isn't bound to it, I'm just using it to retrieve the data), adding the same content twice so that there is more than one item:
  

      RadRotator2.DataSource = GetRotatorDataSource(content);

      RadRotator2.DataBind();

  private string[] GetRotatorDataSource(string content)

  {

      string[] cont = { content, content };

      return cont;

  }

  
  
  Then I call this javascript from the client page load function:

  function ScrollRotator()

  {

      var rotator = document.getElementById( "RadRotator2" );

      rotator.doScroll();

  }

  
  Here's the markup for the rotator:
  

  <telerik:RadRotator ID="RadRotator2" ItemWidth="1200" runat="server" Width="750px" Height="25px" RotatorType="AutomaticAdvance" ScrollDuration="15000" FrameDuration="1" PauseOnMouseOver="False" Font-Size="Large" Font-Bold="True" ForeColor="White" Font-Names="Arial" SlideShowAnimation-Type="None" WrapFrames="True">

                      <ItemTemplate>

                            

                          <%# Container.DataItem %>

                            

                      </ItemTemplate>

                  </telerik:RadRotator>

  
  
  Make sure you have WrapFrames set to true and this should do it.  I have this working off a live RSS feed.

  Reply

• Slav Slav

  Posted on Nov 4, 2011 (permalink)

  Hello Marbry,
  
  If I understand you correctly you have successfully implemented the desired scenario. Yet, I would suggest using the Client API of the RadRotator in order to achieve sliding of a single element, as it seems that you have done it via custom client scripts. Please find attached a sample project, demonstrating a possible setup that incorporates the feature. You may use it as a reference for your further development.
  
  Greetings,
  Slav
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

  Attached files

  • RadRotatorRotateSingleItem.zip

  Reply

• Marbry Intermediate

  Posted on Nov 4, 2011 (permalink)

  Yes I have, that part is working fine.
  
  The only thing lacking is a way to get the rotator to smoothly scroll with multiple items of different lengths.  I know that it's oriented around individual items, but it would be very helpful to have a mode where it just appended the content from all the items and continuously scrolled it in its entirety rather than treating each one discretely.

  Reply

• Slav Slav

  Posted on Nov 8, 2011 (permalink)

  Hello Marbry,
  
  Indeed, currently the RadRotator control is designed to rotate items with similar size and configuring it otherwise will result in loss of its animation's smoothness. The suggested feature will be brought to the attention of our developers, although I cannot confirm if it will be included in a future release of the RadControls for ASP.NET AJAX.
  
  You could try to achieve a constant speed of the animation by changing the Scroll Duration according to the size of each scrolled item. This can be achieved via the client method set_scrollDuration of the rotator control, described in this help article and the client event OnClientItemShown which will allow you to set the scroll duration for every shown element.
  
  Best wishes,
  Slav
  the Telerik team

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Rotator > Scrolling 1 item