Changing RadTicker content with nuthin’ but JavaScript

As the Interwebs mature, and as web developers are pushed to deliver increasingly rich experiences through the browser, there are two technologies a developer can use to deliver to richness: (plug-in based) RIAs and JavaScript. Each technology has it’s pros and cons, but JavaScript has the serious advantage of being the “native” programming language for all Internet connected devices.

The Telerik RadControls for ASP.NET AJAX enable you to deliver standards-based richness using JavaScript, and in most cases you can deliver it without writing any code yourself. But what about those cases when you do want to take more control?

For that, the RadControls provide a very robust client-side API. In fact, most methods and properties available in the server-side API are available under the same (or very similar) names on the client. That means you can increasingly do more of your programming on the client (moving data with web services) and rely less on the “heavy” server-centric model.

That is a long introduction to get to today’s central point: how can you use JavaScript and the RadTicker client-side API to update RadTicker’s items on the fly?

RadTicker is unquestionably one of the “smaller” RadControls (when compared to RadGrid or RadScheduler), but it’s useful nonetheless. Unfortunately, today’s RadTicker doesn’t have a simple client-side API for changing items with JavaScript. But with a little jQuery and an understanding of how RadTicker works, we can easily change RadTicker items on the client and even bind our RadTicker to web service data.

Click to continue reading and see code for RadTicker client-side API

There are a couple of key concepts that you must understand to make this undocumented approach to changing RadTicker content work:

• RadTickerItems are rendered as SPAN tags in a parent "itemContainer" SPAN. The RadTicker object simply rotates through displaying the content of all child SPANs in the itemContainer. Removing or adding SPANs to this collection allows you to change RadTicker's contents.
• Related, the RadTicker object looks for specific SPAN IDs when rotating through items. Specifically, each TickerItem SPAN must have the ID "RadTicker1_i2"- where "RadTicker1" is the control's ClientID and "2" is the "index" of the item in the list of TickerItem SPANs.

Expressed in in code, this is how a basic RadTicker with three RadTickerItems renders on the page:

<span id="RadTicker1" style="display:inline-block;height:30px;width:400px;">
  <span id="RadTicker1_itemsContainer" style="display:none;">
      <span id="RadTicker1_i0">This is ticker item 1</span>
      <span id="RadTicker1_i1">Ticker item 2 is this</span>
      <span id="RadTicker1_i2">Finally, Ticker item 3</span>
  </span>
  <input id="RadTicker1_ClientState" name="RadTicker1_ClientState" type="hidden" />
</span>

By writing JavaScript that manipulates RadTicker's SPAN item collection, we can easily update the RadTickerItems completely client-side. For example, we can write code like this to append a new item to the RadTicker:

//Get reference to RadTicker and text input
var ticker = $find('RadTicker1');        
var container = ticker._getChildElement("itemsContainer");

var index = container.childElementCount;

//Create new SPAN - this will be our new Ticker item
var newElement = document.createElement("span");
newElement.setAttribute("id", 'RadTicker1_i'+ index);
newElement.innerHTML = txtEle.value;
     
$(newElement).appendTo(container);

//Tell RadTicker to recalculate number of Ticker items
ticker.set_numberOfItems($telerik.getChildrenByTagName(ticker._itemsContainer, "span").length)

Using this same basic pattern, we can easily expand on this example to also replace ticker items and bind ticker items to web service data. Check out a live running example showing this client-side approach for appending, replacing, and web service binding RadTicker.

NOTE: This is an undocumented client-side approach. RadTicker may (and probably will) provide a better API for doing this in the future. Use this approach in the mean time if you need to change RadTicker on the fly. Also note, if you do POST the page, your client-side changes will be lost.

Hopefully this tip will help you fully embrace client-side programming in your rich, standards-based web applications. The fully-commented code for this live demo is available for download below. Enjoy!

Live demo – Using JavaScript to change RadTicker Items

Download RadTicker JavaScript demo source code