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
If you're like most developers using the RadControls for ASP.NET AJAX, you're probably using RadGrid, Telerik's flagship grid component for the standards-based web. RadGrid allows you to do some incredible things in web applications without requiring you to write much (or any, in some cases) code. At some point, we've probably all experienced how RadGrid can help you create a ASP.NET page with data display, paging, filtering, grouping, editing, and "pretty styling" in a matter of minutes. We marveled at its ease of use and its ability to make us look like "super" developers to our bosses and clients.
After a quick 6-hour round-trip to Austin, I'm back in Houston and ready with some wrap-up thoughts (and slides) from 
