Select a site

IMPORTANT: This version of Sitefinity CMS is out of support and the respective product documentation is no longer maintained and can be outdated. Use the version selector to view a supported product version.

NewsRotator widget: Create a template

Custom controls are usually represented by a class, which implements their functionality. The mechanism of creating controls in Sitefinity 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. From 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. You must have the following folder structure:



  6. From 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.



Filling the template

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. 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:

  1. From 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 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" %>
<sf:RadRotator id="RadRotator1" runat="server" RotatorType="SlideShow">
</sf:RadRotator>

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:

<sf:RadRotator ID="RadRotator1" runat="server" RotatorType="SlideShow">
    <ItemTemplate>
        <div>
            <div>
                <asp:Image runat="server" ID="newsImage" />
            </div>
            <div>
                <asp:Label runat="server" ID="newsTitle" />
                <asp:Label runat="server" ID="newsText" />
                <asp:HyperLink runat="server" ID="newsLink"><span>Read more...</span></asp:HyperLink>
            </div>
        </div>
    </ItemTemplate>
</sf:RadRotator>

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

Back To Top

Next: NewsRotator widget: Reference the template in the custom control