Telerik blogs

The RadRotator is a control that is easily overlooked in the RadControls for ASP.NET AJAX suite. It is not one of the more compelling controls like the RadGrid or the RadEditor, but it certainly provides a key set of functionality that is important in order for Telerik to claim that our suite is the most complete ASP.NET AJAX suite on the market. I’d like to take some time to show you what we have done to make the RadRotator a control that makes it easy for you, dear developer, to add rich functionality to your web applications.

Overview

The RadRotator for ASP.NET AJAX is a fully customizable UI component which provides content rotation functionality. It can be used to add rotating banners, scrolling alerts, image galleries, slideshows, and many other content rotation features to a web application. Content can be added to the RadRotator declaratively, or you can bind it to any of the data source components supported by ASP.NET for more dynamic content. As with all RadControls, the RadRotator comes with several built-in skins which can be used to easily give it the look and feel of other Telerik components on your page. The RadRotator also provides a rich client-side API so that you can easily customize the functionality of the control on the client. And since the entire RadControls for ASP.NET AJAX suite is built on top of Microsoft’s ASP.NET AJAX Framework, you’ll probably find the client-side API to be quite intuitive to work with.

Binding Data to the RadRotator

It’s quite simple to add items to the RadRotator declaratively. However, there are often times when the content that needs to be displayed is dynamic in nature and requires a data source to hold it. Thankfully, the RadRotator supports all built-in ASP.NET data source controls, such as the XmlDataSource, LinqDataSource, SqlDataSource, and so on. You can also use Telerik’s OpenAccess ORM to retrieve data and bind it to the RadRotator using the OpenAccessDataSource control. Whichever control you choose, you simply set the DataSourceID property to point to the data source control to bind your data to the RadRotator.

   1: <telerik:RadRotator ID="RadRotator1" runat="server"
   2: DataSourceID="OpenAccessDataSource1"
   3: RotatorType="AutomaticAdvance"
   4: ScrollDuration="200">
   5: <ItemTemplate>
   6: <img src='<%# String.Format("ImageHandler.ashx?id={0}", DataBinder.Eval(Container.DataItem, "EmployeeID")) %>' />
   7: </ItemTemplate>
   8: </telerik:RadRotator>
   9:  
  10: <telerik:OpenAccessDataSource ID="OpenAccessDataSource1" runat="server"
  11: ObjectContextProvider="Telerik.Examples.Data.NorthwindScopeProvider"
  12: TypeName="Telerik.Examples.Data.Employee">
  13: </telerik:OpenAccessDataSource>

If you prefer not to use a data source control and instead bind your data manually from code, you easily can do that as well. Simply retrieve a collection of data items and add them to the RadRotator’s DataSource property. Next, call RadRotator.DataBind() to bind the data.

   1: protected void Page_Load(object sender, EventArgs e)
   2: {
   3:     var data = new NorthwindDataContext();
   4:     var employees = from employee in data.Employees
   5:                     select employee;
   6:     RadRotator1.DataSource = employees;
   7:     RadRotator1.DataBind();
   8: }

Client-Side Programming

The RadRotator is primarily a client-side control. There are some server-side properties that can be configured to set up the appearance and functionality of the RadRotator, but once it’s been downloaded to the client there is no need for additional trips to the server. Since that is the case, it makes sense that the main functionality of the RadRotator can be controlled through a rich client-side API, which is built on top of the ASP.NET AJAX Client Framework. I won’t go into every function and property available in the RadRotator’s client API as that would make for an exceptionally long blog post. Instead I’ll show how you can use a couple of the client-side members to control the look and behavior of the RadRotator, which hopefully will give you a sense for the power of the API.

You can easily take full control of the RadRotator’s type and frame duration (the amount of time each frame will display when scrolling) from client-side code, and you can just as easily stop and start it on the client as well. To take advantage of these features, simply use the following members of the RadRotator client-side object:

  • get_frameDuration() & set_frameDurations(value) – gets/set an integer representing the amount of time, in milliseconds, that each frame will display in automatic scrolling situations
  • get_rotatorType() & set_RotatorType(value) – gets/sets the RadRotator’s type, represented by the Telerik.Web.UI.RotatorType enum. The RadRotator can be one of the following types:
    • AutomaticAdvance – Items are scrolled automatically
    • ButtonsOver – A button is displayed for each scroll direction, and the user must hover over the button to advance the RadRotator items
    • Buttons – A button is displayed for each scroll direction, and the user must click the button to advance the RadRotator items
    • SlideShow – Items are rotated automatically using a transition effect (e.g. Fade)
    • SlideShowButtons – A button is displayed for each scroll direction, and the user must click the button to display a new item
    • FromCode – Items will not change automatically and no buttons will be displayed; the RadRotator client-side API must be used to move items
  • start() – starts the RadRotator
  • stop() – stops the RadRotator

