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:
From the dialog click Visual C# » Code » Code File.
Name the file Rotator.ascx and click Add.
An empty .ascx file is generated under the Views folder. You must have the following folder structure:
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 its documentation.
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:
To create an instance of the control in the .ascx file, add the following code to Rotator.ascx file:
<%@ Register TagPrefix="sf" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
By declaring sf namespace, you can use any control inside Telerik.Web.UI namespace in Telerik.Web.UI assembly. After which you only create an instance of the RadRotator control with RotatorType property set to SlideShow. Write down 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. Following is a sample of the required UI:
Note that server controls are used with a specific ID, because you will need to access them in the codebehind later.
Back To Top