NewsRotator widget: Create a template | WebForms

Custom controls are usually represented by a class, which implements their functionality. The mechanism of creating controls in Sitefinity CMS allows you to specify a template. With a template you can specify the visual representation of your control. A template is represented by an.ascx file. To create a template for your control, perform the following:

1. In the NewsRotator project add a new folder named Resources.
2. In it, create a folder named Views.
3. In the context menu of folder Views, click Add » New Item...
4. From the dialog click Visual C# » Code » Code File.
5. Name the file Rotator.ascx and click Add.
   An empty .ascx file is generated under the Views folder.
6. In the context menu of file Rotator.ascx, click Properties.
7. In the Properties pane, set the Build Action property of the file to Embedded Resource.

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. In the current scenario the most appropriate control is 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 Rotator Overview.

The RadRotator control is located in the Telerik.Web.UI assembly. To use it, you must add a reference to it in the NewsRotator project.
To add a reference, perform the following:

1. In the context menu of project NewsRotator, click Add Reference...
2. In the dialog select the Browse tab.
   The Telerik.Web.UI assembly is located in folder Telerik.Sitefinity.Samples.Dependencies.
3. Select it and click OK.

To use the RadRotator, inside the Rotator.ascx file, you must first declare Telerik.Web.UI namespace, using the following code:
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="sf" %>

Then, you create an instance of the control, using the following code:
<sf:RadRotator id="RadRotator1" runat="server" RotatorType="FromCode"></sf:RadRotator> 

By declaring sf namespace, you can use any control inside Telerik.Web.UI assembly. Afterwards, you only create an instance of the RadRotator control with RotatorType property set to FromCode. Copy the ID of the control, because you will later use it to access the control through the codebehind file.

To specify the layout of the items displayed in the RadRotator control, you have to specify an ItemTemplate for it. In this tutorial, you must provide UI elements for the news item's image, title, summary, and link to the full item.

Use the following markup for the Rotator.ascx file:

NOTE: The server controls are used with a specific ID, because you will need to access them in the codebehind later.