As you can see in the code snippets below, I have used the RadSlider control to set the frame duration of the RadRotator and am taking full control of the RadRotator’s functionality through the use of the client-side API.

   1: <script type="text/javascript">
   2: function pageLoad() {
   3: var rotator = $find('<%= RadRotator1.ClientID %>');
   4: var slider = $find('<%= RadSlider1.ClientID %>');
   5: var frameDuration = slider.get_value();
   6:         rotator.set_frameDuration(frameDuration);
   7:         rotator.set_rotatorType(Telerik.Web.UI.RotatorType.AutomaticAdvance);
   8:         rotator.startAutoPlay();
   9:     }
  10:  
  11: function RadSliderValueChange(sender, args) {
  12:         Play();
  13:     }
  14:  
  15: function Play() {
  16: var slider = $find('<%= RadSlider1.ClientID %>');
  17: var rotator = $find('<%= RadRotator1.ClientID %>');
  18: var frameDuration = slider.get_value();
  19:         rotator.set_frameDuration(frameDuration);
  20:         rotator.start();
  21:     }
  22:  
  23: function Stop() {
  24: var rotator = $find('<%= RadRotator1.ClientID %>');
  25:         rotator.stop();
  26:     }
  27: </script>
   1: <telerik:RadRotator ID="RadRotator1" runat="server"
   2: RotatorType="FromCode"
   3: Height="100px"
   4: Width="200px">
   5: <Items>
   6: <telerik:RadRotatorItem>
   7: <ItemTemplate>
   8: <img src="../App_Images/7.jpg" alt="yellow flowers" />
   9: </ItemTemplate> 
  10: </telerik:RadRotatorItem>
  11: <telerik:RadRotatorItem>
  12: <ItemTemplate>
  13: <img src="../App_Images/6.jpg" alt="yellow flowers" />
  14: </ItemTemplate> 
  15: </telerik:RadRotatorItem>
  16: <telerik:RadRotatorItem>
  17: <ItemTemplate>
  18: <img src="../App_Images/5.jpg" alt="yellow flowers" />
  19: </ItemTemplate> 
  20: </telerik:RadRotatorItem>
  21: <telerik:RadRotatorItem>
  22: <ItemTemplate>
  23: <img src="../App_Images/4.jpg" alt="yellow flowers" />
  24: </ItemTemplate> 
  25: </telerik:RadRotatorItem>
  26: </Items>
  27: </telerik:RadRotator>
  28:  
  29: <telerik:RadSlider ID="RadSlider1" runat="server"
  30: CssClass="Slider"
  31: LiveDrag="true" 
  32: ItemType="None"
  33: MinimumValue="0"
  34: MaximumValue="1000"
  35: SmallChange="10"
  36: LargeChange="50"
  37: Width="300px"
  38: OnClientValueChange="RadSliderValueChange">
  39: </telerik:RadSlider> 
  40:  
  41: <div class="Buttons">
  42: <span class="Button">
  43: <img src="../App_Images/play.png" alt="play button" onclick="Play()" />
  44: </span>
  45: <span class="Button">
  46: <img src="../App_Images/stop.png" alt="stop button" onclick="Stop()" />
  47: </span>
  48: </div>

Customizing the RadRotator’s Appearance

As of the Q3 2008 version of the RadControls for ASP.NET AJAX, the RadRotator boasts 15 different skins from which to choose right out of the box. These are the same skins that are included with all of the RadControls, and they provide developers with a very quick way to give the RadRotator a design that matches the remainder of the page, significantly reducing the time it would otherwise take to style the control. If you don’t want to use the built-in skins, you can easily create your own styles for the RadRotator or use a customer-submitted skin. Since content is template-based, it is quite simple to control the HTML that is produced by the RadRotator so that the content displays exactly how you want. Another benefit of the template-based design is that you can include any kind of content in the RadRotator, including Silverlight or Flash applications, server controls, and more, as can be seen from the following snippet.

   1: <telerik:RadRotator ID="RadRotator1" runat="server"
   2: RotatorType="Buttons"
   3: ScrollDuration="200">
   4: <Items>
   5: <telerik:RadRotatorItem>
   6: <ItemTemplate>
   7: <asp:Silverlight ID="Silverlight1" runat="server"
   8: Height="300px"
   9: Width="300px"
  10: InitParameters="ImageUrl=Images/4.jpg"
  11: MinimumVersion="2.0.30523"
  12: Source="~/App_ClientBin/SilverlightImages.xap" />
  13: </ItemTemplate> 
  14: </telerik:RadRotatorItem>
  15: <telerik:RadRotatorItem>
  16: <ItemTemplate>
  17: <asp:Silverlight ID="Silverlight1" runat="server"
  18: Height="300px"
  19: Width="300px"
  20: InitParameters="ImageUrl=Images/5.jpg"
  21: MinimumVersion="2.0.30523"
  22: Source="~/App_ClientBin/SilverlightImages.xap" />
  23: </ItemTemplate> 
  24: </telerik:RadRotatorItem>
  25: </Items>
  26: </telerik:RadRotator>

