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"
ItemHeight="30px">
<ItemTemplate>
<strong>
<a class="RotatorItem" href="<%# XPath("Url") %>" target='<%#
(bool.Parse(XPath("NewWindow").ToString()) == true) ? "_blank" : "_self" %>'
>
<%# XPath("Title")%></a>
</strong>
<br />
<span class="title">Starts:</span>
<span class="info"><%# XPath("PublishedDate")%></span>
<br />
</ItemTemplate>
<SlideShowAnimation Type="Fade" Duration="300" />
</tel:RadRotator>
<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
<NewsItems>
<Article>
<Title>New Web Site Coming Soon</Title>
<TargetDate>1/10/2009</TargetDate>
<Url>Default.aspx</Url>
<NewWindow>True</NewWindow>
<PublishedDate>11/1/2008</PublishedDate>
</Article>
<Article>
<Title>Test</Title>
<TargetDate>2/10/2009</TargetDate>
<Url>UploadFile.aspx</Url>
<NewWindow>True</NewWindow>
<PublishedDate>11/1/2008</PublishedDate>
</Article>
</NewsItems>
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).
