After you have created the empty user control, you must implement sample functionality in it. The NewsRotator control implements the following main features:
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 the Rotator Overview documentation.
The declaration of the sf namespace, allows you to use any control inside the Telerik.Web.UI namespace in the Telerik.Web.UI assembly.
Add the following markup to the NewsRotator.ascx file:
NOTE: The server controls are used with a specific ID, because you will need to access them in the code-behind later.
Next you must query the available news items and pass them to the RadRotator's DataSource property. Before doing that, define a property, which limits the count of the news items listed in the control.
By default, Sitefinity CMS creates a field for each of your public properties in the control designer of the control. Later you can use the field generated for the NewsLimit property, to specify a value. If you do not want to generate a field for the NewsLimit property, mark it with a [Browsable(false)] attribute.
NOTE: Sitefinity CMS automatically handles persistence in the background. The private backing field serves only as the default value of the NewsLimit property.
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 modules.
NOTE: This example assumes that the images are placed in an album Thumbnails and that their names match the ones of the news items. You must create an image library and name it Thumbnails, upload the thumbnail images and set the title of each image to the title of the news article you want the image to be connected to.
You must query the news items inside the Page_Load handler in the NewsRotator.ascx.cs file.
The result of the query is a list of anonymous objects each containing a news item and its associated thumbnail.
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.
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 should 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 which has a News widget in it. This is the page, which the links for the full news items must point to.
NOTE: If you do not 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.
Add the following code to the NewsRotator.ascx.cs file:
Back To Top
Copyright © 2018 Progress Software Corporation and/or its subsidiaries or affiliates.
All Rights Reserved.