Meet the RadRotator’s Cousin, the RadTicker for ASP.NET AJAX

I recently posted an in-depth look at the RadRotator for ASP.NET AJAX. I feel it appropriate to follow-up that post with a discussion about another oft-overlooked control in Telerik’s ASP.NET AJAX suite, the RadTicker. The RadTicker is closely related to the RadRotator for ASP.NET AJAX, but boasts its own unique functionality. Whereas the RadRotator is best suited for richer content, such as images and HTML markup, the RadTicker is designed specifically to display text. The RadTicker uses client script to display a single character of text in a given interval, simulating a “typewriter” effect. While it has many of the same features as the RadRotator – a rich client-side API, the ability to display “rotating” content, and the ability to bind to any ASP.NET data source control - it definitely stands out on its own in terms of functionality and purpose.

Displaying and Scrolling Text

Displaying scrolling text in the RadTicker for ASP.NET AJAX is quite easy. Simply add an <Items> collection to your RadTicker control and insert a <RadTickerItem> for each line of text you want to display. The only important property on the <RadTickerItem> is the Text property, which will hold the textual content you want to display. The RadTicker has a few important properties available. The most important is the AutoStart property, which is set to false by default. If you leave this value as false, you will have to start displaying content programmatically (which I will cover shortly). Next is the RadTicker's LineDuration, which is only used if the AutoAdvance property is set to true. This value represents the amount of time, in milliseconds, that the RadTicker will pause before displaying the next line of text. By default its value is 2000 (2 seconds). The TickSpeed property is another time value, in milliseconds, that specifies the duration between the display of each character in a line of text. Finally, the Loop property is used to ensure that the first <RadTickerItem> is repeated after the last <RadTickerItem> is displayed.

<telerik:RadTicker ID="RadTicker1" runat="server" 

 AutoStart="True"

 LineDuration="1000"

 Loop="True"

 TickSpeed="100">

 <Items>

 <telerik:RadTickerItem Text="Testing, Testing...." />

 <telerik:RadTickerItem Text="1, 2, 3............." />

 </Items>

</telerik:RadTicker>

Binding Data

The RadTicker can be bound to any ASP.NET data source control, such as an ObjectDataSource, SqlDataSource, or LinqDataSource control, or even to Telerik’s own OpenAccessDataSource control. Simply set the RadTicker’s DataSourceID to the ID of your data source control, then set the DataTextField property to the name of the data field whose value you’d like to display, and you’re done.

<telerik:RadTicker ID="RadTicker1" runat="server" 

 AutoStart="True"

 DataSourceID="LinqDataSource1"

 DataTextField="ProductName"

 LineDuration="500"

 Loop="True">

</telerik:RadTicker> 

<asp:LinqDataSource ID="LinqDataSource1" runat="server" 

 ContextTypeName="Telerik.Examples.Data.LinqToSql.NorthwindDataContext" 

 TableName="Products">

</asp:LinqDataSource>

One of the cool features of the RadTicker is that you can provide both static and dynamic data by using a data source control and setting the RadTicker’s AppendDataBoundItems property. When set to true, this property causes the RadTicker to display first each static <RadTickerItem> in your <Items> collection that you define declaratively, and then appends to the collection the items retrieved from your data source.

<telerik:RadTicker ID="RadTicker1" runat="server" 

 AppendDataBoundItems="true"

 AutoStart="True"

 DataSourceID="OpenAccessDataSource1"

 DataTextField="ProductName"

 LineDuration="500"

 Loop="True">

 <Items>

 <telerik:RadTickerItem Text="The following products are provided by Northwind...." />

 </Items>

</telerik:RadTicker> 

<telerik:OpenAccessDataSource ID="OpenAccessDataSource1" runat="server" 

 ObjectContextProvider="Telerik.Examples.Data.OpenAccess.NorthwindScopeProvider, OpenAccessDataSource" 

 TypeName="Telerik.Examples.Entities.OpenAccess.Product">

</telerik:OpenAccessDataSource>

Client-Side Programming

As with any of Telerik’s RadControls, controlling the RadTicker’s functionality through its client-side API is a breeze. Simply grab an instance of the client object by using the $find() shortcut, and then use any of the client-side functions to control its behavior. In the snippet below, you can see that I initialize the RadTicker programmatically using JavaScript, and then advance its items in the same manner.

<script type="text/javascript">

 var ticker = null;

 var itemCount = null;

 var tickerItemCountDiv = null;

 function pageLoad() {

        ticker = $find('<%= RadTicker1.ClientID %>');

        itemCount = ticker.get_numberOfItems();

        tickerItemCountDiv = $get('tickerItemCount');

        tickerItemCountDiv.innerHTML = itemCount;

        ticker.set_autoAdvance(false);

    }

 function nextItem() {

        ticker.tickNextLine();

        itemCount = itemCount - 1;

        tickerItemCountDiv.innerHTML = itemCount;

 return false;

    }

</script>

<div>

    Items remaining: <span id="tickerItemCount"></span>

</div>

<telerik:RadTicker ID="RadTicker1" runat="server" 

 DataSourceID="OpenAccessDataSource1"

 DataTextField="ProductName">

 <Items>

 <telerik:RadTickerItem Text="The following products are provided by Northwind...." />

 </Items>

</telerik:RadTicker> 

<div>

 <input type="button" value="Next items..." onclick="return nextItem();" />

</div>

<telerik:OpenAccessDataSource ID="OpenAccessDataSource1" runat="server" 

 ObjectContextProvider="Telerik.Examples.Data.OpenAccess.NorthwindScopeProvider, OpenAccessDataSource" 

 TypeName="Telerik.Examples.Entities.OpenAccess.Product">

</telerik:OpenAccessDataSource>

To learn more about the RadTicker’s client-side API, I recommend reading through its online documentation.

Conclusion

Displaying text in new and interesting ways is easier now with Telerik’s RadTicker for ASP.NET AJAX. While it is a simple control, it packs a lot of flexibility by offering multiple ways to populate it with data, several options to control the way the data is displayed, and complete control over its functionality on the client.

You may download the source code from this post using the link below. Some of the examples require one or more of the following: .NET Framework v3.5, Northwind  database, OpenAccess ORM. Enjoy!

[Source]