Building Web Sites with Telerik RadControls - Part 1
page 4 of 6
by Brian Mains
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 42418/ 84

The Rotator Control

The RadRotator control is an advanced rotating control that does much more than advertisements, like its counterpart in the .NET Framework (AdRotator). The RadRotator uses a collection of RadRotatorItem objects to represent each item in the list. Each item can define its own template, but a common approach is to define an ItemTemplate property.

As with the .NET Framework, the template constitutes the interface for each item and could be an image, flash object, static text, form content, or any other type of content that you desire. Take a look at an example below that uses XPath statements to query content out of the XML file.

Listing 4

<tel:RadRotator id="rrNews" runat="server" ScrollDirection="Up" 
RotatorType="AutomaticAdvance" InitialItemIndex="0" DataSourceID="xdsNews" 
ScrollDuration="300" ItemWidth="200px" Width="210px" Height="200px" 
<a class="RotatorItem" href="<%# XPath("Url") %>" target='<%# 
(bool.Parse(XPath("NewWindow").ToString()) == true) ? "_blank" : "_self" %>'
<%# XPath("Title")%></a>
<br />
<span class="title">Starts:</span>
<span class="info"><%# XPath("PublishedDate")%></span>
<br />
<SlideShowAnimation Type="Fade" Duration="300" />
<asp:XmlDataSource ID="xdsNews" runat="server" DataFile="~/App_Data/News.xml"
XPath="//Article" />

The RadRotator plugs into the existing data source control architecture and leverages what is already done by the .NET Framework, using the XmlDataSource control to pass the contents of the News.xml file to the RadRotator. The RadRotator supports a variety of types of transitions; in this example, I use the AutomaticAdvance option of rotating amongst all of the templates, but there are a variety of modes to choose from.

The template runs and looks like the following screenshots. Note that because I defined a template, this requires custom styling because it is not out of the box. I did not specify custom styles.

Figure 2

Above are screenshots taken at two separate instances. The content is within the current visible range of items. In the list there are about 14 items, but only 7 show at one given time. As the list fluctuates, because the list is data bound, this is easily accounted for. Here is a brief example of the content; I only show two entries to save space.

Listing 5

  <Title>New Web Site Coming Soon</Title>

Each of these items translates to RadRotatorItem objects, with the content passed to the template of the RadRotatorItem. So the RadRotatorItem may not necessarily get any of this information passed to it, but it is simply used within the template.

To adjust how the rotator works, change some of the settings. For an example of how the control changes based upon settings, check out this example on the link.

A gotcha to be aware of: Each item is given a certain height and width. Based upon this information, the rotator control determines the size of each item and rotates them accordingly. If the height or width of the item is greater than the height or width of the rotator then it will not be rotated, so it is good to explicitly set these values).

View Entire Article

User Comments

Title: Mr   
Name: Andrew Goodall
Date: 2009-03-18 8:45:38 AM
Great helped me and I am planning on editing your demo Sitefinity

Community Advice: ASP | SQL | XML | Regular Expressions | Windows

©Copyright 1998-2024  |  Page Processed at 2024-06-25 10:58:08 AM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search