The features of the RadRotator are fully customizable as well. If you don’t want to use its default navigation buttons, you can turn them off and rotate the content using the client-side API or have the content rotate by itself automatically. Also, you can declaratively set other controls on the page to be navigation buttons instead.

   1: <asp:Image ID="Image1" runat="server"
   2: AlternateText="left navigational arrow"
   3: ImageUrl="~/App_Images/left_arrow.png" />
   4: 
   5: <telerik:RadRotator ID="RadRotator1" runat="server"
   6: RotatorType="Buttons"
   7: ScrollDuration="200">
   8: <ControlButtons LeftButtonID="Image1" RightButtonID="Image2" />
   9: <Items>
  10: <telerik:RadRotatorItem>
  11: <ItemTemplate>
  12: <img src="../App_Images/1.jpg" alt="yellow flowers" />
  13: </ItemTemplate> 
  14: </telerik:RadRotatorItem>
  15: <telerik:RadRotatorItem>
  16: <ItemTemplate>
  17: <img src="../App_Images/2.jpg" alt="canyon" />
  18: </ItemTemplate> 
  19: </telerik:RadRotatorItem>
  20: </Items>
  21: </telerik:RadRotator>
  22:  
  23: <asp:Image ID="Image2" runat="server"
  24: AlternateText="right navigational arrow"
  25: ImageUrl="~/App_Images/right_arrow.png" />

There are quite a few ways to modify and customize the appearance of the RadRotator so that it fits your needs exactly, and most of them require little effort on the part of the developer. Spending just a few minutes browsing through the online demos can give you a great sense for how this control can be made to look.

Design-Time Experience

One great feature that I often overlook in the RadRotator and many other Telerik controls is the design experience they offer in Visual Studio. I’m a code guy so I rarely enter the Visual Studio Designer, but occasionally I’ll have a need to get something together really fast, at which time the design-time experience of the RadControls is critical to my success. Through the use of smart tags, developers rarely have to go to the Properties window or fuss with any code/markup in order to configure the important features of the RadControls. For RadRotator specifically, you can set the Skin and DataSource properties right from the context menu.

RadRotatorSmartTag Of course, if you’re after more advanced functionality or want a higher level of control over the look and function of the RadRotator, nothing beats using the client- and server-side properties and methods to achieve the desired effects.

Conclusion

I hope you’ll agree when I say that the RadRotator is a valuable asset to developers and an integral member of the RadControls for ASP.NET AJAX suite. With its many looks and layouts, its flexibility to bind to multiple data sources, and its rich client-side API, I think you’ll find that the RadRotator can be an invaluable help to you in adding a rich user experience to your website with very little effort. I encourage you to play around with the RadRotator and get a first-hand feel for what it can do; I’m sure you’ll start imagining ways to fit it into your own web applications.

In closing, I’d like to point you to real-world, production web site from Telerik that uses the RadRotator for ASP.NET AJAX. We found it to be a quick and easy way to deliver important functionality to the home page of the new Telerik TV, a site dedicated to hosting Telerik’s growing library of video training resources. Be sure to check it out!

RadRotatorInAction

I have created a demo which can be downloaded below. The source code for the following topics covered in this post are available in C#: 

  • Adding custom buttons to the RadRotator
  • Using different built-in skins with the RadRotator
  • Using Silverlight content in the RadRotator*
  • Binding data to the RadRotator using a LinqDataSource control**
  • Binding data to the RadRotator programmatically using LINQ to SQL**
  • Binding data to the RadRotator using an OpenAccessDataSource control***
  • Binding data to the RadRotator programmatically using OpenAccess and LINQ***
  • Using the client-side API to control the RadRotator

*Requires that the Silverlight SDK be installed on your machine
**Requires the .NET Framework version 3.5 or greater, SQL Server Express, and the Northwind database
***Requires the .NET Framework version 3.5 or greater, SQL Server Express, OpenAccess ORM, and the Northwind database

[Source: C#]


About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Comments

Comments are disabled in preview mode.