After you have created NewsRotator widget: Create an empty user control, you must implement sample functionality in it. The NewsRotator control implements the following main features:
Before you begin,you must add references to the following assemblies:
You must also add the following using statements in the NewsRotator.ascx.cs file.
To display the news items in your control, you must use an ASP.NET control that is capable of handling dynamic data. Examples for such controls are ListBox, GridView, etc. The tutorial uses the RadRotator control. It is part of the RadControls for ASP.NET AJAX, which are shipped together with Sitefinity CMS. The RadRotator can display its items in a slideshow manner.
NOTE: For more information about the RadRotator control, see its documentation.
The RadRotator control is located in the Telerik.Web.UI assembly. By default, the Sitefinity CMS project should contain a reference to it. To create an instance of the control, declare the appropriate namespace in your user control. Following is the code you must add to the NewsRotator.ascx file:
<%@ Register TagPrefix="sf" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
The declaration of the sf namespace, allows you to use any control inside the Telerik.Web.UI namespace in the Telerik.Web.UI assembly. After that you only create an instance of the RadRotator control with RotatorType property set to SlideShow. Write down the ID of the control, because later you will use it to access the control through the code-behind file.
To specify the layout for the items displayed in the NOTE: You can categorize the properties, which are added to the control designer of the control. To add a property to a specific category, mark it with the [Category("CategoryName")] attribute.
After defining a property for the limit of the news items, you must query the news items and pass them to the DataSource property of the RadRotator control. To do this you should use Sitefinity's Fluent API. It allows you to access and use the data from your Sitefinity CMS modules.
NOTE: For more information about querying news items with the Fluent API, see News. For more information about querying images and other media files, see Media content.
NOTE: News items that have no corresponding image, are not included in the resulting set.
After setting the DataSource property of the RadRotator control, an event handler is attached to the ItemDataBound event, and theDataBind() method is called. The method causes the RadRotator to bind to the data inside its data source. Event ItemDataBound is raised for each item that is created. Because anonymous types are used, this is the most suitable place for you to define the bindings between the UI elements in the ItemTemplate and the data items passed to it. Following is the code for the handler for the ItemDataBound event:
sender, RadRotatorEventArgs e)
var link = e.Item.FindControl(
var image = e.Item.FindControl(
var title = e.Item.FindControl(
var text = e.Item.FindControl(
NewsItem newsItem = (NewsItem)TypeDescriptor.GetProperties(e.Item.DataItem)[
Telerik.Sitefinity.Libraries.Model.Image newsImage = (Telerik.Sitefinity.Libraries.Model.Image)TypeDescriptor.GetProperties(e.Item.DataItem)[
) image.ImageUrl = newsImage.MediaUrl;
) title.Text = newsItem.Title;
) text.Text = newsItem.Summary;
&& TargetNewsPage !=
) link.NavigateUrl = DataResolver.Resolve(newsItem,
First, you get the references to the controls inside the ItemTemplate. After that, because the DataItem, which is passed to the RadRotator's item is an anonymous object, you call TypeDescriptor.GetProperties() to access the NewsItem and NewsImage properties. Finally, you set the title, text, image URL, and the link to the full news item. Bacause this link must point to a page that hosts a NewsView control, you should manually make query and get this page. In the following example the TargetNewsPage is represented by a read-only property:
.targetNewsPage = App.WorkWith().Pages()
.Where(p => p.Page !=
p.Page.Controls.Where(c => c.ObjectType.StartsWith(
(NewsView).FullName)).Count() > 0)
//it can still be null in case there is no page with a NewsView on it
Using the Fluent API, you get the first page which has a NewsView in it. This is the page, which the links for the full news items must point to.
NOTE: If you don't want to use the built-in property editor, you can create a control designer. The control designer allows you to define a custom UI that is used to configure the control.
Back To Top