NewsRotator widget: Implement the features of the custom control | WebForms

After creating and specifying a template for your control you are ready to proceed with implementing the main features. The control implements the following main features:

• Loading of the news items and their respective images from the Thumbnails album.
• Displaying the summary of the news item, its title, image, and a link to the full item.
• Scrolling through the available news items and their thumbnails in a slideshow mode.
• Loading of a limited number of news items.

To implement these features, you must add references to the following assemblies in the NewsRotator project:

• Telerik.Sitefinity
  On Browse tab navigate to the Telerik.Sitefinity.Samples.Dependencies folder from the cloned Github repository.
• Telerik.Sitefinity.Model
• Teleril.Sitefinity.ContentModules
• Telerik.OpenAccess
• Telerik.OpenAccess.35.Extensions
• Telerik.OpenAccess.Web
• Telerik.Web.UI
• System.Web.Extensions
  You can find the assembly on .NET tab.
• System.Runtime.Serialization
  You can find the assembly on .NET tab.

Before querying the news items, in the Rotator.cs define a property, which limits the count of the news items listed in the control.

By default, Sitefinity CMS creates a field in the control designer of the control for each of your public properties. The user can use the field generated for the NewsLimit property, to enter a value. If you do not want the system to generate a field for the NewsLimit property, mark it with a [Browsable(false)] attribute.

NOTE: You can categorize the properties 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, next, you must query the news items and pass them to the DataSource property of the RadRotator control. To do this you 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 items using the Fluent API, see For developers: News. For more information about querying images and other media files, see Media content.

After you set the DataSource property of the RadRotator control, an event handler is attached to the ItemDataBound event and the DataBind() 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.

In the handler for the ItemDataBound event, 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.

Because this link must point to a page that hosts a NewsView control, you must manually make query and get this page. In the following example the TargetNewsPage is represented by a read-only property.

Using the Fluent API you get the first page that has a NewsView on it. This is the page that the links for the full news items must point to.

EXAMPLE: For more information, about the Rotator.cs file, see NewsRotator widget: Code of the control class.